3つの便利な点 - JavaScriptの休息とスプレッド

休養パラメータ

rest構文では、不定数の引数を配列として表現することができる。渡されたすべての引数を加算する関数を見てみよう。

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

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

スプレッド構文

spread演算子を使うと、反復可能なオブジェクトを個々の要素に展開することができる。この機能は、restパラメータで実現した機能とは正反対である。配列、オブジェクト、セット、マップなど、すべてのイテレート可能なオブジェクトに適用できます。

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

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

実際の使用例における3つの点

配列のコピー

spread構文は、配列をコピーする際に、事実上1レベル深くなる。1レベルとは、最初のレベルの参照がコピーされることを意味する。

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

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

ユニークな要素の配列を作る

一意な要素のみを格納するSetを作成し、配列に戻す。

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

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

配列の連結

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

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

配列のスライス

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

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

を取り除くこともできる。 n をコンマで区切ってください。

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

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

配列を別の配列の先頭に挿入する

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

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

から0までの数字の配列を生成する n

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

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

オブジェクトの再構築

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

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

オブジェクトのコピーの作成

let person = {（人
  名前： 'John'、
  年齢: 25、
  財布{
    合計: 500、
    通貨: 'USD'
  }
};
let personCopy = { ...person }；

console.log(personCopy)；
// {
// 名前： 'John'、
// 年齢：25歳、
// 財布{
// 合計: 500、
// 通貨: 'USD'
// }
// }

作成されるオブジェクトのコピーは、元のオブジェクトのすべてのプロパティを持つが、プロトタイプ情報は持たない新しいオブジェクトであることに注意。

person.age = 20；

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

スプレッド構文はオブジェクトの「浅い」コピーを作成するため、「wallet」プロパティは元のサブオブジェクトへの参照としてのみコピーされることに注意してください。ディープクローニングには、オブジェクトの複雑さに応じて、JSONの文字列化/パースアプローチやLodashが提供する'cloneDeep'メソッドを使用することができます。場合によっては、この方法も役に立ちます：

personCopy = { ...person, wallet = {...person.wallet}}； 

オブジェクトに条件付きでプロパティを追加する

短絡評価とともにスプレッド演算子を利用することで、作成中の新しいオブジェクトに条件付きでプロパティを追加することができる。

const色= {。
  red：'#ff0000'、
  green: '#00ff00'、
  blue：'#0000ff'
};
const black = { {.
  黒: '#000000'
};

let extraBlack = false；
let conditionalMerge = { ...
  ...色
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge)；
// {
// 赤：'#ff0000'、
// 緑: '#00ff00'、
// 青：'#0000ff'
// }

extraBlack = true；
conditionalMerge = { ...
  ...色
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge)；
// {
// 赤：'#ff0000'、
// 緑: '#00ff00'、
// 青：'#0000ff'
// 黒: '#000000'
// }

文字列を文字に分割する

これは、パラメータに空文字列を指定してsplitメソッドを呼び出すのと似ている。

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

続きを読む

新興企業のソフトウェア製品開発に共通する3つの課題

Javaに最適なプロジェクトの種類

悪いコーディング・プラクティスでプロジェクトを潰さないためには？