Když se podívám na svůj běžný kód JavaScript, vidím, že destrukční přiřazení jsou všude.

Čtení vlastností objektu a přístup k položkám pole jsou časté operace. Díky destrukčním úkolům jsou tyto operace mnohem jednodušší a stručnější.

V tomto příspěvku popíšu 5 zajímavých způsobů použití destrukcí v JavaScriptu nad rámec základního použití.

1) Vyměňte proměnné

Obvyklý způsob výměny 2 proměnných vyžaduje další dočasnou proměnnou. Podívejme se na jednoduchý scénář:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp je dočasná proměnná, která obsahuje hodnotu a . Poté a je přiřazena hodnota b a následně b je přiřazeno temp .

Díky destrukčnímu přiřazení je výměna proměnných jednoduchá, bez potřeby dočasné proměnné:

let a = 1;
let b = 2;

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

a; // => 2
b; // => 1

[a, b] = [b, a] je destruktivní úkol. Na pravé straně je vytvořeno pole [b, a] , tedy [2, 1] . První položka tohoto pole 2 je přiřazeno a a druhá položka 1 je přiřazeno b .

Přestože stále vytváříte dočasné pole, záměna proměnných pomocí destrukčního přiřazení je stručnější.

To není limit. Můžete zaměnit více než 2 proměnné současně. Zkusme to:

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

Můžete vyměnit tolik proměnných, kolik chcete! I když záměna 2 proměnných je nejběžnějším scénářem.

2) Přístup k položce pole

Máte pole položek, které mohou být prázdné. Chcete získat přístup k první, druhé nebo n-té položce pole, ale pokud položka neexistuje, získejte výchozí hodnotu.

Normálně byste použili vlastnost length pole:

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

Naštěstí vám destrukce pole pomáhá dosáhnout stejným způsobem kratších:

const colors = [];
const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = 'white'] = colors destructuring přiřadí firstColor proměnná první prvek z colors pole. Pokud pole nemá žádný prvek na indexu 0 , 'white' je přiřazena výchozí hodnota.

Všimněte si čárky na levé straně destrukcí:znamená to, že první prvek je ignorován. secondColor je přiřazen prvku na indexu 1 z colors pole.

3) Neměnné operace

Když jsem začal používat React a později Redux, byl jsem nucen napsat kód, který respektuje neměnnost. I když jsem měl zpočátku určité potíže, později jsem viděl jeho výhody:je snazší vypořádat se s jednosměrným tokem dat.

Neměnnost zakazuje mutovat předměty. Naštěstí vám destrukce pomáhá snadno dosáhnout některých operací neměnným způsobem.

Destrukce v kombinaci s ... Operátor rest odstraní prvky ze začátku pole:

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

Destrukční [, ...fooNumbers] = numbers vytvoří nové pole fooNumbers který obsahuje položky z numbers ale ten první.

numbers pole není mutováno, takže operace zůstává neměnná.

Stejným neměnným způsobem můžete odstranit vlastnosti z objektů. Zkusme smazat foo vlastnost z objektu big :

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

Destrukční přiřazení v kombinaci s operátorem odpočinku objektu vytvoří nový objekt small se všemi vlastnostmi z big , pouze bez foo .

4) Destruování iterovatelných

V předchozích částech bylo zničení aplikováno na pole. Můžete však destruovat jakýkoli objekt, který implementuje iterovatelný protokol.

Mnoho nativních primitivních typů a objektů je iterovatelných:pole, řetězce, typovaná pole, sady a mapy.

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

Nejste omezeni na nativní typy. Destrukční logiku lze přizpůsobit implementací iterovatelného protokolu.

movies obsahuje seznam objektů filmu. Při destrukci movies , bylo by skvělé získat název filmu jako řetězec. Pojďme implementovat vlastní iterátor:

const movies = {
  list: [
    { title: 'Skyfall' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Skyfall'

movies objekt implementuje iterovatelný protokol definováním Symbol.iterator metoda. Iterátor iteruje názvy filmů.

Přizpůsobení se iterovatelnému protokolu umožňuje zničení movies objekt do názvů, konkrétně přečtením názvu prvního filmu:const [firstMovieTitle] = movies .

Obloha je limitem při použití destrukcí s iterátory.

5) Destrukce dynamických vlastností

Podle mých zkušeností dochází k destrukci objektu vlastnostmi častěji než k destrukci polí.

Zničení objektu vypadá docela jednoduše:

const movie = { title: 'Skyfall' };

const { title } = movie;

title; // => 'Skyfall'

const { title } = movie vytvoří proměnnou title a přiřadí mu hodnotu vlastnosti movie.title .

Při prvním čtení o destrukci objektů mě trochu překvapilo, že nemusíte znát název vlastnosti staticky. Objekt můžete destruovat s názvem dynamické vlastnosti!

Chcete-li vidět, jak funguje dynamická destrukturalizace, napište si uvítací funkci:

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Ben' }, 'name'); // => 'Hello, Ben!'
greet({ }, 'name'); // => 'Hello, Unknown!'

greet() funkce se volá se 2 argumenty:objektem a názvem vlastnosti.

Uvnitř greet() , destrukční přiřazení const { [nameProp]: name = 'Unknown' } = obj přečte název dynamické vlastnosti pomocí hranatých závorek [nameProp] . Proměnná name obdrží hodnotu dynamické vlastnosti.

Ještě lépe můžete zadat výchozí hodnotu 'Unknown' v případě, že vlastnost neexistuje.

Závěr

Destrukce funguje skvěle, pokud chcete získat přístup k vlastnostem objektů a položkám pole.

Kromě základního použití je destrukce pole vhodná pro výměnu proměnných, přístup k položkám pole a provádění některých neměnných operací.

JavaScript nabízí ještě větší možnosti, protože můžete definovat vlastní destrukční logiku pomocí iterátorů.

Otázka:Jaké zajímavé aplikace destrukcí znáte? Napište komentář níže!

Kredity

Yuma-Tsushima07 / Yuma-Tsushima07

Soubor Readme

Vítejte na stránce Github Yuma-Tsushima!

Počet návštěvníků

O mně

Dobrý den, jmenuji se Yuma-Tsushima (často zkracováno na Yuma). Jsem ambiciózní kodér a baví mě kódování v JavaScriptu (hlavně). Také miluji tvorbu webových stránek pomocí HTML, CSS a (samozřejmě) JS! S programováním (samoučením) jsem začal ve 13 letech. Původně jsem pocházel z kreativní oblasti; Kreslím/zpívám/animuji/dělám hudbu.

Talenty a koníčky

Miluji kreslení (kreslím celý život). Hraji strategické hry, kóduji a dělám CTF! Jsem také dobrý v animaci, tvorbě AMV a úpravách obrázků. Moje oblíbená hra je Mindustry, následuje Flow Free a Sudoku. Miluju sledování anime (miluji Code Geass – mám hodně vztah k Lelouchovi) a toužím vytvořit si vlastní anime!