ECMAScript 6学習ノート(一):演算子展開

6542 ワード

JavaScriptはECMAScriptの実現と拡張であり、ES 6標準の制定もJavaScriptに多くの新しい特性を加えています.ここでは主に展開演算子を記録します.
演算子を展開すると、表現はどこで展開されますか?展開演算子は、複数のパラメータ(関数呼び出し用)または複数の要素(配列の字面量用)または複数の変数(構文解析用)の場所で使用できます.
拡張演算子はオブジェクトには使用できません.現在展開されている演算子は、巡回可能なオブジェクトでのみ使用できます.iterablesの実装は[Symbol.iterator]関数に依存していますが、現在はAray,Set,Stringは[Symbol.iterator]メソッドを内蔵しています.Objectはまだこの方法を内蔵していないので、展開演算子は使えません.しかし、ES 7草案には、オブジェクト展開演算子の特性が盛り込まれています.
関数コールで展開演算子を使用します.
以前には、一つの配列を複数のパラメータに展開するために、appy法を使用します.
function test(a, b, c) { }
var args = [0, 1, 2];
test.apply(null, args);
このように、私たちはargs配列を実際の参としてa、b、cに渡しました.こちらはFuntions.prototype.appyの特性を利用しています.
しかし、ES 6があれば、配列パラメータをより簡潔に伝えることができます.
function test(a,b,c) { }
var args = [0,1,2];
test(...args);
私たちは…を使って演算子を展開すると、argsを直接test()関数に渡すことができます.
配列の文字数に展開演算子を使用します.
'ES 6の世界では、直接行列を追加して別の配列に結合できます.
var arr1=['a','b','c'];
var arr2=[...arr1,'d','e']; //['a','b','c','d','e']
展開演算子は、push関数でも使用できます.2つの配列をappy()関数で結合する必要はありません.
var arr1=['a','b','c'];
var arr2=['d','e'];
arr1.push(...arr2); //['a','b','c','d','e']
を選択します
この展開演算子は、ES 6の特性の一つでもある.
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']
展開演算子の構造形成値における役割は、以前の作用とは反対に見えるが、複数の配列項目を新たな配列に組み合わせたものである.
ただし、演算子を展開するときは、演算子は最後にのみ使用できます.
let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //  
クラスの配列オブジェクトが行列になります.
展開演算子は、1つのクラスの配列オブジェクトを本物の配列オブジェクトに変えることができます.
var list=document.getElementsByTagName('div');
var arr=[..list];
リストはクラスの配列オブジェクトですが、展開演算子を使って配列に変えました.
ES 7草案のオブジェクト展開演算子
ES 7のオブジェクト展開演算子は、オブジェクトをより速く操作することができます.
let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}
以上のように、オブジェクトの一部を、展開演算子のパラメータに新しいオブジェクトに割り当てられます.
また、配列挿入のように別のオブジェクトにオブジェクトを挿入することもできます.
let z={a:3,b:4};
let n={x:1,y:2,...z};
n; //{x:1,y:2,a:3,b:4}
他にも多くの用途があります.例えば、2つのオブジェクトを統合することができます.
let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab //{x:1,y:2,z:3}