Kolm kasulikku punkti - ülejäänud ja levik JavaScript-s.

Ülejäänud parameetrid

Ülejäänud süntaks võimaldab meil esitada määramata arvu argumente massiivi kujul. Vaadake funktsiooni, mis liidab kõik üleantud argumendid kokku.

const sum = (...args) => args.reduce((prev, current) => prev + current);

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

Laiendatud süntaks

Operaator spread võimaldab meil laiendada iteratiivseid objekte üksikuteks elementideks. See funktsionaalsus on vastupidine sellele, mida saavutasime ülejäänud parameetritega. Seda saab rakendada kõigi iteratiivsete objektide, näiteks massiivid, objektid, komplektid, kaardid jne. suhtes.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(summa(...arvud)); // 6

Kolm punkti reaalsetes kasutusjuhtumites

Massiivide kopeerimine

Hajutatud süntaks läheb massiivi kopeerimisel sisuliselt ühe taseme võrra sügavamale. Üks tase tähendab, et kopeeritakse viited esimese taseme ulatuses.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Ainulaadsete elementide massiivi loomine

Looge kogum, mis salvestab ainult unikaalseid elemente, ja teisendage see tagasi massiivi.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

Massiivide ühendamine

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Massiivi viilutamine

const [firstElement, ...newArray] = [1, 2, 3, 4];

console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]

Samuti saame eemaldada n esimesed elemendid komaga.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

Massiivi sisestamine teise massiivi algusesse

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]

Numbrite massiivi genereerimine vahemikus 0 kuni n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Objekti destruktureerimine

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Objekti koopia loomine

let person = {
  nimi: 'John',
  vanus: 25,
  rahakott: {
    sum: 500,
    currency: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// nimi: 'John',
// vanus: 25,
// rahakott: {
// summa: 500,
// valuuta: 'USD'
// }
// }

Pange tähele, et loodud objekti koopia on uus objekt, millel on kõik algse objekti omadused, kuid mitte ükski prototüübiinfo.

person.age = 20;

console.log(person.age); // 20
console.log(personCopy.age); // 25

Pange tähele, et leviku süntaks loob objekti "pinnapealse" koopia, nii et "rahakoti" omadus kopeeritakse ainult viidetena algsele alamobjektile. Sügavaks kloonimiseks võite kasutada JSON stringify/parse lähenemist või Lodashi poolt pakutavat meetodit 'cloneDeep' sõltuvalt teie objekti keerukusest. Mõnel juhul võib ka see meetod olla kasulik:

lase personCopy = { ...person, wallet = {...person.wallet}}; 

Objektile omaduste tingimuslik lisamine

Me saame tingimuslikult lisada omadusi uuele objektile, mida me loome, kasutades levikuoperaatorit koos lühiajalise hindamisega.

const colors = {
  red: #ff0000',
  roheline: '#00ff00',
  blue: '#0000ff'
};
const black = {
  black: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...colors,
  ...(extraBlack ? must : {})
};

console.log(conditionalMerge);
// {
// red: #ff0000',
// roheline: '#00ff00',
// sinine: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
// red: #ff0000',
// roheline: '#00ff00',
// sinine: '#0000ff'
// must: '#000000' // must: '#000000'
// }

Stringi jagamine tähemärkideks

See on sarnane meetodi split kutsumisega, mille parameetriks on tühi string.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Loe edasi:

3 ühist väljakutset tarkvara tootearenduse alustavatele ettevõtetele

Parim projektitüüp Java jaoks

Kuidas mitte tappa projekti halbade kodeerimistavadega?