ES6スプレッド演算子の使用例

スプレッド演算子とレスト演算子とは何ですか?

ES6 では、スプレッド演算子とレスト演算子は両方とも (...) で表されます。スプレッドは展開演算子であり、レストは残りの (コレクション) 演算子です。この演算子をさまざまな場所で使用すると、読み取りと書き込みの観点から考慮できるさまざまな効果が得られます。書き込み操作には収集機能があり、読み取り操作には拡張機能があります。 ES6 では、(...) 演算子は配列に対してのみ機能しましたが、ES7 ではオブジェクトに対する拡張機能が追加されました。

配列スプレッド演算子

残り演算子（コレクション関数）

(...) 演算子を使用しない場合は、合計関数が実装されます。渡されるパラメータは不確定であり、引数のみを使用できます。例えば：

関数sum(){
	sumNumber=0 とします。
    for(let i=0;i<arguments.length;i++){
        合計数 += 引数[i];
    }
    sumNumber を返します。
}
コンソール.log(合計(1,2,3)); //6
コンソール.log(合計(4,5,6,7,8)); //30

REST 演算子を使用すると、コードははるかにシンプルになります。

関数 sum(...arg){
	sumNumber=0 とします。
   	arg.forEach(関数(ele){
        合計数+=要素;
    })
    sumNumber を返します。
}
コンソール.log(合計(1,2,3)); //6
コンソール.log(合計(4,5,6,7,8)); //30

このとき、渡されたパラメータは arg に書き込まれ、配列を形成します。 arg を印刷できます:

関数 sum(...arg){
    console.log(引数);
}
console.log(sum(1,2,3)); // (3) [1, 2, 3]
console.log(sum(4,5,6,7,8)); //(5) [4, 5, 6, 7, 8]

渡すパラメータに渡す必要がある項目がある場合は、パラメータの最後の位置で rest 演算子を使用できます。

関数テスト(a, b, ...arg) {
	console.log(a,b,arg);
}
テスト(1,2,3,4,5,6,7,8); //1 2 (6) [3, 4, 5, 6, 7, 8]

出力された a と b が実際のパラメータの最初の 2 つの項目であり、後で渡されるパラメータが配列に変換されて arg に格納されていることがわかります。

スプレッド演算子

arr = [1,2,3,4,5]とします。
console.log(arr); //(5) [1, 2, 3, 4, 5]
コンソール.log(...arr); // 1 2 3 4 5

ご覧のとおり、(...) 演算子を使用すると、配列が拡張されて出力されます。

配列を結合する場合、従来のアプローチは次のようになります。

arr1=[1,2,3]とします。
arr2=[5,6,7,8]とします。
let arr3=[].arr3.concat(arr1,arr2); //let arr3=new Array();arr3.concat(arr1,arr2); と同等
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

(...) 演算子の使用方法:

arr1=[1,2,3]とします。
arr2=[5,6,7,8]とします。
arr3=[...arr1,...arr2]とします。
console.log(arr3); //(7) [1, 2, 3, 5, 6, 7, 8]

どのように実装されているか見てみましょう。babel を使用して ES6 構文を ES5 に変換できます。

「厳密な使用」;

var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);

その実装原理も配列のconcatメソッドであることがわかります。したがって、(...) 演算子は構文上の糖衣であり、元の機能には影響しません。

オブジェクトスプレッド演算子

浅いクローン

ES7 では、(...) 演算子はオブジェクトの拡張をサポートします。

学校にしましょう={	
    名前:'xxx大学',
    履歴:'50'
};
先生に={
    リーダー：{
        名前:'校長xx',
        年齢:'40',
    },
    人数:60
};

上記のオブジェクトを別のオブジェクトに複製する場合、従来のアプローチでは、クローン関数を自分で記述するか、jQuery の extend メソッドを使用します。ここで、(...) 演算子を使用して完了する必要があります。

obj = {
    ...学校、
    ...教師
}
console.log(obj); /* オブジェクト
					履歴: "50"
					リーダー: {名前: "校長 xx", 年齢: "40"}
					名前:「xxx大学」
					人数: 60
					__proto__: オブジェクト*/

ご覧のとおり、クローン作成は (...) 演算子を使用して簡単に実行できますが、このクローン作成は浅いクローン作成です。例えば：

obj.leader.name="xxx";
console.log(obj); /*履歴: "50"
					リーダー: {名前: "xxx", 年齢: "40"}
					名前:「xxx大学」
					人数: 60
					__proto__: オブジェクト */
console.log(教師); /*リーダー: {名前: "xxx", 年齢: "40"}
						人数: 60
						__proto__: オブジェクト */

ES6 には浅いクローンメソッドもあります: Object.assign({ },obj1,obj2,...)

後者のオブジェクトを最初のオブジェクトに複製します。

学校にしましょう={	
    名前:'xxx大学',
    履歴:'50'
};
先生に={
    リーダー：{
        名前:'校長xx',
        年齢:'40',
    },
    人数:60
};
obj={} とします。
オブジェクトに代入します。
console.log(obj); /*履歴: "50"
					リーダー: {名前: "校長 xx", 年齢: "40"}
					名前:「xxx大学」
					人数: 60
					__proto__: オブジェクト*/

クローンも完了していることがわかります。

ディープクローン

obj 内のリーダーの名前の値を変更すると、元の teacher オブジェクト内の対応する値も変更されます。ディープクローニングを実現したい場合は、上記のコードを次のように変更します。

学校にしましょう={	
    名前:'xxx大学',
    履歴:'50'
};
リーダー={
     名前:'校長xx',
       年齢:'40',
}
先生に={
    リーダー：{
        ...リーダー
    }
    人数:60
};
obj = {
    ...学校、
    ...教師、
    リーダー：{
        ...リーダー
    }
}

console.log(obj); /*履歴: "50"
					リーダー: {名前: "校長 xx", 年齢: "40"}
					名前:「xxx大学」
            		人数: 60
					__proto__: オブジェクト*/

obj.leader.name="xxx";

cosnole.log(obj); /*履歴: "50"
					リーダー: {名前: "xxx", 年齢: "40"}
					名前:「xxx大学」
					人数: 60
					__proto__: オブジェクト*/
console.log(リーダー);. /* 年齢: "40"
						名前: 「校長xx」
						__proto__: オブジェクト*/
console.log(teacher); /*リーダー: {name: "校長xx", age: "40"}
						人数: 60
						__proto__: オブジェクト*/

ご覧のとおり、obj 内のリーダーの名前の値を変更しましたが、obj オブジェクトのみが変更され、teacher オブジェクトと leader オブジェクトは変更されていません。
参照値の層が多い場合、この方法はお勧めできません。ディープクローニングメソッドを自分で記述することもできます。もちろん、もっと型破りな方法もあります。 JSON を使用すると、複製するオブジェクトを最初に文字列に変換し、次にそれをオブジェクトに変換することで、新しいオブジェクトが元のオブジェクトと関係がないようにすることができます。

先生に={
    リーダー：{
        名前:'校長xx',
       	年齢:'40',
    }
    人数:60
};
obj = JSON.parse(JSON.stringify(教師)) とします。
console.log(obj); /*リーダー: {名前: "プリンシパルxx", 年齢: "40"}
					人数: 60
					__proto__: オブジェクト*/

obj.leader.name="xxx";

console.log(obj.leader.name); //"xxx"
console.log(teacher.leader.name); //"校長 xx"

ただし、このメソッドで関数 (function())、正規表現 (reg)、特殊オブジェクト (new Data()) を含むオブジェクトを複製すると、上記のプロパティは失われます。上記のプロパティがない場合は、この方法を使用できます。