読者です 読者をやめる 読者になる 読者になる

JS.next

JavaScriptの最新実装情報を追うブログ

分割代入が実装された

★★★ ES2015 新仕様実装 V8

概要

分割代入を用いると、複数の代入を1つにまとめることが出来る。


配列リテラル調

基本

var a = 1, b = 2, c = 3
//  ↓
var [a, b, c] = [1, 2, 3]
var b = ary[1]
//  ↓
var [, b] = ary
var a = (ary[0] !== undefined) ? ary[0] : 5
//  ↓
var [a = 5] = ary  // ※未実装


配列の最初の要素を取り出す

val = ary[0]
//  ↓
[val] = ary


変数の交換

temp = a
a = b
b = temp
[a, b] = [b, a]


関数から複数の値を返す

function getTime() {
  var date = new Date
  return [date.getHours(), date.getMinutes()]
}

var [hour, minute] = getTime()
console.log(`現時刻 ${hour}:${minute}`)


パターンマッチと共に使う。

var full = prompt('フルネームを入力してください', '姓 名')

var [first, last] = full.match(/\S+/g)

alert(`ようそこ! ${first} ${last}さん`)
var address = prompt('住所を入力してください', '青森県青森市1-1-1')

var [, , city] = address.match(/(.+[都道府県])(.+[市区町村])(.+)/)

alert(`ようそこ! ${city}の皆さん`)


オブジェクトリテラル調

基本

var a = obj.a
var b = obj.b
var x = obj.y
//  ↓
var { a, b, y: x } = obj
var a = (obj.a !== undefined) ? obj.a : 5
//  ↓
var {a = 5} = obj  // ※未実装


プロパティ名と同じ変数を作る

var abs = Math.abs
//  ↓
var {abs} = Math


関数から複数の値を返す

function getTime() {
  var date = new Date
  var hour   = date.getHours()
  var minute = date.getMinutes()
  return {hour, minute}
}

var {hour} = getTime()
console.log(`現在 ${hour}時`)


イテレータと共に使う

var iter = [1, 2, 3][Symbol.iterator]()

while( { value, done } = iter.next(), !done ) console.log( value )
// 1
// 2
// 3


応用

プロパティ名と同じ変数を作る

var then = Promise.prototype.then
var all  = Promise.all
// ↓
var {then} = Promise.prototype
var {all}  = Promise
// ↓
var {all, prototype: {then}} = Promise


JSONファイルから必要な情報を抜き取る

// settings.json
{
  "version": "1.2.34",
  "scenarios": [
    {
      "name": "HogeHoge",
      "startScript": "hoge.txt"
    }
  ]
}
fetch( 'settings.json' ).then( res => res.json() ).then( obj => {
  
  var {version: ver, scenarios: [ {name, startScript: start} ]} = obj

  console.log(`バージョン:『${ver}』 最初のシナリオ:『${name}』(${start})`)
  //  "バージョン:『1.2.34』 最初のシナリオ:『HogeHoge』(hoge.txt)"

})

その他使える場所

for-of文

var ary = ['a', 'b', 'c']

for (var [key, value] of ary.entries()) console.log(`${key}: ${value}`)

// 0: "a"
// 1: "b"
// 2: "c"


関数のパラメータ

var fn = ({x}) => x

var obj = { x: 123 }

fn(obj)  // 123


実装されるバージョン

V8 4.4.65(オブジェクトリテラル調) 4.5.8(配列リテラル調) 4.5.71-4.6.9(関数パラメータ) 4.9.x(実装完了)