JavaScriptのスプレッドとレスト演算子

これらのつのドットは、実行されているタスクに応じて、スプレッドまたはレスト演算子と呼ばれます.

拡がり演算子
簡単に言えば、配列を個々の値に変換します.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers);  // output: [1, 2, 3, 4, 5]

//with spread operator
console.log(...numbers); // output: 1, 2, 3, 4, 5

文字列を個々の文字またはオブジェクトに個別のキー値ペアに変換するためにも使用できます.

関数呼び出し

Math.max(5, 6, 7);       //result: 7

const nums = [1, 2, 3];
Math.max(nums);         //result: NaN
Math.max(...nums);      //result: 3

こちらです.Math.max 関数は最大値を返す.配列内の値を渡す必要がある場合、引数として配列を期待していないため、直接渡すことはできません.それで、我々は、広げられたオペレーターを使ってそれを通過しなければなりません...nums .

配列を連結する

const numbers1 = [0, 1, 2];
const numbers2 = [3, 4, 6];

const allNumbers = [...numbers1, ...numbers2];
console.log(allNumbers);   //output: [0, 1, 2, 3, 4, 6]

スプレッド演算子は配列の連結を簡単にします.

配列に要素を追加する

const moreNumbers = [9, ...numbers1, 11, ...[5]];
console.log(moreNumbers);  //output: [9, 0, 1, 2, 11, 5]

pushメソッドのような既存の配列を変更しないので、配列内の要素をプッシュするより良い方法です.

既存の配列を変更せずに、配列の先頭に要素を追加します.

配列とオブジェクトのコピー
JavaScriptでは、配列とオブジェクトは参照渡しされます.したがって、配列またはオブジェクトとして定義された変数が別の変数に割り当てられるたびに.そして、これらの変数の両方が同じ配列またはオブジェクトを指します.つまり、1つの配列が変更された場合、両方の配列が変更されます.

let letters = ["a", "b", "c"];

let abc = letters;

abc[0] = "z";

console.log(letters);  //output: ["z", "b", "c"]
console.log(abc);      //output: ["z", "b", "c"]

上の例ではletters 配列が定義され、abc 配列.だから、abc 配列変更letters arrayも変更されます.

let letters = ["a", "b", "c"];

let abc = ...letters;

abc[0] = "z";

console.log(letters);  //output: ["a", "b", "c"]
console.log(abc);      //output: ["z", "b", "c"]

配列のコピーを作成するには、スプレッド演算子を使いやすくなります.使用let abc = ...letters 同じ配列の参照を渡す代わりに配列のコピーを作成します.JavaScriptのオブジェクトも同様です.

オブジェクトのマージ

const obj1 = {
  red: "apple",
  green: "grapes",
};

const obj2 = {
  yellow: "banana",
};

const fruits = { ...obj1, ...obj2 };
console.log(fruits);
//output:{ red: 'apple', green: 'grapes', yellow: 'banana' }

配列を連結するように、スプレッド演算子を使用してオブジェクトをマージできます.

休息演算子
残りの演算子は関数の定義中に使用されます.それは拡散の正反対です.関数の引数として渡された値を配列に変換します.これはarguments JavaScriptのオブジェクト.メソッドのようなforEach() , reduce() , map() 動作しないarguments オブジェクト.

function add(...args) {
  let sum = 0;

  args.forEach(value => {
    sum += value;
  });

  return sum;
}

console.log(add(2, 3, 4, 5, 6)); //output: 20

上の例では、add関数を呼び出している間に渡された引数は、add関数を定義している間に使用されるREST演算子のために配列に変換されます.それから、我々はargs 配列を計算し、和を計算します.

function print(first, second, ...rest) {
  console.log(first);
  console.log(second);
  console.log(rest);
}

print("q", "w", "e", "r", "t", "y");

出力:

上の例では、残りの演算子を使用する別の方法です'q' and 'w' が変数first and second それぞれ.を返します.rest .

不正使用

function doSomething(first, ...middle, last) {
  // do something
}

私が最初に残りの演算子について学んだとき、私は誤ってそれを使用して、エラーを理解することができませんでした.上記のコードサンプルは初心者の多くが作る間違いです.残りのパラメータは関数定義の最後でなければなりません.
読書ありがとう.