Kolme hyödyllistä pistettä - loput ja leviäminen JavaScript:ssä.

Lepoparametrit

Lepo-syntaksin avulla voimme esittää määrittelemättömän määrän argumentteja joukkona. Katso funktiota, joka laskee yhteen kaikki välitetyt argumentit.

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

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

Levitä syntaksi

Spread-operaattorin avulla voimme laajentaa iteroitavia objekteja yksittäisiin elementteihin. Tämä toiminnallisuus on päinvastainen kuin mitä saavutimme loput parametrit. Sitä voidaan soveltaa kaikkiin iteroitaviin, kuten matriiseihin, objekteihin, joukkoihin, karttoihin jne.

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

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

Kolme pistettä todellisissa käyttötapauksissa

Joukon kopiointi

Levityssyntaksi menee tehokkaasti yhtä tasoa syvemmälle kopioidessasi joukkoa. Yksi taso tarkoittaa, että viitteiden ensimmäinen taso kopioidaan.

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

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

Yksilöllisten elementtien joukon luominen

Luo joukko, johon tallennetaan vain yksilöllisiä elementtejä, ja muunna se takaisin joukoksi.

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

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

Määrien ketjuttaminen

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

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

Joukon viipalointi

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

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

Voimme myös poistaa n ensimmäiset elementit pilkulla.

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

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

Joukon lisääminen toisen joukon alkuun

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

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

Lukujoukon luominen numeroista 0 - n

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

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

Objektin rakenneuudistus

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 }

Objektin kopion luominen

let person = {
  nimi: 'John',
  ikä: 25,
  lompakko: {
    sum: 500,
    valuutta: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// nimi: 'John',
// ikä: 25,
// lompakko: {
// summa: 500,
// valuutta: 'USD'
// }
// }

Huomaa, että luodun objektin kopio on uusi objekti, jolla on kaikki alkuperäisen objektin ominaisuudet mutta ei mitään sen prototyyppitietoja.

person.age = 20;

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

Huomaa, että levityssyntaksi luo 'matalan' kopion objektista, joten 'lompakko'-ominaisuus kopioidaan vain viittauksena alkuperäiseen aliobjektiin. Syväkloonaukseen voit käyttää JSON stringify/parse -lähestymistapaa tai Lodashin tarjoamaa 'cloneDeep'-menetelmää riippuen objektin monimutkaisuudesta. Joissakin tapauksissa tämäkin menetelmä voi olla hyödyllinen:

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

Ominaisuuksien ehdollinen lisääminen objekteihin

Voimme lisätä ehdollisesti ominaisuuksia uuteen luotavaan objektiin käyttämällä spread-operaattoria yhdessä oikosulun arvioinnin kanssa.

const colors = {
  red: #ff0000',
  vihreä: '#00ff00',
  blue: '#0000ff'
};
const black = {
  musta: '#000000'.
};

let extraBlack = false;
let conditionalMerge = {
  ...värit,
  ...(extraBlack ? musta : {})
};

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

extraBlack = true;
conditionalMerge = {
  ...värit,
  ...(extraBlack ? musta : {})
};

console.log(conditionalMerge);
// {
// red: #ff0000',
// vihreä: '#00ff00',
// blue: '#0000ff'
// musta: '#000000'.
// }

Merkkijonon jakaminen merkkeihin

Tämä on samanlaista kuin split-metodin kutsuminen tyhjän merkkijonon parametrina.

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

Lue lisää:

3 yleistä haastetta startup-yritysten ohjelmistotuotekehityksessä

Parhaat projektityypit Javalle

Miten projektia ei saa tappaa huonoilla koodauskäytännöillä?