Trīs noderīgi punkti - pārējais un izplatīšanās JavaScript

Atpūtas parametri

Pārējā sintakse ļauj mums lai attēlotu nenoteiktu argumentu skaitu kā masīvu. Aplūkojiet funkciju, kas saskaita visus iesniegtos argumentus.

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

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

Izplatīšanas sintakse

Ar izkliedes operatoru var izvērst iterējamos objektus atsevišķos elementos. Šī funkcionalitāte ir pretēja tam, ko mēs panācām ar pārējiem parametriem. To var piemērot visiem iterabļiem, piemēram, masīviem, objektiem, kopām, kartēm utt.

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

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

Trīs punkti reālos lietošanas gadījumos

Masu kopēšana

Izplatīšanas sintakse, kopējot masīvu, faktiski iet vienu līmeni dziļāk. Viens līmenis nozīmē, ka tiek kopēts pirmais atsauču līmenis.

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

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

Unikālu elementu masīva izveide

Izveidojiet kopu, kurā tiek saglabāti tikai unikāli elementi, un konvertējiet to atpakaļ uz masīvu.

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

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

Konkatenēt masīvus

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

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

Masīva sagriešana šķēlēs

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

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

Mēs varam arī noņemt n pirmie elementi ar komatu.

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

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

Masīva ievietošana cita masīva sākumā

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

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

Skaitļu masīva ģenerēšana no 0 līdz n

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

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

Objekta destrukturizācija

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 }

Objekta kopijas izveide

ļaujiet personai = {
  vārds: 'John',
  vecums: 25 gadi,
  maku: {
    summa: 500,
    valūta: 'USD
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// vārds: 'John',
// vecums: 25 gadi,
// maku: {
// summa: 500,
// valūta: 'USD
// }
// }

Ņemiet vērā, ka izveidotā objekta kopija ir jauns objekts ar visām sākotnējā objekta īpašībām, bet bez prototipa informācijas.

person.age = 20;

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

Ievērojiet, ka sintakse rada objekta ‘sekla’ kopiju, tāpēc īpašība ‘wallet’ tiks kopēta tikai kā atsauce uz sākotnējo apakšobjektu. Dziļajai klonēšanai atkarībā no objekta sarežģītības varat izmantot JSON stringify/parse pieeju vai Lodash nodrošināto metodi ‘cloneDeep’. Dažos gadījumos šī metode var būt arī noderīga:

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

Nosacīti pievienojot objektiem īpašības

Mēs varam nosacīti pievienot īpašības jaunam objektam, ko radām, izmantojot izplatīšanas operatoru kopā ar īssavienojuma novērtēšanu.

const krāsas = {
  red: '#ff0000',
  zaļa: '#00ff00',
  blue: '#0000ff'
};
const black = {
  black: '#000000'
};

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

console.log(conditionalMerge);
// {
// red: '#ff0000',
// zaļš: '#00ff00',
// zilā krāsā: '#0000ff'
// }

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

console.log(conditionalMerge);
// {
// red: '#ff0000',
// zaļš: '#00ff00',
// zilā krāsā: '#0000ff'
// melns: '#000000'.
// }

Virknes sadalīšana rakstzīmēs

Tas ir līdzīgi kā izsaukt metodi split, kā parametru izmantojot tukšu virkni.

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

Lasīt vairāk:

3 biežāk sastopamie programmatūras produktu izstrādes izaicinājumi jaunuzņēmumiem

Labākais Java projektu veids

Kā nenogalināt projektu ar sliktu kodēšanas praksi?