Tömbök destrukturálása ebben a kurzusban:

A(z) Tömbök destrukturálása fogalomról

A tömbök destrukturáló értékadása tömör módja annak, hogy értékeket nyerj ki egy tömbből. A szintaxisa hasonlít egy tömbliterál kifejezéséhez, csak az értékadás bal oldalán áll, nem a jobb oldalán.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Újraértékadás

Mivel a változók a tömbben elfoglalt pozíciójuk alapján kapják meg az értékeiket, a destrukturáló szintaxissal egyetlen kifejezésben adhatsz értéket vagy új értéket több változónak is.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Ez egymásba ágyazott tömbökkel is működik.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Értékek kihagyása

A szintaxis lehetővé teszi, hogy a párosítás során kihagyj értékeket, például hogy figyelmen kívül hagyj bizonyos pozíciókat a tömbben. Az alábbi példában képzeld el, hogy van egy getUserInfo függvény, ami egy tömböt ad vissza, amely a felhasználó keresztnevét, vezetéknevét és utcacímét tartalmazza.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Értékek elhagyása

Az értékadásban nem kötelező az összes értéket felhasználni.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Több érték kinyerése, mint amennyi elérhető

Akár több értéket is kinyerhetsz, mint amennyi a tömbben van; a maradék változók a undefined értéket kapják. Ez akkor lehet hasznos, ha előre nem tudod, hány érték lesz.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Alapértelmezett értékek

A tömbök destrukturáló értékadásában megadhatsz alapértelmezett értékeket arra az esetre, ha a forrástömbben nincs ilyen.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Kapcsolódó fogalmak

object-destructuring rest-and-spread