分割代入(Destruicturing)メモ

分割代入とは

・ 参照元がオブジェクトの場合

代入元と代入先のkeyと変数名が”””同じ”””であれば、
{key名} = オブジェクト名で代入することができる
存在しないkeyを指定した場合はからの変数が作られるだけで、エラーにはならない(参照するとundefinedになる)

・ 参照元が配列の場合

配列にはkeyがない為取り出す順に変数名を指定していく
また、オブジェクトでは{}だったが配列では[]をつかう
配列要素数よりも多かったり少なかったりしてもエラーは出ない(参照するとundefinedになる)

・ 関数で使う場合

関数の引数でも使える。
引数で使用する場合は、デフォルト値を設定できないので注意する

対象がオブジェクト

let books = {
    name:"シャーマンキング",
    amount:"500円"
}

・ ES5

let name = books.name;
let amount = books.amount;

・ ES6

let {name, amount}=books;

出力結果
シャーマンキング
500円

代入先の変数名を変更したい場合は、
key名:代入先の変数名で指定できる。

let {name:tmp, amount}=books;
console.log(tmp);
console.log(amount);

出力結果
シャーマンキング
500円

・ 引数として使う場合

ES5

let fileInfo={
    extensions:'jpg',
    name:'画像１',
    size:'800:900'
}

function fileSummary(file){
    return `${file.name}.${file.extensions}のサイズは${file.size}です`
}

fileSummary(fileInfo);

ES6

let fileInfo={
    extensions:'jpg',
    name:'画像１',
    size:'800:900'
}
function fileSummary({name,extensions,size}){
    return `${name}.${extensions}のサイズは${size}です`
}

fileSummary(fileInfo);

対象が配列

const books = [
    'ダレン・シャン',
    'THE MANZAI',
    'デモナータ'
]

const [title1, title2] = books;
console.log(title1);
console.log(title2);

出力結果
ダレン・シャン
THE MANZAI

restを組み合わせたやり方

restと組み合わせると残りの配列をまとめて変数に入れることができるようになる

const [title, ...tmp] = books;
console.log(title);
console.log(tmp);

出力結果
ダレン・シャン
["THE MANZAI","デモナータ"]

応用

①配列の中にオブジェクトがある場合

ダレン・シャンのpriceを取得したい場合
使う配列

const books = [
    {title:'ダレン・シャン',price:1500},
    {title:'THE MANZAI',price:1000},
    {title:'デモナータ',price:1500}
];

ES5

let price = books[0].price;

ES6

let [{price}] = books;

これでも取得ができる

②オブジェクトの中が配列の場合

const BookStore = {
    Titles:['ダレン・シャン','THE MANZAI','デモナータ']
}
let {Titles:[firstTitle]} = BookStore;

console.log(firstTitle);

出力結果
ダレン・シャン

ただこれだと見にくいから下記のようにしたほうが可読性は上がる

let {Titles:Tmp} = BookStore;
let [firstTitle] = Tmp;
console.log(firstTitle);