Trys naudingi taškai - poilsio ir plitimo JavaScript

Poilsio parametrai

Likusi sintaksė leidžia mus neribotam argumentų skaičiui atvaizduoti kaip masyvą. Pažvelkite į funkciją, kuri sudeda visus perduotus argumentus.

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

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

Skleidimo sintaksė

Operatorius spread leidžia išplėsti iteruojamus objektus į atskirus elementus. Šis funkcionalumas yra priešingas tam, kurį pasiekėme naudodami likusius parametrus. Jį galima taikyti visiems iterabiliems objektams, pavyzdžiui, masyvams, objektams, rinkiniams, žemėlapiams ir t. t.

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

console.log(sum(...numbers)); // 6

Trys taškai realiuose naudojimo atvejuose

Masyvo kopijavimas

Kopijuojant masyvą, skleidimo sintaksė iš tikrųjų yra vienu lygmeniu gilesnė. Vienas lygis reiškia, kad kopijuojamas pirmasis nuorodų lygis.

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

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

Unikalių elementų masyvo kūrimas

Sukurkite rinkinį, kuriame saugomi tik unikalūs elementai, ir konvertuokite jį atgal į masyvą.

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

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

Sujungti masyvus

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

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

Masyvo pjaustymas dalimis

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

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

Taip pat galime pašalinti n pirmieji elementai su kableliais.

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

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

Masyvo įterpimas į kito masyvo pradžią

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

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

skaičių masyvo nuo 0 iki n

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

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

Objekto destruktūrizavimas

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 }

Objekto kopijos kūrimas

tegul asmuo = {
  vardas: 'John',
  amžius: 25,
  piniginė: {
    suma: 500,
    valiuta: 'USD
  }
};
tegul personCopy = { ...person };

console.log(personCopy);
// {
// vardas: 'John',
// amžius: 25,
// piniginė: {
// suma: 500,
// valiuta: 'USD
// }
// }

Atkreipkite dėmesį, kad sukurta objekto kopija yra naujas objektas, turintis visas pradinio objekto savybes, bet neturintis prototipo informacijos.

person.age = 20;

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

Atkreipkite dėmesį, kad skleidimo sintaksė sukuria ‘seklią’ objekto kopiją, todėl savybė ‘piniginė’ bus nukopijuota tik kaip nuoroda į pradinį subobjektą. Norėdami atlikti gilųjį klonavimą, galite naudoti JSON stringify/parse metodą arba ‘Lodash’ teikiamą "cloneDeep" metodą, priklausomai nuo objekto sudėtingumo. Kai kuriais atvejais šis metodas taip pat gali būti naudingas:

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

Sąlyginis savybių pridėjimas prie objektų

Naudodami skleidimo operatorių kartu su trumpuoju įvertinimu, galime sąlyginai pridėti savybių prie kuriamo naujo objekto.

const spalvos = {
  red: '#ff0000',
  žalia: '#00ff00',
  mėlyna: '#0000ff'
};
const black = {
  black: '#000000'
};

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

console.log(conditionalMerge);
// {
// raudona: '#ff0000',
// žalia: '#00ff00',
// mėlyna: '#0000ff'
// }

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

console.log(conditionalMerge);
// {
// raudona: '#ff0000',
// žalia: '#00ff00',
// mėlyna: '#0000ff'
// juoda: '#000000'.
// }

Eilutės skaidymas į simbolius

Tai panašu į dalijimo metodo iškvietimą, kai parametras yra tuščia eilutė.

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

Skaityti daugiau:

3 dažniausiai pasitaikantys programinės įrangos produktų kūrimo iššūkiai pradedančiosioms įmonėms

Geriausias "Java" projektų tipas

Kaip nesunaikinti projekto dėl blogos kodavimo praktikos?