LoginSignup
5
4

More than 5 years have passed since last update.

ES2015(ES6, TypeScript) の Destructuring Assignment が素敵

Last updated at Posted at 2016-03-17

いろいろと便利なDestructing Assignment。
もうこれナシでJS書けない。

// var foo = array[0]
// var bar = array[1]
// と書かなくてOK
const array = [111, 222]
const [foo, bar] = array
console.log(foo) // 111
console.log(bar) // 222
// var hoge = obj.hoge
// var fuga = obj.fuga
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
const {hoge, fuga} = obj
console.log(hoge) // 111
console.log(fuga) // 222
// var foo = obj.hoge
// var bar = obj.fuga
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
const {hoge:foo, fuga:bar} = obj
console.log(foo) // 111
console.log(bar) // 222
// console.log(obj.hoge)
// console.log(obj.fuga)
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
function piyo ({hoge, fuga}) {
    console.log(hoge) // 111
    console.log(fuga) // 222
}
piyo(obj)
// var foo = obj.hoge
// var bar = obj.fuga
// console.log(foo)
// console.log(bar)
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
function piyo ({hoge:foo, fuga:bar}) {
    console.log(foo) // 111
    console.log(bar) // 222
}
piyo(obj)
// piyo({hoge: hoge, fuga: fuga})
// と書かなくてOK
const hoge = 111
const fuga = 222
function piyo ({hoge, fuga}) {
    console.log(hoge) // 111
    console.log(fuga) // 222
}
piyo({hoge, fuga})

ただし、細かい仕様をちゃんと理解した上で使う。下記参照。
Destructuring assignmentのご利用は計画的に - Qiita

5
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4