En kort introduktion til arraydestrukturering i ES6

Destruktion i JavaScript er en forenklet metode til at udtrække flere egenskaber fra en matrix ved at tage strukturen og dekonstruere den ned i dens egne bestanddele gennem opgaver ved hjælp af en syntaks, der ligner array-litteraturer.

Det skaber et mønster, der beskriver den slags værdi, du forventer, og foretager opgaven. Arraydestrukturering bruger position.

Se nedenstående kodestykke.

var [first, second, third] = ["Laide", "Gabriel", "Jets"];

Syntaksen med destruktion.

var first = "laide", second = "Gabriel", third = "Jets";

Syntaksen uden destruktion.

Du kan ikke bruge Numbers til destruktion. Tal kaster en fejl, fordi tal ikke kan være variabelnavne.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Denne syntaks kaster en fejl.

Destruktion har gjort ekstraktion af data fra en matrix meget enkel og læsbar. Forestil dig at prøve at udtrække data fra et indlejret array med 5 eller 6 niveauer. Det ville være kedeligt. Du bruger en matrix bogstaveligt i opgavens venstre side.

var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;

Det tager hver variabel i arrayet bogstaveligt på venstre side og kortlægger det til det samme element i det samme indeks i arrayet.

console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: Fan

Erklæring og tildeling kan udføres separat i destruktureringen.

var first, second;[first, second] = ["Male", "Female"];

Hvis antallet af variabler, der sendes til destruktureringsarrangementets bogstaver, er mere end elementerne i arrayet, returneres de variabler, der ikke er tilknyttet et element i arrayetundefined.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefined

Hvis antallet af variabler, der sendes til destruktureringsarrangementets bogstaver, er mindre end elementerne i arrayet, er elementerne uden variabler, der skal kortlægges til, bare tilbage. Der er overhovedet ingen fejl.

var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: Fan

Destruktion af returnerede arrays

Destruktion gør arbejdet med en funktion, der returnerer en matrix som en værdi mere præcis. Det fungerer for alle iterables.

function runners(){ return ["Sandra", "Ola", "Chi"];}
var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: Chi

Standard værdi

Destrukturering tillader en standardværdi, der tildeles en variabel, hvis der ikke er nogen værdi eller undefineder bestået. Det er som at give et tilbagefald, når der ikke findes noget.

var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4
[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23

Standardværdier kan også henvise til andre variabler inklusive den i samme matrix bogstavelig.

var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlin
var [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Koku
var [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: Lydia

Ignorerer nogle værdier

Destructuring giver dig mulighed for at kortlægge en variabel til de elementer, du er interesseret i. Du kan ignorere eller springe de andre elementer i matrixen over ved hjælp af efterfølgende kommaer.

var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Output: Lordyconsole.log(b); //Output: Roses

Restparameteren og Spread Syntax

The new (…)operator that was added in ES6 can be used in destructuring. If the (…) operator appear on the left-hand side in destructuring then it is a REST PARAMETER. A Rest parameter is used to map all the remaining elements in the array that have not been mapped to the rest variable itself. It is like gathering what is left behind. The Rest variable must always be the last otherwise a SyntaxError is thrown.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;
console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]

If the (…) operator appears on the right-hand in destructuring then it is a SPREAD SYNTAX. Ittakes all the other elements in the array which have no variable mapped to them and then maps it to the rest variable.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Når du kan have flere variabler på venstre side, kortlægger det de enkelte elementer i arrayet ligeligt med variablerne.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];
console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

Udveksling eller ombytning af variabler

Et destruktureringsudtryk kan bruges til at bytte værdierne for to variabler.

var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];
console.log(a); //Output: Femaleconsole.log(b); //Output: Male

Nested Array Destructuring

Du kan også foretage indlejret destruktion med arrays. Det tilsvarende element skal være et array for at kunne bruge et indlejret destruktureringsarray til at tildele elementer i det til lokale variabler.

var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;
console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2

Multiple Array Destructuring

Du kan destruere en matrix mere end én gang i det samme kodestykke.

var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;
console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]

Konklusion

Du kan kopiere og indsætte koden på Babels websted for at se, hvordan koden ville se ud, hvis der ikke fandtes nogen destruktion. Du ville have skrevet flere linier med kode, men destrukturering forenkler det hele.