Skip to content

Instantly share code, notes, and snippets.

@moriiimo
Last active December 23, 2016 04:30
Show Gist options
  • Save moriiimo/21844956e27a7090372c to your computer and use it in GitHub Desktop.
Save moriiimo/21844956e27a7090372c to your computer and use it in GitHub Desktop.
ES6

ES6

文法の基礎

変数展開

左辺にもブレスを書いて配列展開できる

[es6]
var arr = [1,2,3];

var [x, y, z] = arr

var [x,, z] = arr // x = 1, z = 3

var [x, ...y] = arr // x = 1, y = [2, 3]

[es5]
var _toArray = function (arr) { return Array.isArray(arr) ? arr : Array.from(arr); };

var _slicedToArray = function (arr, i) { if (Array.isArray(arr)) { return arr; } else { var _arr = []; for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) { _arr.push(_step.value); if (i && _arr.length === i) break; } return _arr; } };

var arr = [1, 2, 3];

var _arr = _slicedToArray(arr, 3);
var x = _arr[0];
var y = _arr[1];
var z = _arr[2];

var _arr2 = _slicedToArray(arr, 3);
var x = _arr2[0];
var z = _arr2[2];

var _arr3 = _toArray(arr);
var x = _arr3[0];
var y = _toArray(_arr3).slice(1);

デフォルト値の設定

これはcoffeeにもあったけど使っていなかった。 nullは評価される

[es6]
hello = (name = "guest") => {
  alert(name)
}

[es5]
hello = function () {
  var name = arguments[0] === undefined ? "guest" : arguments[0];
  alert(name);
};

[coffee]
hello = (name = "guest") ->
  alert(name)

rest parameter

... Spreadを使うと常に配列で扱われる。

[es6]
function f(...r) {
  console.log(r);
}
f(1, 2, 3); // [1,2,3]
f(1) // [1]

[es5]
function f() {
  for (var _len = arguments.length, r = Array(_len), _key = 0; _key < _len; _key++) {
    r[_key] = arguments[_key];
  }

  console.log(r);
}
f(1, 2, 3);
f(1);

let

ブロックスコープの変数が作れる。

[es6]
function f() {
  let x = "outer"; 
    {
      let x = "inner"; // 外のxとは別もの
      console.log(x)
    }
  console.log(x)
}
f()

[es5]
function f() {
  var x = "outer";
  {
    var _x = "inner"; // 外のxとは別もの
    console.log(_x);
  }
  console.log(x);
}
f();

for of

coffeeだとfor in で使えていたもの。

[es6]
let arr = ["1", "2", "3"]
for (let v of arr) {
  console.log(v);
}

[es5]
var arr = ["1", "2", "3"];
for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
  var v = _step.value;
  console.log(v);
}

[coffee]
arr = ["1", "2", "3"]
for v in arr
  console.log v

Map, Set

http://uhyohyo.net/javascript/16_1.html

// Map
var m = new Map();
m.set("hello", 42);
m.has("hello"); // true
m.get("hello"); // 42
m.clear(); // 全削除
m.size; // 1

// WeakMap
var wm = new WeakMap();
var key={};
wm.set(key, 100);
console.log(wm.get(key)); // 100
console.log(wm.get({})); // undefined

has, getなどが便利そう。
キーになるオブジェクトを汚染することなく
付加情報を付けられる。
WeakMapでは、キーのオブジェクトへの参照がなくなると、GC対象になる。

// Set
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

重複を許さないので色々はかどりそう。

// WeakSet
var key={};
var ws=new WeakSet();
console.log(ws.has(key)); // false

ws.add(key);
console.log(ws.has(key)); // true
console.log(ws.has({}));  // false

WeakSetは使い道があまり想像できなかった。

Math, Number, String, Arrayのメソッド

ちょっといくつかつまむ

// Math
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5

acosh 双曲逆cos関数
hypot 三平方の定理


// String

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

// Array

// of
Array.of(0,true, undefined, null); // [ 0, true, undefined, null ]

配列を作ってくれる

// fill
[1,1,2,3,5,8].fill(4) // [ 4, 4, 4, 4, 4, 4 ]

[1,1,2,3,5,8].fill(4, 3) // [ 1, 1, 2, 4, 4, 4 ]

[1,1,2,3,5,8].fill(4, 1, 3) // [ 1, 4, 4, 3, 5, 8 ]

引数は、変更する値、開始位置、終了位置
使い道不明‥

// find
isEven = (element, index, array) => (element % 2 === 0)

[1,2,3,5,7].find(isEven) // 2

[1,3,5,7,9].find(isEven) // undefined


便利そう。

symbol

http://blog.jmuk.org/2015/02/es6-symbol.html http://js-next.hatenablog.com/entry/2014/03/01/001650

プリミティブ型で、文字列のようにプロパティのキーとして使える新しい型

sym1 = Symbol()
sym2 = Symbol('name') // 名前も持たせられる。

typeof sym1 // "symbol" がかえる

sym1 === sym1  // true
Symbol('abc') === Symbol('abc')  // false シンボルはユニークなので、同じものは作れない。

シンボルを持っていないとプロパティにアクセスできないので、プライベートのようなフィールドを作成したいときに便利らしい。

その他

モジュール化して読み込み

https://6to5.org/docs/learn-es6/#modules https://6to5.org/docs/learn-es6/#module-loaders

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment