Trumpas įvadas apie masyvų naikinimą ES6

Destrukcijos JavaScript yra supaprastintas metodas išgauti kelis savybes iš masyvo, atsižvelgiant į struktūrą ir išskaidyti jį į savo sudedamąsias dalis per užduotis naudojant sintaksę, kad panašus į masyvo literały.

Tai sukuria modelį, apibūdinantį laukiamos vertės rūšį ir priskiriantį. Masyvo naikinimas naudoja poziciją.

Žr. Toliau pateiktą kodo fragmentą.

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

Sintaksė su pertvarkymu.

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

Sintaksė nepertvarkant.

Negalite naudoti Skaičiai pertvarkyti. Skaičiai sukels klaidą, nes skaičiai negali būti kintamieji pavadinimai.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];

Ši sintaksė sukelia klaidą.

Pertvarkius duomenis iš masyvo buvo labai paprasta ir lengvai įskaitoma. Įsivaizduokite, kaip bandote išgauti duomenis iš įdėto 5 ar 6 lygių masyvo. Tai būtų labai varginantis. Naudojate masyvo pažodį kairėje užduoties pusėje.

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

Jis paima kiekvieną masyvo kintamąjį kairėje pusėje ir susieja jį su tuo pačiu elementu, esančiu toje pačioje masyvo rodyklėje.

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

Deklaravimas ir priskyrimas gali būti atliekamas atskirai, pertvarkant.

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

Jei kintamųjų, perduotų destruktyvaus masyvo literalams, skaičius yra didesnis nei masyvo elementų, tada kintamieji, kurie nėra susieti su jokiu masyvo elementu, grįšundefined.

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

Jei kintamųjų, perduotų destruktyvaus masyvo literalams, skaičius yra mažesnis nei masyvo elementų, elementai be kintamųjų, kuriuos reikia susieti, tiesiog paliekami. Jokių klaidų nėra.

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

Sugrąžintų masyvų pertvarkymas

Pertvarkius, darbas su funkcija, suteikiantis masyvą kaip vertę, yra tikslesnis. Tai tinka visiems kartotiniams.

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

Numatytoji reikšmė

Pertvarkymas leidžia priskirti kintamajam numatytąją vertę, jei nėra vertės arba undefinedyra išlaikytas. Tai tarsi atsarginė priemonė, kai nieko nerandama.

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

Numatytosios vertės taip pat gali reikšti kitus kintamuosius, įskaitant tą patį masyvo pažodinį.

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

Kai kurių vertybių nepaisymas

Pertvarkymas leidžia susieti kintamąjį su jus dominančiais elementais. Galite nepaisyti arba praleisti kitus masyvo elementus naudodami kablelius.

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

Likęs parametras ir paskleista sintaksė

ES6 pridėtas naujas (…) operatorius gali būti naudojamas pertvarkant. Jei (…) operatorius kairėje pusėje rodomas pertvarkant, tai yra POILSIO PARAMETRAS . „Rest“ parametras naudojamas visiems likusiems masyvo elementams, kurie nebuvo susieti su likusiu kintamuoju, susieti. Tai tarsi surinkimas, kas liko . „Rest“ kintamasis visada turi būti paskutinis, kitaip SyntaxErrorbus metamas a.

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

Jei (…) operatorius rodomas dešinėje pusėje pertvarkant, tai yra SPREAD SYNTAX . Taiima visus kitus masyvo elementus, kuriems nėra priskirtas kintamasis, ir tada susieja jį su likusiu kintamuoju.

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

Kai kairėje pusėje galite turėti daugiau kintamųjų, atskirus masyvo elementus jis žymi vienodai su kintamaisiais.

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

Kintamųjų keitimas ar keitimas

Vieną destruktyvią išraišką galima naudoti keičiant dviejų kintamųjų reikšmes.

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

Įdėtas masyvo pertvarkymas

Taip pat galite atlikti įdėtą destrukciją naudodami masyvus. Atitinkamas elementas turi būti masyvas, kad būtų galima naudoti įdėtą destruktyvaus masyvo pažodį, kad priskirtumėte jame esančius elementus vietiniams kintamiesiems.

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

Kelių masyvų pertvarkymas

Masyvą galite sunaikinti daugiau nei vieną kartą tame pačiame kodo fragmente.

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

Išvada

Galite nukopijuoti ir įklijuoti kodą „Babel“ svetainėje, kad sužinotumėte, kaip kodas atrodytų, jei nebūtų pertvarkymo. Būtumėte parašę daugiau kodo eilučių, tačiau pertvarkius visa tai supaprastinama.