ES2015で導入された、より洗練された構文 Part 2

リスト1：Template literalsの使用例

// 文字列内で改行が認識される
`In JavaScript this is
 not legal.`

// 文字列内で変数が展開される
const name = 'Bob',
      time = 'today'
`Hello ${name}, how are you ${time}?`

リスト2：Template literalのタグ付けの使用例

const prefecture = 'Tokyo',
      country = 'Japan'

const tag = (strings, ...values) => {
  console.log(strings)
  console.log(values)
  console.log(strings[0]) // "I live in "
  console.log(strings[1]) // ", "
  console.log(values[0])  // Tokyo
  console.log(values[1])  // Japan

  return "Boooom!!"
}

tag`I live in ${prefecture}, ${country}`
// "Boooom!!"

リスト3：未加工の文字列を取得するString.raw()

String.raw`Hi\n${ 2 + 3 }!`
// "Hi\\n5!"

リスト4：配列の分割代入の例

const [year, month, day] = [2016, 8, 11]

リスト5：オブジェクト分割代入の例

let {a, b} = {a: 1, b: 2}
({a, b} = {a: 3, b: 4})

リスト6：Rest

const [hamburger, ...fruits] = ['Cheeseburger', 'apple', 'banana', 'peach']
console.log(hamburger, fruits)
// 'Cheeseburger', ['apple', 'banana', 'peach']

リスト7：引数に分割代入を使用する

const foo = ({a, b}) => {
  console.log(a, b)
}
foo({a: 1, b: 2})

リスト8：デフォルト引数との組み合わせ例

const foo = ({a = 0, b = 0} = {}) => {
  console.log(a, b)
}
foo({a: 1}) // 1, 0
foo({b: 2}) // 0, 2
foo({})     // 0, 0
foo()       // 0, 0

リスト9：引数の初期値を指定

const func = (x, y = 12) => {
  return x + y
}
func(3) // 15

リスト10：可変長の引数を配列として扱う

const func = (x, ...y) => {
  console.log(x) // 3
  console.log(y) // ["hello", true]
  return x * y.length
}
func(3, "hello", true) // 6

リスト11：配列を展開し、個々の引数として扱う

const func = (x, y, z) => {
  return x + y + z
}
func(...[1, 2, 3]) // 6

リスト12：Array.prototype.push

const domains = ['com', 'net', 'org'],
      jp = ['tokyo', 'jp']
domains.push(...jp)
// ['com', 'net', 'org', 'tokyo', 'jp']

リスト13：Array.prototype.concat

const foods = [
  ['Coca-Cola', 'Coffee'],
  ['Hamburger', 'Cheeseburger'],
  ['Hash Browns', 'Salad']
]
[].concat(...foods)
// ["Coca-Cola", "Coffee", "Hamburger", "Cheeseburger", "Hash Browns", "Salad"]

リスト14：Mathオブジェクトの例

const fib = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89]
Math.max(...fib) // 89
Math.min(...fib) // 1

リスト15：Iterartorの取得

const array = [1, 2, 3]
array[Symbol.iterator]()
// ArrayIterator {}

リスト16：Iteratorのnext()メソッド

let iterableObject = [1, 2, 3],
    iterator = iterableObject[Symbol.iterator](),
    iteratorResult = iterator.next()　// {value: 1, done: false}

リスト17：For..Ofを使わないコードの例

const areas = ['daikanyama', 'nakameguro', 'jiyugaoka']
const iterator = areas[Symbol.iterator]()

let next = iterator.next()
while(!next.done) {
  console.log(next.value)
  next = iterator.next()
}
// 'daikanyama'
// 'nakameguro'
// 'jiyugaoka'

リスト18：For..Ofを使用したコードの例

const areas = ['daikanyama', 'nakameguro', 'jiyugaoka']

for (area of areas) {
  console.log(area)
}
// 'daikanyama'
// 'nakameguro'
// 'jiyugaoka'

リスト19：Generatorなしの実装例

const iterableFibonacci = {}

iterableFibonacci[Symbol.iterator] = () => {
  const iterator = {}
  let a = 0
  let b = 1
  let i = 0

  iterator.next = () => {
    const value = a;
    const done = i > 9;
    [a, b] = [b, a + b]
    i++

    return done ? {done} : {value, done}
  }

  return iterator
}

for (number of iterableFibonacci) {
  console.log(number)
}
// 0 1 1 2 3 5 8 13 21 34

リスト20：Generatorを用いた実装例

function* fibonacciGenerator() {
  let a = 0
  let b = 1

  for (let i = 0; i < 10; i++) {
    yield a;
    [a, b] = [b, a + b]
  }
}

for (number of fibonacciGenerator()) {
  console.log(number)
}
// 0 1 1 2 3 5 8 13 21 34

リスト21：class内でgenerator関数を定義する

class Subway {
  *serve() {
    yield '恵比寿'
    yield '中目黒'
  }
}

const subway = new Subway()
const serve = subway.serve()
console.log(serve.next()) // {value: "恵比寿", done: false}
console.log(serve.next()) // {value: "中目黒", done: false}
console.log(serve.next()) // {value: undefined, done: true}

リスト22：yield*の使用例

const osx = function*() {
  yield 'Mountain Lion'
  yield 'Mavericks'
  yield 'Yosemite'
  yield 'El Capitan'
}

const macos = function*() {
  yield* osx()
  yield 'Sierra'
}

const iterator = macos()

iterator.next() // {value: "Mountain Lion", done: false}
iterator.next() // {value: "Mavericks", done: false}
iterator.next() // {value: "Yosemite", done: false}
iterator.next() // {value: "El Capitan", done: false}
iterator.next() // {value: "Sierra", done: false}
iterator.next() // {value: undefined, done: true}

リスト23：Arrayをyield*に渡す

function* assistantsGenerator(){
  yield* ['dog', 'monkey', 'pheasant']
  yield 'cat'
}

for(var assistant of assistantsGenerator()) {
  console.log(assistant)
}
// 'dog'
// 'monkey'
// 'pheasant'
// 'cat'