読者です 読者をやめる 読者になる 読者になる

KMC活動ブログ

京大マイコンクラブの活動の様子を紹介します!!

ECMAScript6勉強会 第1回・第2回

こんにちわ。 KMC3回生の id:tyage です。

6/2にECMAScript6勉強会の第1回を、6/9に第2回を行いました。

ECMAScript 6 compatibility table を参考に、新しい構文や関数をピックアップして ECMAScript Language Specification ECMA-262 6th Edition - DRAFT を読みました。

第1回

第1回では arrow function, Proxy, RegExpのyフラグとuフラグを読みました。

arrow function

arrow functionはfunction式よりも構文が短い関数式で、以下のようにかけます。

var func = (arg1, arg2) => arg1 + arg2
func(1, 2) // => 3

ただし以下の点で、function式と異なっているようでした。

  • 一行で書く場合は暗黙的にreturnがつく
  • thisの値がlexicalである
  • constructorを持たない(newできない)

一行で関数式がかけるのはとても便利ですね。

Proxy

ProxyはObject用のmeta-programming APIに当たるもので、for (a in b)でループを回した時や、a.child = bと値をセットした時等の動作を関数呼び出しに置き換えることができます。

先ほどのarrow functionもProxyと組み合わせることでconstructorを持たせることができるようでした。

var p = Proxy(() => 1, {
  construct: function() {}
});

RegExp

yフラグをつけていると、lastIndexプロパティ以降の文字列でマッチするようになります。

uフラグはunicodeの文字を正規表現でうまく扱うためのフラグです。

uフラグはまだ実装されている環境がないので早く実装が望まれます。

第2回

第2回ではdefault function params, Array.prototype.findIndex, Array.prototype.find, Array.prototype.fillを読みました。

default function params

default function paramsが入ったことで、関数呼び出し時の引数がundefinedの時にセットされるデフォルト引数を設定できるようになりました。

func = (a, b = a + 2) => b
func(4) // => 6
func(1, 2) // => 2

Array.prototype.findIndex, Array.prototype.find, Array.prototype.fill

Array.prototype.findIndex, Array.prototype.findに関してはLo-DashのfindIndex, findと似たもので、要素をcallbackに渡してtrueが返ってきたものを見つけるメソッドです。

[10, 20, 30, 40, 50].findIndex((i) => i > 30) // => 3
[10, 20, 30, 40, 50].find((i) => i > 30) // => 40

Array.prototype.fillは第1引数の値で配列を埋めることができるメソッドです。

第2、第3引数の値でそれぞれ開始位置、終了位置のインデックスを指定することができます。 (インデックスには負の値を指定して、末尾からのインデックスとすることもできます。)

次回は6/16(月)です。