これ行って来ました。
楽しかった!
JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。
メモ
- Firefox Auroraが現状ES6最先端ぽい。次点Chromeは
chrome://flags
から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。 - Firefoxで
メニューのツール>Web開発>スクラッチパッド
でスクラッチパッド。なんかコンソールより便利なやつ。 - 配列内包表記も使えるように。でも見づらいので三項演算子(
?:
演算子)みたいな扱いになりそうに思った。
サンプルコードいろいろ
let
ブロックスコープになる。var
と有効範囲が異なる。
let x = 0; if (1) { let x = 1; console.log(x); // => 1 } console.log(x); // => 0
var x = 0; if (1) { var x = 1; console.log(x); // => 1 } console.log(x); // => 1
const
定数を宣言する。定数は再代入が無視される。
const x = 123; console.log(x); // => 123 x = 234; console.log(x); // => 123 (!=234)
ただし’use strict’を書いてstrictモードにしておくと、 “Exception: x is read-only” といわれる。ふむふむ。
'use strict'; const x = 123; x = 234; // => Exception: x is read-only
ヒント: const
を試して “Exception: redeclaration of const” と言われたら、
メニューの実行メニュー>変数をリセット
で変数を初期化する。件のエラーは、constで二度宣言しようとしているため。(一度目の実行状態が残っている。)
分割代入
配列の一部を、複数の変数へ代入するってのを一発でやる記法。
// 変数から var [a,,c] = [1,2,3]; console.log('a', a); // => 1 console.log('c', c); // => 3
// オブジェクトから var {x,z} = { x:123, z:345, y:234 }; console.log('x', x); // => 123 console.log('z', z); // => 345
var [x,y] = position;
とか良さそう。
もっと複雑なのも。
var [x,{y}] = [{x:123}, {y:234}]; console.log(x,y); // => {x:123}, 234
var arr = [{x:123}, {y:234}] var [x,{y}] = arr; console.log(x === arr[0]); // => true
関数の引数に初期値を与える
// 引数の初期値 function f(a=123, b=234) { console.log(a, b); } f(); // => 123 234 f(987); // => 987 234 f(987,876); // => 987 876
// 引数がundefinedだと初期値、nullならnull function f(a=123, b=234) { console.log(a, b); } f(null, undefined); // => null 234
可変長引数
arguments
は遅いので、こちらを使おう!という話らしい。
// 可変長引数 function f(x, ...args) { console.log(x, args); } f(1,2,3); // => 1 [2,3]
MapとかSetとか
// Map var map = new Map; map.set('x', 123); console.log(map.get('x'), map.get('y')); // => 123 undefined
MapとObjectの違い:
Objectのプロパティはキーが文字列限定。Mapはオブジェクトをキーにとれるため、例えばこのDOM要素のメタ情報を…みたいなものをDOM要素自身に付加せず行える RT @vvakame: MapとObjectの差がよーわからんしどう使い分けるべきなのかわからん #ajimibu
— dynamis (でゅなみす)さん (@dynamitter) 1月 17, 2013
// Set var set = new Set(); set.add(10); console.log(set.has(10), set.has('10')); // => true false
// Setは+0と-0も区別する var set = new Set(); set.add(0); console.log(set.has(+0), set.has(-0)); // => true, false
WeakMap使用場面例:
- コンストラクター
C
でインスタンスo
生成時に、WeakMapm
へ格納しておく。 m
がo
を持っていれば、o
はC
のインスタンスである。(手でプロパティを操作しても判断できる。)- 通常のMapと異なり、
o
はGCに回収され得る。
イテレーター系
// イテレーター (for-of) var map = new Map(); map.set('a', 123); map.set('b', 234); for (var [k,v] of map) { console.log(k,v); }
通常のオブジェクトはイテレーターに対応していない。
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
は糖衣構文にすぎない、つまり既存の記法で置き換え可能であるらしい。
楽しかった!
なんかヘンテコな記法が増えたりしてないみたいで良かった。(|>
とか……。)
今後が楽しみです。