Lühike sissejuhatus massiivi hävitamisele ES6-s

Destruktureerimisdeklaratsioonis JavaScript on lihtsustatud meetod kaevandavate mitu omadused massiivist võttes struktuuri ja lahkavad see jaguneb oma osade kaudu ülesandeid, kasutades süntaksit, mis näeb välja sarnane massiiv literaale.

See loob mustri, mis kirjeldab, millist väärtust ootate, ja määrab ülesande. Massiivi hävitamine kasutab positsiooni.

Vaadake allolevat koodijuppi.

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

Süntaks ümberkorraldustega.

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

Süntaks ilma ümberkorraldamata.

Te ei saa numbreid ümberkorraldamiseks kasutada. Numbrid põhjustavad vea, sest numbrid ei saa olla muutujate nimed.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

See süntaks põhjustab vea.

Ümberkorraldamine on muutnud massiivi andmete väljavõtmise väga lihtsaks ja loetavaks. Kujutage ette, kui proovite andmeid eraldada pesastatud massiivist, millel on 5 või 6 taset. See oleks väga tüütu. Kasutate ülesande vasakul küljel massiivi literaali.

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

See võtab kõik massiivi vasakpoolsel küljel olevad muutujad ja kaardistab selle massiivi sama indeksiga sama indeksiga.

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

Deklaratsiooni ja määramist saab teha eraldi ümberstruktureerimisel.

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

Kui massiivi destruktiivsetele literaalidele edastatud muutujate arv on suurem kui massiivi elementides, tagastavad muutujad, mis pole kaardil ühegi massiivi elemendi vahelundefined.

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

Kui ümberstruktureeriva massiivi literaalidele edastatud muutujate arv on massiivi elementidest väiksem, jäetakse lihtsalt kaardistatavad muutujata elemendid alles. Pole ühtegi viga.

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

Tagastatud massiivide ümberkorraldamine

Ümberkorraldamine muudab töötamise funktsiooniga, mis tagastab massiivi väärtusena. See töötab kõigi korduvarvutite puhul.

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

Vaikeväärtus

Ümberkorraldamine võimaldab muutujale määrata vaikeväärtuse, kui väärtust pole või undefinedon läbitud. See on nagu tagavaraks pakkumine, kui midagi ei leita.

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

Vaikeväärtused võivad viidata ka teistele muutujatele, sealhulgas sama massiivi literaalile.

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

Mõne väärtuse ignoreerimine

Ümberkorraldamine võimaldab teil muutuja kaardistada huvipakkuvate elementidega. Massiivi teisi elemente saate ignoreerida või vahele jätta, kasutades komasid.

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

Ülejäänud parameeter ja levitatav süntaks

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"]

Kui vasakul küljel võib olla rohkem muutujaid, kaardistab see massiivi üksikud elemendid võrdselt muutujatega.

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"]

Muutujate vahetamine või vahetamine

Kahe muutuja väärtuste vahetamiseks saab kasutada ühte destruktiivset avaldist.

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

Pesastatud massiivi ümberkorraldamine

Massiivide abil saate teha ka pesastatud hävitamise. Vastav üksus peab olema massiiv, et kasutada sisestatud hävitava massiivi literaali selles olevate üksuste määramiseks kohalikele muutujatele.

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

Mitu massiivi ümberstruktureerimine

Massiivi saab ühes koodijupis mitu korda ümber ehitada.

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"]

Järeldus

Võite koodi kopeerida ja kleepida Paabeli veebisaidile, et näha, kuidas kood välja näeks, kui ümberstruktureerimist ei eksisteeriks. Oleksite kirjutanud rohkem koodiridu, kuid ümberstruktureerimine lihtsustab seda kõike.