これ行って来ました。

楽しかった！

JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。

メモ

  • Firefox Auroraが現状ES6最先端ぽい。次点Chromeは
    chrome://flags
    から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。
  • Firefoxで
    メニューのツール＞Web開発＞スクラッチパッド
    でスクラッチパッド。なんかコンソールより便利なやつ。
  • 配列内包表記も使えるように。でも見づらいので三項演算子（?:演算子）みたいな扱いになりそうに思った。

サンプルコードいろいろ

let

ブロックスコープになる。varと有効範囲が異なる。

1
2
3
4
5
6
let x = 0;
if (1) {
  let x = 1;
  console.log(x);  // => 1
}
console.log(x);  // => 0
1
2
3
4
5
6
var x = 0;
if (1) {
  var x = 1;
  console.log(x);  // => 1
}
console.log(x);  // => 1

const

定数を宣言する。定数は再代入が無視される。

1
2
3
4
const x = 123;
console.log(x);  // => 123
x = 234;
console.log(x);  // => 123 (!=234)

ただし’use strict’を書いてstrictモードにしておくと、 “Exception: x is read-only” といわれる。ふむふむ。

1
2
3
'use strict';
const x = 123;
x = 234;  // => Exception: x is read-only

ヒント: constを試して “Exception: redeclaration of const” と言われたら、
メニューの実行メニュー＞変数をリセット
で変数を初期化する。件のエラーは、constで二度宣言しようとしているため。（一度目の実行状態が残っている。）

分割代入

配列の一部を、複数の変数へ代入するってのを一発でやる記法。

1
2
3
4
// 変数から
var [a,,c] = [1,2,3];
console.log('a', a);  // => 1
console.log('c', c);  // => 3
1
2
3
4
// オブジェクトから
var {x,z} = { x:123, z:345, y:234 };
console.log('x', x);  // => 123
console.log('z', z);  // => 345

var [x,y] = position;とか良さそう。

もっと複雑なのも。

1
2
var [x,{y}] = [{x:123}, {y:234}];
console.log(x,y);  // => {x:123}, 234
1
2
3
var arr = [{x:123}, {y:234}]
var [x,{y}] = arr;
console.log(x === arr[0]);  // => true

関数の引数に初期値を与える

1
2
3
4
5
6
7
// 引数の初期値
function f(a=123, b=234) {
  console.log(a, b);
}
f();  // => 123 234
f(987);  // => 987 234
f(987,876);  // => 987 876
1
2
3
4
5
// 引数がundefinedだと初期値、nullならnull
function f(a=123, b=234) {
  console.log(a, b);
}
f(null, undefined);  // => null 234

可変長引数

argumentsは遅いので、こちらを使おう！という話らしい。

1
2
3
4
5
// 可変長引数
function f(x, ...args) {
  console.log(x, args);
}
f(1,2,3);  // => 1 [2,3]

MapとかSetとか

1
2
3
4
// Map
var map = new Map;
map.set('x', 123);
console.log(map.get('x'), map.get('y'));  // => 123 undefined

MapとObjectの違い:

1
2
3
4
// Set
var set = new Set();
set.add(10);
console.log(set.has(10), set.has('10'));  // => true false
1
2
3
4
// Setは+0と-0も区別する
var set = new Set();
set.add(0);
console.log(set.has(+0), set.has(-0));  // => true, false

WeakMap使用場面例:

  1. コンストラクターCでインスタンスo生成時に、WeakMap mへ格納しておく。
  2. mがoを持っていれば、oはCのインスタンスである。（手でプロパティを操作しても判断できる。）
  3. 通常のMapと異なり、oはGCに回収され得る。

イテレーター系

1
2
3
4
5
6
7
// イテレーター (for-of)
var map = new Map();
map.set('a', 123);
map.set('b', 234);
for (var [k,v] of map) {
  console.log(k,v);
}

通常のオブジェクトはイテレーターに対応していない。

1
2
3
4
5
6
7
var map = {
  a: 123,
  b: 234
};
for (var [k,v] of map) {  // Exception: map is not iterable
  console.log(k,v);
}

ただし、自前でiterator()を実装すれば利用可能とのこと。

クラス

話題の。

それでもESはprototypeベースであり、classは糖衣構文にすぎない、つまり既存の記法で置き換え可能であるらしい。

楽しかった！

なんかヘンテコな記法が増えたりしてないみたいで良かった。（|>とか……。）

今後が楽しみです。