Tři užitečné body - zbytek a rozpětí v JavaScript

Parametry odpočinku

Ostatní syntaxe umožňuje nás reprezentovat neurčitý počet argumentů jako pole. Podívejte se na funkci, která sečte všechny předané argumenty.

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

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

Syntaxe rozptylu

Operátor spread nám umožňuje rozbalit iterovatelné objekty na jednotlivé prvky. Tato funkce je opačná než ta, které jsme dosáhli pomocí ostatních parametrů. Lze jej použít na všechny iterovatelné objekty, jako jsou pole, objekty, množiny, mapy atd.

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

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

Tři tečky v reálných případech použití

Kopírování pole

Syntaxe spread jde při kopírování pole efektivně o úroveň hlouběji. Jedna úroveň znamená, že se kopíruje první úroveň referencí.

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

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

Vytvoření pole jedinečných prvků

Vytvořte množinu, která uchovává pouze jedinečné prvky, a převeďte ji zpět na pole.

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

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

Spojování polí

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

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

Krájení pole

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

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

Můžeme také odstranit n první prvky s čárkou.

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

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

Vložení pole na začátek jiného pole

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

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

Generování pole čísel od 0 do n

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

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

Destrukturování objektu

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 }

Vytvoření kopie objektu

let person = {
  jméno: 'John',
  věk: 25 let,
  peněženka: {
    suma: 500,
    měna: "USD
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// jméno: 'John',
// věk: 25 let,
// peněženka: {
// suma: 500,
// měna: "USD
// }
// }

Všimněte si, že vytvořená kopie objektu je nový objekt se všemi vlastnostmi původního objektu, ale bez jeho prototypových informací.

person.age = 20;

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

Všimněte si, že syntaxe šíření vytváří "mělkou" kopii objektu, takže vlastnost "peněženka" bude zkopírována pouze jako odkaz na původní podobjekt. Pro hloubkové klonování můžete použít přístup JSON stringify/parse nebo metodu 'cloneDeep' poskytovanou Lodash v závislosti na složitosti objektu. V některých případech může být užitečná i tato metoda:

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

Podmíněné přidávání vlastností k objektům

K novému vytvářenému objektu můžeme podmíněně přidávat vlastnosti pomocí operátoru spread spolu s vyhodnocením zkratky.

const colors = {
  red: '#ff0000',
  zelená: '#00ff00',
  modrá: '#0000ff'
};
const black = {
  black: '#000000'
};

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

console.log(conditionalMerge);
// {
// červená: '#ff0000',
// zelená: '#00ff00',
// modrá: '#0000ff'
// }

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

console.log(conditionalMerge);
// {
// červená: '#ff0000',
// zelená: '#00ff00',
// modrá: '#0000ff'
// černá: "#000000".
// }

Rozdělení řetězce na znaky

Je to podobné jako volání metody split s prázdným řetězcem jako parametrem.

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

Přečtěte si více:

3 nejčastější problémy začínajících firem při vývoji softwarových produktů

Nejlepší typy projektů pro Javu

Jak nezničit projekt špatnými kódovacími postupy?