KMC活動ブログ

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

ECMAScript6勉強会 第14回 【KMCアドベントカレンダー15日目】

この記事はKMC Advent Calendar 2014の15日目の記事です。

ECMAScript6勉強会

こんにちは id:tyage です。

KMCでは6月からゆっくりとECMAScript6の仕様を読み進める勉強会をしています。

過去の記事を以下に挙げておきます。

第14回

10/27に第14回を行いました。

この回では Object.is, Object.getOwnPropertySymbols, Object.setPrototypeOf, Array.of, Array.prototype.copyWithin, Array.prototype.keys, Array.prototype.values, Array.prototype.entries, Array.prototype[Symbol.unscopables], function "name" propertyを読みました。

Object.is

2つのオブジェクトを比較して等しいかどうかを返します

比較ロジックは http://people.mozilla.org/~jorendorff/es6-draft.html#sec-samevalue にあります。

Object.is(window, window) // => true
Object.is(NaN, NaN) // => true
Object.is(+0, -0) // => false

Object.getOwnPropertySymbols

シンボルがキーになっているプロパティを取得します

a = {}
a[Symbol('test')] = 1
Object.getOwnPropertySymbols(a); // => [Symbol(test)]

Object.setPrototypeOf

オブジェクトのgetPrototypeOfで返ってくる値を変更します。

今までだとprotoプロパティで設定できたのですが、ES6だとこれを利用することで変更できるようになりそうです。

Object.setPrototypeOf(document, Array.prototype)
document.__proto__ === [].__proto__ // => true

Array.of

引数から配列を生成します。

Array.of(1,2,3) // => [ 1, 2, 3 ]

Array.prototype.copyWithin

Array.prototype.copyWithin (target, start [ , end ] )

startからendまでのものをtargetから先にコピーします。

破壊的なメソッドのようです。

各種TypedArrayにも実装されているので、memcpy的な使い方をすると便利なのではないでしょうか。

[1, 2, 3, 4, 5].copyWithin(0, 3) // => [ 4, 5, 3, 4, 5 ]
[1, 2, 3, 4, 5].copyWithin(4, 3) // => [ 1, 2, 3, 4, 4 ]
[1, 2, 3, 4, 5].copyWithin(0, 3, -1); // => [ 4, 2, 3, 4, 5 ]

Array.prototype.keys

名前の通り、keyをiteratorで返します。

for (var i of new Array(9).keys()) console.log(i)

Array.prototype.values

名前の通り、valueをiteratorで返します。

for (var i of new Array(9).keys()) console.log(i)

Array.prototype.entries

配列の各要素を[ key, value ]iteratorで返します。

for (var entry of [3,3,4].entries()) console.log(entry)
/*
=>
[0, 3]
[1, 3]
[2,4]
*/

あとで書く

Array.prototype[Symbol.unscopables]

ES6でArray.prototype以下のメソッドが追加されたことにより、以下のようなコードで問題が発生することに配慮したプロパティです。

var keys = [1, 2, 3]
with ([]) {
  keys.push(4)
}

ここでwith構文内で出てくるkeysに関して、Array.prototype.keysが呼ばれる問題を解決する方法として、Symbol.unscopablesのプロパティで設定されているメソッドはwith構文内で使えないようになっています。

Array.prototype[Symbol.unscopables]
/*
=>
{
  copyWithin: true,
  entries: true,
  fill: true,
  find: true,
  findIndex: true,
  keys: true
}
*/
with ([]) {
  console.log(length)
  console.log(findIndex) // => ReferenceError: findIndex is not defined
}

全部with構文が悪い。

function "name" property

各種関数オブジェクトのnameプロパティです。

今までのブラウザ実装でもnameプロパティがあったと思うのですが、どうやら独自実装だったようです。

(function hoge() {}).name // => hoge
(function* hoge() {}).name // => hoge
(new Function).name // => anonymous
({hoge() {}}).hoge.name // => hoge
sym = Symbol('hoge'),({[sym]: function() {}})[sym].name // => [hoge]

他にもいろんな種類があるようですが割愛いたします。

アドベントカレンダー次回予告

明日はporuporuさんの「NFで展示したパズルゲームのこと」です。

KMCM

KMCこと京大マイコンクラブでは、ECMAScriptになりたい部員を募集しています。KMCには入部制限はありません。年齢や学歴、人種、宗教、信条、性別、社会的身分、門地、国籍、経験などは不問です。また活動に関する制約もありません。IRCのチャット越しに会話に参加することだけでも大丈夫です。詳細は下記Webページを御覧ください。

入部案内 — 京大マイコンクラブ (KMC)