Jak používat destrukci objektů a polí v JavaScriptu

Destrukční přiřazení je velmi užitečný doplněk k ES6, který nám umožňuje extrahovat hodnoty z polí nebo vlastnosti z objektů do hromady odlišných proměnných. Je to speciální syntaxe, která rozbaluje pole a objekty do více proměnných.

Destrukturalizace je mimořádně užitečná, když nechcete objekt nebo pole předat funkci jako celek, ale spíše jako jednotlivé části. Podívejme se, jak se to dělá v následujících příkladech.

Destrukce pole

Syntaxe destruování pole automaticky vytvoří proměnné s hodnotami z odpovídajících položek v poli:

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, mango, cherry] = fruits;

console.log(apple);     // Apple
console.log(mango);     // Mango
console.log(cherry);    // Cherry

Přeskočení hodnot

Nechtěné položky pole lze přeskočit přidáním čárky navíc a ponecháním prázdných názvů proměnných:

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, , cherry] = fruits;

console.log(apple);     // Apple
console.log(cherry);    // Cherry

Zničení části pole

Můžete se dokonce rozhodnout destrukturovat část pole a přiřadit zbytek pole nové proměnné:

const fruits = ['Apple', 'Mango', 'Cherry'];

const [apple, ...remaining] = fruits;

console.log(apple);        // Apple
console.log(remaining);    // ['Mango', 'Cherry']

Přiřazení hodnot objektu

Co když chcete přiřadit hodnoty pole k objektu? Můžete to snadno provést destrukcí pole:

let user = {};

[user.name, user.age] = ['John Doe', 29];

console.log(user.name);     // John Doe
console.log(user.age);      // 29

Výchozí hodnoty

Pokud je v poli méně hodnot než proměnných zadaných v přiřazení, nedojde k žádné chybě. Destrukcí se automaticky přiřadí výchozí hodnoty dalším proměnným:

const [name, age] = ['Atta'];

console.log(name);      // Atta
console.log(age);     // undefined

Můžete také definovat vaše vlastní výchozí hodnoty pro proměnné v přiřazení:

const [name = 'John Doe', age = 30] = ['Atta'];

console.log(name);      // Atta
console.log(age);       // 30

age vlastnost se vrátí na 30 protože není definován v poli.

Výměna proměnných

Destrukční přiřazení lze také použít k záměně hodnot dvou proměnných:

let a = 15;
let b = 5;

[a, b] = [b, a];

console.log(a);     // 5
console.log(b);     // 15

Destrukce objektů

Destrukční přiřazení funguje také s objekty JavaScriptu. Proměnné přiřazení však musí mít shodné názvy s klíči objektu. Je to proto, že objektové klíče nemusí být nutně v určitém pořadí.

Zde je základní příklad:

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, whale, monkey } = animals;

console.log(cat);       // 🐱
console.log(whale);     // 🐋
console.log(monkey);    // 🐒

Použití nového názvu proměnné

Pokud chcete přiřadit hodnoty objektu novým klíčům namísto použití názvu existujících klíčů objektu, můžete provést následující:

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat: newCat, whale: newWhale, monkey: newMonkey } = animals;

console.log(newCat);       // 🐱
console.log(newWhale);     // 🐋
console.log(newMonkey);    // 🐒

Výchozí hodnoty

Stejně jako při destrukci pole lze i při destrukci objektu použít výchozí hodnoty:

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, sheep = '🐑', lion } = animals;

console.log(cat);       // 🐱
console.log(sheep);     // 🐑
console.log(lion);      // undefined

Můžete také nastavit výchozí hodnoty, když přiřadíte hodnotu nové proměnné:

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const { cat, sheep: wool = '🐑'} = animals;

console.log(cat);       // 🐱
console.log(wool);      // 🐑

Vypočítaný název vlastnosti

Vypočítaný název vlastnosti je další funkcí ES6, která také funguje pro destrukturaci objektů. Umožňuje dynamicky vypočítávat názvy vlastností objektů v doslovném zápisu objektu JavaScript.

Zde je příklad, který vypočítá název vlastnosti objektu pomocí zápisu "Computed Property Name":

const animals = { cat: '🐱', monkey: '🐒', whale: '🐋' };

const prop = 'monkey';

const { [prop]: newMonkey } = animals;

console.log(newMonkey);     // 🐒

Extrahování polí z objektu

Struktura objektu funguje také pro pole přítomná uvnitř objektu jako hodnoty:

const user = { name: 'Atta', friends: ['Ali', 'Amir'] };

const { name, friends } = user;

console.log(name);      // Atta
console.log(friends);   // ['Ali', 'Amir']

Destrukce vnořených objektů

Objekt může při destrukci obsahovat vnořené objekty. Chcete-li extrahovat hodnoty z hlubších objektů, musíte definovat stejnou strukturu vnoření na levé straně zadání:

const user = {
    name: 'Atta',
    place: {
        city: 'Sahiwal',
        country: 'Pakistan'
    }
};

const { name, place: { city, country } } = user;

console.log(name);      // Atta
console.log(city);      // Sahiwal
console.log(country);   // Pakistan

Všechny vlastnosti user objekt jsou přiřazeny k proměnným v přiřazení. Nakonec máme name , city a country odlišné proměnné. Všimněte si, že pro place neexistuje žádná proměnná protože jsme pouze extrahovali jeho obsah.

Zničení části objektu

Stejně jako pole můžete také destruovat část objektu a zbytek objektu přiřadit nové proměnné:

const user = {
    name: 'Atta',
    place: {
        city: 'Sahiwal',
        country: 'Pakistan'
    }
};

const { name, ...location } = user;

console.log(name);
// Atta

console.log(location);
// { place: { city: 'Sahiwal', country: 'Pakistan' } }