分割代入について調べました【javascript】

javascriptの分割代入について調べたのでメモ。

配列の分割代入
オブジェクトの分割代入
1. 分割代入を使ってテーブルを作成する
まとめ

配列の分割代入

例えばこんな配列があるとします。

const user = ['user1234','tanaka','28'];

この配列を分割代入するとこうなります。

const [id,name,age] = user;

変数の値を確認すると、それぞれの値が格納できてます。

console.log(id); // user1234
console.log(name); // tanaka
console.log(age); // 28

多次元配列の値を取り出してみる

この仕組みで、例えば多次元配列の値を取り出すコードを短くできます。

const users = [
    ['user1234','tanaka','28'],
    ['user5678','sato','22'],
    ['user9112','suzuki','32'],
    ['user3456','yamada','44']
];

for(let [id,name,age] of users) {
    console.log(id);
    console.log(name);
    console.log(age);
}

文字列を分割代入してみる

文字列を分割して代入する場合は、split関数を使います。
split関数は、空白や「,（カンマ）」で分割した文字列を配列にして返します。
分割代入を使用すると、文字列の分割と変数代入を同時に行うことができます。

const fruits = "りんご,みかん,ばなな";
const [item1,item2,item3] = fruits.split(",");
console.log(item1); // りんご
console.log(item2); // みかん
console.log(item3);// ばなな

初期値を設定する

値がない場合に備えて、初期値を設定することができます。

const fruits = "りんご,みかん";
const [item1,item2,item3 = "値がないよ！"] = fruits.split(",");
console.log(item1); // りんご
console.log(item2); // みかん
console.log(item3);// 値がないよ！

このように初期値を代入しておけばOKです。

オブジェクトの分割代入

例えばこんなオブジェクトがあるとします。

const obj = {
    item1 : 'value1',
    item2 : 'value2',
    item3 : 'value3',
}

このオブジェクトを分割代入するとこうなります。

const {item1} = obj;
const {item2} = obj;
const {item3} = obj;

変数の値を確認すると、それぞれの値が格納できてます。

console.log(item1); //value1
console.log(item2); //value2
console.log(item3); //value3

分割代入を使ってテーブルを作成する

この仕組みを使って、テーブルを作成してみます。
オブジェクトの値を取り出してテーブルを作成しています。
実際の表示は以下のデモから確認できます。（新しいタブが開きます。）

デモを確認する

コード全体はこんなカンジになりました。

const tableObj = {
    propTH : ['title1','title2','title3','title4'],
    propTD01 : ['value1','value2','value3','value4'],
    propTD02 : ['item1','item2','item3','item4'],
}

function createTable({propTH=['default1'],propTD01=['value1'],propTD02=['item1']} = {}) {
    let tableElm = `<table>`;
    let [i ,j]= [0,0];
    for(let th of propTH) {
        tableElm += `<tr>`;
        tableElm += `<th>${th}</th>`;
        tableElm += `<th>${propTD01[i++]}</th>`;
        tableElm += `<th>${propTD02[j++]}</th>`;
        tableElm += `</tr>`;
    }
    return tableElm += `</table>`;
}
const divElm = document.createElement('div');
const tableTag = createTable(tableObj);
const mainTag = document.querySelector('main');

divElm.innerHTML = tableTag;
mainTag.appendChild(divElm);

用意するオブジェクトはこちらです。セルに入れ込む値を配列にしておきます。

const tableObj = {
    propTH : ['title1','title2','title3','title4'],
    propTD01 : ['value1','value2','value3','value4'],
    propTD02 : ['item1','item2','item3','item4'],
}

テーブルを作成する関数はこちらです。
ポイントだけメモしていきます。

function createTable({propTH=['default1'],propTD01=['value1'],propTD02=['item1']} = {}) {
    let tableElm = `<table>`;
    let [i ,j]= [0,0];
    for(let th of propTH) {
        tableElm += `<tr>`;
        tableElm += `<th>${th}</th>`;
        tableElm += `<th>${propTD01[i++]}</th>`;
        tableElm += `<th>${propTD02[j++]}</th>`;
        tableElm += `</tr>`;
    }
    return tableElm += `</table>`;
}

引数のこの部分が分割代入です。今回は初期期を設定したのでちょっと分かりにくくなってます。

{propTH=['default1'],propTD01=['value1'],propTD02=['item1']} = {}

引数が渡って来なかった場合、デフォルトのオブジェクトが渡されます。引数最後の{}がデフォルトのオブジェクトです。デフォルトのオブジェクトには分割代入の値が格納されてます。結果的には、この初期値が引数に渡されます。なお、[‘default1’][‘value1’][‘item1’]が初期値の部分です。

もし引数が渡って来なかったら１行だけのテーブルを作成します。

セルの列を管理する変数も、初期値を分割代入で設定しました。こうするとコードが短くなります。