ES6のチートシート
ES6の特徴的な部分。
これだけじゃないだろうけど、とりあえず便利そうなやつを覚え書き。
ジェネレーター
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// --------------------------------------------------------
// Generator
// next()で次のyieldに移動
// next()はステップを進めるだけなので、実際の処理はvalueで実行
const getWorld = function*() {
yield fetch('./index.html')
yield (text) => {
console.log(text)
}
}
let g = getWorld()
let res = g.next().value.then(function(res) {
return res.text()
}).then(function(text) {
g.next().value(text)
})
// => <html>.......</html>
Template String
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// --------------------------------------------------------
// template string
const partOfStrig = 'sample'
let stringDemo = `------
first line
${partOfStrig}
third line
------`
console.log(stringDemo)
// =>
// ------
// first line
// sample
// third line
// ------
Destructuring assignment
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// --------------------------------------------------------
// Destructuring assignment
// 分割代入
function calc1({ a, b }) {
return a + b
}
function calc2({ a = 1, b = 2 }) {
return a + b
}
console.log(calc1({ a: 1, b: 2 }))
// => 3
console.log(calc2({}))
// => 3
Rest params
javascript
1
2
3
4
5
6
7
8
9
// --------------------------------------------------------
// Rest params
// 残りは配列にまとめてくれる
function restTest(a, b, ...restArgs) {
console.log(restArgs)
}
restTest(1,2,3,4,5,6,7,8,9,10)
// => [3, 4, 5, 6, 7, 8, 9, 10]
Spread
javascript
1
2
3
4
5
6
7
// --------------------------------------------------------
// Spread
const mine = { a: 1, b: 2, c: 3 }
const yours = { ...mine, d: 4, e: 5 }
console.log(yours)
// => { a: 1, b: 2, c: 3, b: 4, e: 5 }
Object literal
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// --------------------------------------------------------
// Object literal
// 動的にキーを作れるのは便利
const key = 'key'
let obj = {
['test' + key]: 10, // testkey: 10
key, // key: 'key'
myMethod() { console.log('method') }, // myMethod: function() { }
get getter() { console.log('get') },
set setter(v) { console.log(v) }
}
console.log(obj.testkey)
// => 10
console.log(obj.key)
// => 'key'
console.log(obj.myMethod())
// => 'method'
console.log(obj.getter)
// => 'getter'
console.log(obj.setter = 'set!')
// => 'set!'
WeakMap
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// --------------------------------------------------------
// WeakMap
// オブジェクトをキーとすることができる
let wm = new WeakMap()
let objkey = {}
wm.set(objkey, 100000)
console.log(wm.has(objkey))
// => true
console.log(wm.get(objkey))
// => 100000
console.log(wm.get({}))
// => undefined
objkey = {a: 1}
console.log(wm.get(objkey))
// => undefined
こんなコースもあるよ。オススメ。
https://es6.io/