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' } }