ES6とJavaScriptでオブジェクトから値をデストラクチャリングする方法


  1. オブジェクトのプロパティを変数に代入する方法:
const obj = { x: 1, y: 2, z: 3 };
// プロパティ x, y, z の値を変数に代入する
const { x, y, z } = obj;
console.log(x); // 結果: 1
console.log(y); // 結果: 2
console.log(z); // 結果: 3
  1. プロパティにデフォルト値を設定する方法:
const obj = { x: 1, y: 2 };
// プロパティ z のデフォルト値を設定する
const { x, y, z = 0 } = obj;
console.log(x); // 結果: 1
console.log(y); // 結果: 2
console.log(z); // 結果: 0 (デフォルト値)
  1. プロパティを別の変数名で利用する方法:
const obj = { x: 1, y: 2 };
// プロパティ x を変数 a に代入する
const { x: a, y } = obj;
console.log(a); // 結果: 1
console.log(y); // 結果: 2
  1. 入れ子のオブジェクトから値を抽出する方法:
const obj = { x: 1, y: { z: 2 } };
// 入れ子のオブジェクトから値を抽出する
const { x, y: { z } } = obj;
console.log(x); // 結果: 1
console.log(z); // 結果: 2

これらはデストラクチャリングの基本的な使用例ですが、さまざまな応用方法があります。オブジェクトのプロパティを効率的に利用するために、デストラクチャリングを積極的に活用してみてください。