JavaScript デストラクチャ

構文解析の代入文法

構文解析の代入文法は、オブジェクトの属性を変数に解凍します：

let {firstName, lastName} = person;

それに加えて、配列や他のどんな可迭代オブジェクトも解凍できます：

let [firstName, lastName] = person;

オブジェクトの構文解析

インスタンス

// オブジェクトの作成
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// デコンストラクション
let {firstName, lastName} = person;

自分で試してみる

属性の順序は重要ではありません：

インスタンス

// オブジェクトの作成
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// デコンストラクション
let {lastName, firstName} = person;

自分で試してみる

オブジェクトのデフォルト値

欠けている可能性のある属性に対してデフォルト値を設定できます：

インスタンス

// オブジェクトの作成
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// デコンストラクション
let {firstName, lastName, country = "US"} = person;

自分で試してみる

オブジェクトの属性別名

インスタンス

// オブジェクトの作成
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// デコンストラクション
let {lastName: name} = person;

自分で試してみる

文字列の構文解析

構文解析の一つの用途は文字列の文字を解凍することです。

インスタンス

// 文字列の作成
let name = "W3Schools";
// デコンストラクション
let [a1, a2, a3, a4, a5] = name;

自分で試してみる

配列の構文解析

配列の変数を自分自身の変数に抽出できます：

インスタンス

// 配列の作成
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// デコンストラクション
let [fruit1, fruit2] = fruits;

自分で試してみる

配列の値をスキップ

二つのまたはそれ以上のカンマを使用して配列の値をスキップできます：

インスタンス

// 配列の作成
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// デコンストラクション
let [fruit1,,,fruit2] = fruits;

自分で試してみる

配列位置の値

特定のインデックス位置から配列の値を抽出できます：

インスタンス

// 配列の作成
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// デコンストラクション
let {[0]: fruit1, [1]: fruit2} = fruits;

自分で試してみる

残りの属性

構文解析の末尾で残りの属性を使用できます。

この構文は、すべての残りの値を新しい配列に格納します：

インスタンス

// 配列の作成
const numbers = [10, 20, 30, 40, 50, 60, 70];
// デコンストラクション
const [a, b, ...rest] = numbers;

自分で試してみる

Map をデコンストラクションする

インスタンス

// Map の作成
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
});
// デコンストラクション
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

自分で試してみる

JavaScript 変数の交換

デコンストラクションアサインメントを使用して、二つの変数の値を交換することができます：

インスタンス

let firstName = "Bill";
let lastName = "Gates";
// デコンストラクション
[firstName, lastName] = [lastName, firstName];

自分で試してみる