新規投稿
フォローする

ES6機能紹介: スプレッド演算子・残余引数・分割代入

このナレッジノートでは、kintoneのカスタマイズ開発に役立つモダンなJavaScript仕様ECMAScript 6の機能に一部について解説します。

スプレッド演算子

スプレッド演算子を用いると、配列などのiterableなオブジェクト(ex. NodeListNamedNodeMapCSSRuleList, etc...)を展開して関数の引数に用いることが出来ます。

例えば

var average = (a, b, c) => (a + b + c) / 3;

var arr = [1, 2, 3];

console.log(average(...arr)); // output: 2

のようなことが出来ます。

残余引数

残余引数を用いると、関数に渡された引数の一部を配列として受け取れます。

var f = (a, b, ...args) => {
  /* statement */
};

の様な関数ff(0, 1, 2, 3, 4, 5, 6, 7)のように実行してみましょう。
このときaには0bには1、そしてargsには残りの[2, 3, 4, 5, 6, 7]が代入されます。

先程の説明で挙げたaverageもこの機能を使うことで

var average = (...args) => args.reduce((a, b) => a + b, 0) / args.length;

上記のような汎用的な形に出来ます。

分割代入

既に定義されている変数に対して以下のように代入文を書くことで各変数に配列などのiterableなオブジェクトから分割して代入することが出来ます。

var arr = [1, 2];
[a, b] = arr; // a = 1, b = 2

また、このとき配列長が代入先に列挙した変数の数よりも小さい場合、はみ出た値は無視されます。
逆に、列挙した変数の数に満たない場合は、不足している部分に対応する変数はundefinedとなります。
更に、変数名を入れずにカンマで区切った場合、その部分の値は無視されます。

オブジェクトを右辺にとった分割代入も可能です。

var obj = {a: 1, b: 2};
{a, b} = obj;

上記のように、変数の名称とオブジェクトのメンバー名が一致している場合に対応する値を代入できます。

また、配列の場合もオブジェクトの場合も

[a = 4, b = 3] = arr;
{a = 2, b = 3} = obj;

のようにして、配列やオブジェクトに対応する値が定義されていない場合に入る初期値を定義できます。

実用的な例として、正規表現のマッチを用いて日付の文字列をそのまま変数に代入する例を以下に示します。

let [, yyyy, mm, dd] = /(\d{4})\-(\d{2})\-(\d{2})/.exec("2001-09-11"); // execの返り値は["2001-09-01", "2001", "09", "11"]になっている
console.log(yyyy, mm, dd); // "2001", "09", "11"
4

0件のコメント

サインインしてコメントを残してください。