ECMAScript 6の新しい構文をつかってみる#2

ECMAScript 6の新機能を使ってみよう その２

この記事ではES6の構文を一部使ってみました。 引き続き新しい構文を使ってみます。

動作環境

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.9.4
• Node : v0.10.33

ここの記事に従いtraceur-compilerをインストールしておいてください。

ECMAScript 6の新機能をためしてみる

※traceurが実験的にサポートしてるものも含む

Destructuring Assignment

分配束縛の機能です。オブジェクトや配列に設定した値を使いやすくする機能です。 変数の値を入れ替えたり、プロパティの値を変数に分配したりするのが簡単にできます。

var a = "hello";
var b = "world";
//値の入れ替え
var [a, b] = [b, a];
console.log(a);
console.log(b);

var pt = {x: 10, y: 20};
//プロパティの値を各変数へ設定
var {x,y} = pt;
console.log(x);
console.log(y);

実行結果は次のとおり。

%traceur --experimental es6.js
world
hello
10
20

Generator Comprehension

Generator関数を、for-ofを使って配列を処理することができます。 for文の中で演算やif文でのフィルタも可能です。

var list = [1, 2, 3, 4];
var res = (for (x of list) x);

for (var x of res) {
  console.log(x );
}

Numeric Literals

頭に0bをつけることで２進数、頭に0oをつけることで８進数を直接記述できるようになってます。

//2進数で3
console.log(0b11);
//8進数で9
console.log(0o11);

Property Method Assignment

オブジェクト内の関数を簡略化して記述できるようになりました。

var obj = {
  name: "taro",
  // greet: function() {}〜と書かなくてもOK
  greet() {
    return "hello," + this.name;
  }
};
console.log(obj.greet());

Object Initializer Shorthand

オブジェクトの初期化も簡略化できるようになってます。 オブジェクト作成時にプロパティ名を指定しなければ、変数名がそのままプロパティ名になります。

var x = 10;
var y = 20;

var obj = {x,y};
console.log(obj);//{ x: 10, y: 20 }

Rest Parameters

ES6では可変長配列が扱えるようになりました。 ...を使って関数の引数に指定したり、配列を個々の要素として展開したりできます。

//可変長配列
function addChars(charArray, ...chars) {
  charArray.push(...chars);
}
var charList = ['a', 'b', 'c'];

addChars(charList, 'd', 'e', 'f');
console.log(charList);//[ 'a', 'b', 'c', 'd', 'e', 'f' ]

/////////////////////////////////////

function say(name,greet) {
  console.log(name + "," + greet); //taro,hello
}
//また、可変長配列を展開して渡すことも可能
var array = ["taro","hello"];
say(...array);

Template Literals

「`」（バッククオート）で文字列を囲うことで、文字列で変数を使用できます。 複数行の文字列を記述できたり、変数の計算も可能になってます。

//変数を使用
var name = 'world';
var message = `hello ${name}`;
console.log(message);

//複数行の文字列も記述可能
var multi = `foo,
bar,
buz`;
console.log(multi);

//変数の計算も可能
var total = 100;
console.log(`The total is ${total} (${total*1.08} with tax)`);

ES6の新構文第２弾でした。新しい構文はまだまだあるので、続きはまた次回。