Destrukce polí a objektů v Javascriptu

# Destructuring of Arrays and Objects in Javascript

Tento díl si klade za cíl zjednodušit destrukci polí a objektů a zároveň vysvětlit použití operátoru SPREAD. To by mělo být docela užitečné pro začátečníky v javascriptu, kteří s tímto konceptem začínají, také si můžete vyhledat můj další článek o Destructuring Props and States.

Těšíte se, že se dozvíte něco nového 😀? Pak se pojďme ponořit!.

Co je to ničení?

Laicky řečeno, Destrukturace je proces rozbití struktury. V kontextu programování jsou struktury datovými strukturami a zničení těchto datových struktur znamená vybalení jednotlivých hodnot z datové struktury.

Destrukce v JavaScriptu je pohodlný způsob, jak extrahovat data z polí nebo objektů, mapovat je a nastavovat je do nových, odlišných proměnných. Efektivně umožňuje extrahování více vlastností nebo položek z pole nebo objektu.

Pomocí syntaxe destructuring můžete extrahovat menší fragmenty z objektů a
pole. Lze jej použít pro přiřazení a deklaraci proměnné.

Zničení pole

Při destrukci v javascriptu by syntaxí, kterou byste chtěli mít na paměti, byla umístění prvku, který chcete destruovat, na pravou stranu operátoru přiřazení a umístění proměnné, ke které chcete přistupovat, na levou stranu operátoru přiřazení. Proměnné by měly být v { } při destrukci objektů a [ ] při destrukci polí.

Podívejme se na kód níže:

const alphabets = ['A', 'B', 'C', 'D', 'E', 'F']

const a = alphabets[0]

console.log(a)

//The code will display **A** in the console

Výše uvedený kód obsahuje řadu abeced. Nyní způsob, jak získat přístup k prvku v abecedě pole, by bylo zacílit na index prvku v tomto poli a přiřadit jej k proměnné, poté zobrazit výsledek této proměnné v konzole, jak je vidět výše, nebo můžete zkusit toto:

**console.log(alphabets[index]).**

Ale s destrukcí v poli můžete přistupovat k více datům v tomto poli, aniž byste museli cílit na jejich index. Zkusme to níže:

const alphabets = ['A', 'B', 'C', 'D', 'E', 'F']

const [firstAlphabet, secondAlphabet] = alphabets;

console.log(firstAlphabet);
console.log(secondAlphabet);

// Try the code in your Editor and see the result 🙂. 
// The first element in the array will be assigned to firstAlphabet variable
// Also the second element in the array will be assigned to secondAlphabet variable

//Hence the console will display A and then B

Jak jsem již dříve vysvětlil, prvek, který chceme destruovat, je umístěn na pravou stranu operátoru přiřazení a data, ke kterým chcete získat přístup, jsou umístěna na levé straně operátoru přiřazení, obě položky jsou v [ ], protože jsme zničení pole.

JavaScript analyzuje alphabets pole a zkopírujte jeho první hodnotu ('A' ) do první proměnné destrukčního pole (firstAlphabet ).

Podobně počítač rozbalí alphabets druhá hodnota pole ('B' ) do druhé proměnné destrukujícího pole (secondAlphabet ).

Tímto způsobem můžeme z pole extrahovat nejen jedno, ale více dat, aniž bychom museli používat index.

Zničení objektu

Nyní platí stejná syntaxe pro destrukturování objektů { }, předpokládejme, že máte objekt a chtěli byste v objektu získat přístup k vlastnosti, hodnotě atd. Zničení objektu přijde vhod a usnadní život vám i mně.

Podívejme se na kód níže:

const user = {
    name: "John",
    email: "[email protected]",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
console.log(user.address.city);

Výše uvedené je objekt Uživatel s daty v něm uloženými, nyní by konvenčním způsobem přístupu k informacím o městě Uživatele byl console.log(user.address.city), jak je uvedeno výše. Ale pomocí Destructuring Object máte přístup do města a jakékoli jiné hodnoty snadno.

Podívejme se na kód níže:

const user = {
    name: "John",
    email: "[email protected]",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
const {city} = user.address;

console.log(city);

Zkusili jste to? 🙂. Co se stalo? Výstup konzole Ikeja , další způsob, jak to provést, by byl tento:

const user = {
    name: "John",
    email: "[email protected]",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
const {address: {city} } = user;

Co myslíš? 🤔

Destrukturalizace ve funkci

Jasně jsme viděli, jak destruovat pole a objekty. Připadá vám to zajímavé?

Destrukturovat můžeme i ve funkcích. Pojďme se podívat na kód níže:

const user = {
    name: "John",
    email: "[email protected]",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
function displayUser(info){
    console.log(info);
}
displayUser(user);

//you can also try display(user.name) to get name value, 
(user.address.city) to display city value 🙂 KEEP GOING!

Výše uvedený kód zobrazí informace který obsahuje všechna data v objektu uživatele. Nyní s destrukcí můžeme tento kód přepsat, abychom usnadnili přístup k hodnotám a vlastnostem.
Jak se k tomu postavíme? Podívejme se na kód níže:

const user = {
    name: "John",
    email: "[email protected]",
    password: "JohnXX3346",
    address : {
        city: "ikeja",
        state: "Lagos",
        country: "Nigeria",
    }
}
function displayUser({name, email}){
    console.log(`My name is ${name} and here is my email: ${email}`);
}
displayUser(user);

//What was your result? Cool right 😉.
//You should see **My name is John and here is my email: [email protected]** displayed in the console

Na rozdíl od předchozího kódu zde vše, co jsme museli udělat, bylo vložit vlastnosti, do kterých chceme získat jejich hodnoty, jako argumenty, nezapomenout je vložit do složených závorek { }, pak výsledek Console.log, a jak vidíte použili jsme šablonové řetězce. Chcete-li lépe porozumět řetězcům šablon, můžete si tento úžasný kousek vyhledat na webu Template Strings od Digital Ocean.

Závěr

Destructuring v Javascriptu je výkonná funkce, která vám umožní extrahovat vlastnosti z objektu a svázat tyto hodnoty s proměnnými.
Co považuji za zajímavé na destrukci, je stručná syntaxe a schopnost extrahovat více proměnných v jednom příkazu, jak byste také viděli, umožňuje čistší kód, což je jeden z nejlepších postupů pro kódování v Javascriptu.

Doufám, že se vám tento tutoriál líbil, nezapomeňte jej lajkovat, komentovat a poskytovat zpětnou vazbu a také uvést, na jaké téma byste také chtěli, abych napsal. Na zdraví! 😉