解説
「分割代入」は、配列やオブジェクトから値を取り出して、別の変数にまとめて代入する構文です。
複数の言語に似たような構文が見られ、仕様は異なります。また、配列のみ利用できるケースもあれば、オブジェクトなどのプロパティを持つデータでも利用できるケースもあります。
「分割代入」を利用すれば、コードをすっきりと書くことができます。
サンプル
「分割代入」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「分割代入」のサンプル</title>
<style> #output { font-size: 24px; line-height: 1.5; } </style>
</head>
<body>
<pre id="output"></pre>
<script>
window.addEventListener('DOMContentLoaded', e => {
// 出力用の関数
const print = function() {
const el = document.querySelector('#output');
el.textContent += [...arguments].map(x => JSON.stringify(x)).join(', ') + '\n';
};
const arr = [9, 8, 7, 6, 5];
const obj = {x: 4, y: 3, z: 2, a: 1, b: 0};
// 処理1
{
const [a, b, c] = arr;
print(a, b, c); // 9, 8, 7
const {x, y, z} = obj;
print(x, y, z); // 4, 3, 2
}
// 処理2
{
const [a, b, ...c] = arr;
print(a, b, c); // 9, 8, [7,6,5]
const {x, y, ...r} = obj;
print(x, y, r); // 4, 3, {"z":2,"a":1,"b":0}
}
});
</script>
</body>
</html>
出力結果
9, 8, 7
4, 3, 2
9, 8, [7,6,5]
4, 3, {"z":2,"a":1,"b":0}
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
