New ES6 Features http://es6-features.org/ http://babeljs.io/learn-es2015/
eslintでのルール https://eslint.org/docs/rules/
・varをlet, constに置き換える
・arrow functionを使う（thisの問題も解決）
・callback地獄を避けるためPromiseとGeneratorを使う
ES2015（ES6）対応状況 http://node.green/
主要ブラウザ対応状況 http://kangax.github.io/compat-table/es6/
★ES5- VS. ES6+
★let と var
const Greeters = [];
for (var i = 0 ; i < 10 ; i++) { // var -> let 対策1
Greeters.push(function () { return console.log(i) });
//Greeters.push(console.log.bind(null, i)); // 対策2
}
Greeters[0]() // 10
Greeters[1]() // 10
★New Features
＞デバッグ
console.log({ a, b, c });
console.table({a, b, c, m: {name: 'andy', age: 27}});
＞数値
const byte = 2 ** 8 // Math.pow(2, 8)
＞文字列
var message = `Hello ${name}`;
let str = `hello
hoge`;
console.log(str.repeat(2)); //starstar
console.log(str.startsWith('star')); // true
console.log(str.endsWith('star')); // false
console.log(str.includes('star')); // true
＞配列
// 存在しない場合：undefined
const result = heros.find((hero) => {
return hero === 'bat man';
});
// 存在しない場合：-1
const resultIndex = heros.findIndex((hero) => {
return hero === 'bat man';
});
const max = (arr) => Math.max(...arr);
max([5, 7, 3])
const sum = (arr) => arr.reduce((a, b) => (a + b), 0);
sum([1, 2, 3])
＞Rest parameters
function fun1(...theArgs) {
console.log(theArgs.length)
}
fun1(5, 6, 7) // 3
＞Destructuring
var x = [1, 2, 3, 4, 5]
var [y=0, z=0] = x // y:1, z:2
[a, b] = [b, a] //交換
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
let {title, author} = {
title: '...',
author: '...'
};
function greet({ name, greeting }) {
console.log(`${greeting}, ${name}!`)
}
greet({ name: '...', greeting: '...' })
function printCoordinates({ left: x, top: y }) {
console.log(`x: ${x}, y: ${y}`)
}
printCoordinates({ left: 25, top: 90 })
for (let {title, artist} of songs) {
···
}
// shallow copy
const obj = { ...oldObj }
const arr = [ ...oldArr ]
＞new.target
function Foo() {
if (!new.target) throw new Error('Foo() must be called with new')
console.log('Foo instantiated with new')
}
＞Proxy
var handler = {
get: function(target, name){
return name in target ? target[name] : 36
}
};
var p = new Proxy({}, handler)
p.a = 1
p.b = undefined
console.log(p.a, p.b) // 1, undefined
console.log('c' in p, p.c) // false, 36
＞Function
function fn(x, ...y) {
return x * y.length
}
fn(...[1, 2, 3]) // fn(1, 2, 3)
＞Objects
const App = {
get closed () {
return this.status === 'closed'
},
set closed (value) {
this.status = value ? 'closed' : 'open'
},
// start: function () {···}
start () {
...
}
}
＞Generators
for (let i of iterable) {
···
}
function* idMaker () {
var id = 0
while (true) { yield id++ }
}
var gen = idMaker()
gen.next().value
gen.next().value
★forEachではなく、map、reduce、filterを使う
var employeeIds = [];
employees.forEach(function (employee) {
employeeIds.push(employee.id);
});
↓
var employeeIds = employees.map(function (employee) {
return employee.id
});
↓
const employeeIds = employees.map(employee => employee.id);
var totalScore = personnel
.filter(function (person) {
return person.isForceUser;
})
.map(function (jedi) {
return jedi.pilotingScore + jedi.shootingScore;
})
.reduce(function (acc, score) {
return acc + score;
}, 0);
↓
const totalScore = personnel
.filter(person => person.isForceUser)
.map(jedi => jedi.pilotingScore + jedi.shootingScore)
.reduce((acc, score) => acc + score, 0);
↓
const totalScore = personnel.reduce(
(acc, person) => person.isForceUser ?
acc + person.pilotingScore + person.shootingScore : acc, 0);