Tömbök átstrukturálása

Hogyan tudunk egyszerűen kiszedni tömbből értékeket és egy változóhoz vagy változókhoz hozzárendelni?

Első lépésben létrehozzuk a tömböt:

const arr = ['one', 'two', 'three'];

Második lépésben az alábbi kifejezéssel a tömb egyes elemeit egyes változókhoz rendeljük:

const [a, b, c] = arr;

a const a a tömb 0. indexű eleme lesz, a const b az 1. indexű, és a const c a 2. indexű.

Ha a tömbben több elem is lenne, azokkal nem kell foglalkozni, a változók hozzárendelése tömbindex szerint megy végig.

Ha valamelyik érték undefined, azt ugyanúgy megkapja a változó, nem fogja a kifejezés átugorni ezeket az értékeket.

Adatok felcserélése

Hogy tudjuk két változó értékét megcserélni vagy két tömbelem értékét felcserélni?

Eddig ezt egy átmeneti tároló segítségével oldottuk meg.

Ehelyett az alábbi kifejezést is használhatjuk:

let a = 'A értéke';
    let b = 'B értéke';
    
    **[a, b] = [b, a];**
    

Ennek típusos példája az advanced bubble sort volt:

//...
    const temp = arr[i];
    arr[i] = arr[i+1];
    arr[i+1] = temp;
    //...
    
    //Ehelyett ezt is használhatjuk:
    [arr[i],arr[i+1]] = [arr[i+1],arr[i]]
    

Objektumok átstrukturálása

Hogyan működnek az előbb bemutatott példák objektumok esetében?

const person = {
        firstName: 'John',
        lastName: 'Doe',
        age: 30
    }
    
    const { firstName, lastName } = person
    // ebben az esetben a const firstName a person objektum dirstName tulajdonságának az értéke lesz
    

Objektumok esetében kapcsos zárójeleket használunk. Ha a hozzárendelés során olyan változónevet adunk meg, amilyen tulajdonság nem létezik az objektumban, akkor a változó értéke undefined lesz.

Ennek segítségével ha paraméterként kap valamilyen függvény objektumot, nagyon könnyen lehet változókhoz rendelni az objektum tulajdonságok értékét.

Objektumok átstrukturálása új változónév hozzárendeléssel

Hogyan rendelhetjük hozzá az objektum tulajdonságát egy olyan nevű változóhoz, ami nem egyezik meg az objektum tulajdonság nevével?

Ebben az esetben a tulajdonság név után kettősponttal adom meg a választott változó nevet:

const { firstName: f, lastName: l } = person
    //a firstName értéket az "f", a lastName értéket az "l" változóhoz rendeltük.
    

Objektumok átstrukturálása alapértelmezett értékkel

const styles = {
        background: 'white',
        color: 'red',
        display: 'block',
        visibility: 'hidden'
    }
    
    const {
        background,
        color,
        display,
        border = '1px solid black'
    } = styles;
    

A példában létrehozott styles objektum értékeit a megadott változónevekhez szeretnénk hozzárendelni. Mivel a border név nem szerepel a tulajdonságokban, ezért megadunk neki egy alapértelmezett értéket.

Ha a border mégis létezett volna a styles objektumban, akkor természetesen annak az értékét adtuk volna át a változónak.

Objektumok átstrukturálása új változónév hozzárendeléssel és alapértelmezett értékkel

Hogyan kombinálható az új változónév hozzárendelés az alapértelmezett értékadással?

const styles = {
        background: 'white',
        color: 'red',
        display: 'block',
        visibility: 'hidden'
    }
    
    const {
        background: b,
        color: c = 'blue',
        display: d,
        border: bo = '1px solid black'
    } = styles;
    

A változóhoz rendelés kifejezésben a tulajdonság név után tett : segítségével rendelhetjük hozzá a tulajdonság nevét tetszőleges nevű változóhoz. Emellett az = ad alapértelmezett tulajdonságot. Ha egy adott tulajdonság nem létezik, de alapértelmezett értéket adunk, akkor azzal az értékkel jön létre a változó, ha nem adunk, akkor pedig undefined lesz.