JavaScriptの分割代入の使い方！配列/オブジェクト別にわかりやすく説明！

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptの分割代入について

JavaScriptの分割代入について説明をします。

JavaScriptの分割代入とは

JavaScriptの分割代入とは、ES2015から導入された機能で、配列またはオブジェクトの中身を変数に分割して代入することができます。

分割代入の構文

分割代入の構文は以下の通りです。

また分割代入の結果を直接変数に渡す場合は以下の構文となります。

個別変数の他に残った複数の値をまとめていれることもできます。
残余演算子「…」を変数手前につける形になります。残余要素/restと呼ばれています。

JavaScriptの分割代入サンプル-配列編

配列の分割代入のサンプルについて説明をします。

サンプルコードを実行してみましょう。

配列に文字を代入し、分割代入でそれぞれの変数に値を代入しています。

const arrTest = ['マイク','35','Driver'];
const [name, age, job] = arrTest;
console.log(name);
console.log(age);
console.log(job);

結果です。

次は分割代入に余剰要素「…rest」を追加し出力してみましょう。

const arrTest = ['マイク','35','Driver','〇〇会社','東京'];
const [name, age, job, ...rest] = arrTest;
console.log(name);
console.log(age);
console.log(job);
console.log(rest);

結果です。

タカヒロ

残りの要素は配列として帰りますね。

JavaScriptの分割代入サンプル-オブジェクト編

オブジェクトの分割代入のサンプルについて説明をします。

サンプルコードを実行してみましょう。

オブジェクトにプロパティと文字を代入し、オブジェクトのプロパティを指定し、値を出力します。

const arrTest = {
    name: 'マイク',
    age: 35,
    job: 'Driver'
};
console.log(arrTest.job);

結果です。

次は分割代入に変数「job」と余剰要素「…rest」を追加し出力してみましょう。

const arrTest = {
    name: 'マイク',
    age: 35,
    job: 'Driver'
};
const {job ,...rest} = arrTest;

console.log(job);
console.log(rest);

結果です。

タカヒロ

分割代入の位置と配列の位置が異なっていてもプロパティ指定すればその値が入ることがわかりますね。

最後にオブジェクトを別の関数の引数に分割代入でプロパティを特定して渡して出力してみましょう。

const arrTest = {
    name: 'マイク',
    age: 35,
    job: 'Driver'
};

const objPrint = ({job ,...rest}) => {
  console.log(job);
  console.log(rest);
}

objPrint(arrTest);

結果です。

引数にわたったオブジェクトを分割代入し、変数「job」と余剰要素「…rest」にそれぞれ代入した結果を関数内で出力しています。

タカヒロ

関数の引数の中に分割代入をすることにより、丸まるオブジェクトをいれることが防げるというわけですね。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。