概要：このチュートリアルでは、配列を個々の変数にデストラクチャリングできる ES6 デストラクチャリング代入の使い方を学びます。
ES6 は、オブジェクトのプロパティや配列の要素を個々の変数にデストラクチャリングできる、デストラクチャリング代入という新しい機能を提供します。オブジェクトのデストラクチャリングや配列に関する情報も参照ください。
まず、配列のデストラクチャリングから始めましょう。
JavaScript 配列デストラクチャリング入門
数値の配列を返す関数があると仮定します。
function getScores() {
return [70, 80, 90];
}Code language: JavaScript (javascript)以下のコードは `getScores()` 関数を呼び出し、戻り値を変数に代入します。
let scores = getScores();Code language: JavaScript (javascript)個々のスコアを取得するには、次のようにします。
let x = scores[0],
y = scores[1],
z = scores[2];Code language: JavaScript (javascript)ES6 より前は、戻り値の配列の要素を `x`、`y`、`z` などの複数の変数に直接代入する方法はありませんでした。
幸い、ES6 以降は、次のようにデストラクチャリング代入を使用できます。
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Code language: JavaScript (javascript)変数 `x`、`y`、`z` は、戻り値の配列の最初の、2番目、3番目の要素の値を取得します。
`[]` は配列構文に似ていますが、そうではありません。
`getScores()` 関数が2つの要素の配列を返す場合、3番目の変数は `undefined` になります。
function getScores() {
return [70, 80];
}
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // undefinedCode language: JavaScript (javascript)`getScores()` 関数が3つ以上の要素を持つ配列を返す場合、残りの要素は破棄されます。
function getScores() {
return [70, 80, 90, 100];
}
let [x, y, z] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90Code language: JavaScript (javascript)配列デストラクチャリング代入とレスト構文
レスト構文 `(...)` を使用して、配列の残りのすべての要素を新しい配列に格納することができます。
let [x, y ,...args] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(args); // [90, 100]Code language: JavaScript (javascript)変数 `x` と `y` は、戻り値の配列の最初の2つの要素の値を受け取ります。そして、`args` 変数は、戻り値の配列の最後の2つの要素である残りのすべての引数を受け取ります。
変数の宣言とは別に、代入時に配列をデストラクチャリングすることも可能です。
let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20Code language: JavaScript (javascript)デフォルト値の設定
以下の例を参照してください。
function getItems() {
return [10, 20];
}
let items = getItems();
let thirdItem = items[2] != undefined ? items[2] : 0;
console.log(thirdItem); // 0Code language: JavaScript (javascript)動作の仕組み
- まず、2つの数値の配列を返す `getItems()` 関数を宣言します。
- 次に、`items` 変数に `getItems()` 関数の戻り値の配列を代入します。
- 最後に、配列に3番目の要素が存在するかどうかを確認します。存在しない場合は、`thirdItem` 変数に値 0 を代入します。
デフォルト値を持つデストラクチャリング代入を使用すると、よりシンプルになります。
let [, , thirdItem = 0] = getItems();
console.log(thirdItem); // 0Code language: JavaScript (javascript)配列から取得した値が `undefined` の場合、次のように変数にデフォルト値を代入できます。
let a, b;
[a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2Code language: JavaScript (javascript)`getItems()` 関数が配列を返さず、配列を期待している場合、デストラクチャリング代入はエラーになります。
function getItems() {
return null;
}
let [x = 1, y = 2] = getItems();Code language: JavaScript (javascript)エラー
Uncaught TypeError: getItems is not a function or its return value is not iterableCode language: JavaScript (javascript)これに対処する一般的な方法は、`getItems()` 関数の戻り値を空の配列にフォールバックすることです。
function getItems() {
return null;
}
let [a = 10, b = 20] = getItems() || [];
console.log(a); // 10
console.log(b); // 20Code language: JavaScript (javascript)ネストされた配列のデストラクチャリング
次の関数は、別の配列（ネストされた配列）である要素を含む配列を返します。
function getProfile() {
return [
'John',
'Doe',
['Red', 'Green', 'Blue']
];
}Code language: JavaScript (javascript)戻り値の配列の3番目の要素が別の配列であるため、次のようにネストされた配列のデストラクチャリング構文を使用してデストラクチャリングする必要があります。
let [
firstName,
lastName,
[
color1,
color2,
color3
]
] = getProfile();
console.log(color1, color2, color3); // Red Green BlueCode language: JavaScript (javascript)配列デストラクチャリング代入の応用
配列デストラクチャリング代入構文の使用例を見てみましょう。
1) 変数の交換
配列デストラクチャリングにより、一時変数を使用せずに変数の値を簡単に交換できます。
let a = 10,
b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10Code language: JavaScript (javascript)2) 複数の値を返す関数
JavaScript では、関数は1つの値を返すことができます。しかし、複数の値を含む配列を返すこともできます。
function stat(a, b) {
return [
a + b,
(a + b) / 2,
a - b
]
}Code language: JavaScript (javascript)そして、配列デストラクチャリング代入構文を使用して、戻り値の配列の要素を変数にデストラクチャリングします。
let [sum, average, difference] = stat(20, 10);
console.log(sum, average, difference); // 30, 15, 10Code language: JavaScript (javascript)このチュートリアルでは、ES6 デストラクチャリング代入を使用して、配列の要素を個々の変数にデストラクチャリングする方法を学びました。
