スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (関数呼び出しの場合)、複数の要素 (配列リテラルの場合)、または複数の変数 (分割代入の場合) がある場合に使用できます。

obj1 = {
 値1: 1,
 値2: 2
};
obj2 = {...obj1}とする
};
console.log(obj2); // {値1: 1、値2: 2}

上記の用法は実際には

obj2 = {値1: 1、値2: 2}

スプレッド演算子の記述とobj2 = obj1の直接代入の記述の違いは、値が直接代入される場合、引用類型の場合、 obj1のメモリ空間アドレスを代入するだけと同じになる点です。 obj2変更されると、 obj1もそれに応じて変更されます。展開運算符を使用すると、 obj1オブジェクト内の属性タイプはすべて基本類型なので、オブジェクトを再作成することと同等になります。このとき、 obj2が変更されても、 obj1オブジェクトには影響しません。ただし、これはすべてのプロパティが基本型である場合（つまり、ディープコピーが 1 レベルのみ実行される場合）にのみ制限されます。オブジェクト内のプロパティが参照型の場合、プロパティ内の参照型の値が変更されると、両方のオブジェクトのプロパティ値が変更されます。

obj1 = {
 属性1: [3, 6, 0],
 属性2: 4,
 属性4: 5
};
obj2 = {...obj1}とします
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

コンソールにログ出力します。
コンソールにログ出力します。

スプレッド演算子の応用

1. 関数内でスプレッド演算子を使用する

関数テスト(a, b, c){};

arr = [1, 2, 3]とします。
テスト(...arr);

2. 配列リテラルでのスプレッド演算子の使用

arr1 = [1, 2]とします。
arr2 = [...arr1, 3, 4] とします。 // [1, 2, 3, 4]

// プッシュメソッドを使用する let arr1 = [1, 2];
arr2 = [3. 4]とします。
arr1.push(...arr2); // [1, 2, 3, 4]

3. 分解代入に使用されます。展開演算子は分解代入の最後にのみ使用できます。それ以外の場合はエラーが報告されます。

// スプレッド演算子は、分割代入の最後にのみ使用できます。
[a, b, ...c] = [1, ,2, 3, 4]とします。
console.log(a, b, c) // 1, 2, [3, 4]

4. クラス配列は配列になる

oLis = document.getElementsByTagName("li"); とします。
liArr = [...oLis] とします。

5. オブジェクト内でスプレッド演算子を使用する
ES7 のオブジェクトスプレッド演算子を使用すると、オブジェクトをより迅速に操作できます。

{x,y,...z}={x:1,y:2,a:3,b:4}とします。
// 1 です
y; // 2
z; // {a:3,b:4}

オブジェクトを別のオブジェクトに挿入します。

z={a:3,b:4}とします。
n={x:1,y:2,...z}とします。
console.log(n); //{x:1,y:2,a:3,b:4}

2 つのオブジェクトを結合します。

a={x:1,y:2}とします。
b={z:3} とします。
ab={...a,...b}とします。
console.log(ab); // {x:1,y:2,z:3}

JavaScript のスプレッド演算子とその応用例コードに関するこの記事はこれで終わりです。より関連性の高い js スプレッド演算子コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: