ECMAScript 6th の構文をまとめてみた

ECMAScript

ECMAScript 6thのドラフト版が挙げられている。現在はSeptember 23, 2011のドラフトが最新で、このドラフトの構文部分のみを抜粋してHTML化してみた。

よろしければ、どうぞ。

構文上で、5thとの大きな違いは、

  • let, constによる変数、定数宣言の導入
  • AssignmentPatternやBindingPattern辺りが導入されている
  • ...が導入されている

辺りでしょうか。

BindingPattern

これは何かっていうと、オブジェクトや配列(Array)の中身の要素を直に変数に入れられるようになる。BindingPatternにはObjectBindingPatternとArrayBindingPatternの二つがある。

所謂分割代入である。
どんなやつかは実例で示したほうが分かり易いと思う。どちらもFirefox 7では導入されている。

ObjectBindingPattern
var obj = {
  a: "foo",
  b: "bar",
  c: "hoge"
};
var { a, b } = obj; // ←ここが ObjectBindingPatternで変数に代入
alert(a); // "foo"
alert(b); // "bar"

var { a: val1, b: val2, c: val3 } = obj; // 別名変数にすることも可能
alert(val1); // "foo" obj.a となるものが val1 に入る
alert(val2); // "bar" obj.b (ry
alert(val3); // "hoge" obj.c (ry

var o = { a: { b: "foo" }, c: "bar" };
var { a: { b: val4 } } = o; // オブジェクトの中のさらに中も
alert(val4); // "foo"
ArrayBindingPattern
var arr = [ "foo", "bar", "hoge" ];
var [ a, b, c ] = arr;
alert(a); // "foo"
alert(b); // "bar"
alert(c); // "hoge"

...変数名

これはまだFirefoxにも導入されていないので、実装は存在しないかもだが。
配列等(おそらくlengthプロパティを持ち、数値で各要素にアクセスできればOK)で、残りの要素を配列にして得ることができる、というやつ。関数なんかの引数受け取りに使用するとなかなか効力がありそうな構文である。

var arr = [ "foo", "bar", "hoge" ];
var [ a, ...b ] = arr;

alert(a); // "foo"
alert(b); // "bar,hoge" (["bar", "hoge"])

function piyo (a, ...b) {
  alert(a); // "foo"
  alert(b); // "bar,hoge" (["bar","hoge"])
}
piyo("foo", "bar", "hoge");

現状ではこんな感じですかね〜。