便利だけど名前がふわっとしているので雑にまとめる
今回取り上げるもの
JavaScriptにおいて Destructuring assignment と呼ばれるもの、日本語では分割代入と訳したり、ままカタカナ語でデストラクチャリングという。大きくこの機能には「配列を対象にしたもの」「オブジェクトを対象にしたもの」が存在するのでその2つのくくりで説明をする。
配列
配列を分割して代入をすることができる
const baseArray = [1,2,3] const [frist,sencond,third] = baseArray // firstには1 , secondには2 , thirdには3が入る
また、部分的に取り出したりすることもできる
const baseArray = [1,2,3] const [ichi] = baseArray // ichiに1が入る const [x,,z] = baseArray // xに1 , zに3が入る
またスプレッド構文を用いた残余引数(RestParameter)を指定すると広域に切り取りができる
const longArray = [10,20,30,40,50] const [ichi,...nokori] = longArray console.log(ichi) // 10 console.log(nokori) // [20,30.40.50]
ただし残余引数のあとに別の変数を設定を指定していれることはできない
// 下記のような記述をするとエラー const [first,...aida,last] = longArray
引数への活用
関数の引数に使うこともできる
function loggingfirst([first, ...nokori]){ console.log(`logging ${first}`) } let array = [2,4,8,16] loggingfirst(array) // logging 2
オブジェクト
オブジェクトは対応するキーのものがあれば入る形になる
let source = { age: 20, name: "Tanaka", country: "Japan"} let {name , age} = source console.log(name) // Tanaka console.log(age) // 20
もちろん対応するオブジェクトがない場合は入らない
let source = { age: 20, name: "Tanaka", country: "Japan"} let {test , age} = source console.log(test) // undefined console.log(age) // 20
また初期値設定もできる
let source = { age: 20, name: "Tanaka", country: "Japan"} let {test = "test text" , age = 30} = source console.log(test) // test text console.log(age) // 20
キー名とは異なる変数への割当
以下のように書くことでキー名と別の変数に割り当てることができる
let source = { age: 20, name: "Tanaka", country: "Japan"} let {test: newTest = "test string" , age: newAge , todouhuken: region} = source console.log(newAge) // 20 console.log(newTest) // test string console.log(region) // undefined
この構文はコロンを挟んで右側に要素を入れる形なので気をつける。（だいたい他の構文はコロンの左側に右側の値を入れる）
引数への活用
配列同様に引数にも活用できる
function loggingName({name}){ console.log(`logging ${name}`) } let source = { age: 20, name: "Tanaka", country: "Japan"} loggingName(source) // logging Tanaka
