JavaScript ES 6の新しい特性:構成値、展開文法、残りのパラメータ

ES 6新規特性の値分解、展開文法、残りのパラメータ

構成値

構文化配列

基本動作

交換変数

変数の一部を捨てる

デフォルト値

拡張オブジェクト

基本動作

新しい変数

を宣言します.

デフォルト値

新しい変数+標準値

を宣言します.

関数のデフォルト値

構文展開

関数呼び出し

new新規オブジェクトの場合

字面量配列

字面量オブジェクト

残パラメータ

参考資料

ES6.5.1版以降の次世代JS規格.カバーECMAScript 2015、ECMAScript 2016、ECMAScript 2017そのうち15は正式版です.16,17ただいるだけです15ベースのパッチです.
割り当て値
解配列
基本操作

var arr = [1 , 2];
var [a, b] = arr;
console.info(a, b); // 1 2

変数を交換
jsもついにこの文法を支持しました.

var x = 1, y = 2;
[x, y] = [y, x];
console.info(x, y); // 2 1

変数の一部を捨てる
関数が行列に戻ると、配列から要素を取って値を決める必要があるので、これが便利です.

var [a, , , d] = [1, 2, 3, 4];
console.log(a); // 1
console.log(d); // 4

標準値

//      
var [a, b='B', c='C', d] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
//      
var [a, b='B', c='C', d] = [1, , , 4];
console.log(a); // 1
console.log(b); // B
console.log(c); // C
console.log(d); // 4
// undefined     。 null       ，  null    
var [a, b='B', c='C', d] = [1, undefined, undefined, 4];
console.log(a); // 1
console.log(b); // B
console.log(c); // C
console.log(d); // 4

オブジェクトを解く
基本操作

var obj = {a:1 , b:2};
var {a, b} = obj ;
console.info(a, b); // 1 2

新しい変数を宣言
新しい変数npc 1,npc 2を宣言しました.

var obj = {a: '    ' , b: '    '};
var {a: npc1, b: npc2} = obj ; //   obj.a      npc1，   obj.b      npc2
console.info(npc1, npc2); //          

標準値
配列と同じです

var {npc1 = '    ' , npc2 = '    '} = {npc2: '   '};
console.log(npc1); //     
console.log(npc2); //    

新しい変数+標準値を宣言します.
上の二つの機能の組み合わせです.

var {npc1:a = '    ' , npc2:b = '    '} = {npc2: '   '};
console.log(a); //     
console.log(b); //    

関数の標準値

function foo({npc = '    ', npcLoc = { x: 9527, y: 2046 }, hp = 10000} = {}){
  console.log(npc, npcLoc, hp);
}
foo(); //      {x: 9527, y: 2046} 10000
foo({npc:'    ', npcLoc:{ x: 0, y: 0}}); //      {x: 0, y: 0} 10000

文法を展開
関数の呼び出し

//           
function foo(a,b,c){
	console.info('     : ' + a);
	console.info('     : ' + b);
	console.info('     : ' + c);
}
//            
var arr = ['666','999','9527'];
//          
foo.apply(null, arr);
//          
foo(...arr);

new新規オブジェクトの場合
明らかにapplyはいいですが、newの新しい相手の時にはあまり使いませんでした.展開文法があったら、この気まずい結果になります.

配列デ重量

var result = [...new Set([1,1,2,2,3,3,4,4])];
console.info(result);// [1, 2, 3, 4]
//     
var arr = [1,1,2,2,3,3,4,4];
var myset = new Set(arr);//                     
var result = [...myset];
console.info(result);// [1, 2, 3, 4]

時間オブジェクトの作成

new Date(...[2019,10,05]);
new Date(..."2019-10-05".split("-"));
new Date("2019-10-05");

文字列数配列
注意すべきはこの展開は浅い複製(1つの層だけを巡回)であり、入れ子が多い場合は注意しなければなりません.元のオブジェクトに意図的に変更されます.

//       
var a = [1,2,3], b = [4,5,6];
var arr = [...a, ...b];
console.info(arr);// [1, 2, 3, 4, 5, 6]
//         
var arr = [...a, ...b, ...a];
console.info(arr);// [1, 2, 3, 4, 5, 6, 1, 2, 3]

文字どおり対象を量る
配列または関数パラメータに展開文法を使用すると、このシンタックスは反復可能なオブジェクトにのみ使用できます.下の例はjQueryの$extedに似ています.

var obj1 = { 'year': '2019', 'month': '10' };
var obj2 = { 'year': '2020', 'day': '05' };
var obj3 = {...obj1, ...obj2};
// year    ，         。 month   day     ，      。
console.info(obj3);// {year: "2020", month: "10", day: "05"}
//       ，        。
obj3.year = "2046";
obj3.month = "12";
obj3.day = '31';
console.info(obj3);// {year: "2046", month: "12", day: "31"}
console.info(obj1);// {year: "2019", month: "10"}
console.info(obj2);// {year: "2020", day: "05"}

残りのパラメータ
残りのパラメータは 配列にラッピングされています.これはargmentsに対して言います.

//           
function foo(a,b,c,...arr){
	console.info('     : ' + a);
	console.info('     : ' + b);
	console.info('     : ' + c);
	console.info('             ' + Array.isArray(arr) + ': ' + arr);
}
foo(1,2,3,4,5,6,7,8,9);
/*
     : 1
     : 2
     : 3
             true: 4,5,6,7,8,9
*/

参考資料
解構賦課値Destructuring_assignment展開文法Spread syntax残パラメータReset_parameters