JavaScriptで、複数の値をまとめて代入する「分割代入」の方法

JavaScriptでは、配列の各値を代入するための記法があります。

これを「分割代入」といいます。

構文

構文意味
[変数1, 変数2, 変数3, …] = [値1. 値2, 値3…]各変数に値を代入
分割代入構文

サンプルコード

分割代入

左辺の配列の各変数に、右辺の配列の値を代入してきます。

Output
分割代入された変数を全て出力
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th 分割代入された変数を全て出力
					td#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );

let a;
let b;
let c;

[a,b,c] = [100,200,300];

targetText.textContent += a;
targetText.textContent += b;
targetText.textContent += c

分割代入(要素の入れ替え)

また、分割代入は、次の様に配列内の各値を入れ替える用途で利用されることもあります。配列のシャッフル時に使います。

Output
分割代入で要素を入れ替える前の状態
分割代入で要素を入れ替えた後の状態
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th 分割代入で要素を入れ替える前の状態
					td#targetText2
				tr
					th 分割代入で要素を入れ替えた後の状態
					td#targetText3
JavaScript
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );

const sampleDatas = ['佐藤','鈴木','成田']
targetText2.textContent += sampleDatas[0];
targetText2.textContent += sampleDatas[1];
targetText2.textContent += sampleDatas[2];

[sampleDatas[0],sampleDatas[1],sampleDatas[2]] = [sampleDatas[2],sampleDatas[1],sampleDatas[0]];

targetText3.textContent += sampleDatas[0];
targetText3.textContent += sampleDatas[1];
targetText3.textContent += sampleDatas[2];
インストラクター
コメント

コメントを残す