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

JavaScript





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

・JavaScriptの分割代入の使い方がわからない
・JavaScriptの配列/オブジェクトごとの分割代入の使い方がわからない

ですよね。

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

・JavaScriptの分割代入の使い方
・JavaScriptの配列/オブジェクトごとの分割代入の使い方

についてまとめます!

JavaScriptの分割代入について

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

JavaScriptの分割代入とは

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

分割代入の構文

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

[変数1, 変数2 ..] = <配列/オブジェクト>

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

letまたはconst 変数名 = (引数, ...) => {
処理
};

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

[変数1, 変数2 ...残余要素(rest)] = <配列/オブジェクト>

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

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


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


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

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

結果です。

"マイク"
"35"
"Driver"

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

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

結果です。

"マイク"
"35"
"Driver"
["〇〇会社", "東京"]

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

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

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


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


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

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

結果です。

"Driver"

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

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

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

結果です。

"Driver"
{
age: 35,
name: "マイク"
}

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


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

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

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

objPrint(arrTest);

結果です。

"Driver"
{
age: 35,
name: "マイク"
}

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


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

さいごに

いかがでしょうか。

今回は、

・JavaScriptの分割代入の使い方
・JavaScriptの配列/オブジェクトごとの分割代入の使い方

についてまとめました。

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



この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。