ES6でのオブジェクトのデストラクチャリング


  1. 基本的なデストラクチャリング: オブジェクトのプロパティを変数に代入する一般的な方法です。
const obj = { name: 'John', age: 25 };
// プロパティを変数に代入
const { name, age } = obj;
console.log(name); // 'John'
console.log(age); // 25
  1. ネストされたオブジェクトのデストラクチャリング: ネストされたオブジェクトのプロパティにアクセスする方法です。
const obj = { 
  name: 'John',
  age: 25,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};
// ネストされたプロパティを変数に代入
const { name, age, address: { city, country } } = obj;
console.log(name); // 'John'
console.log(age); // 25
console.log(city); // 'Tokyo'
console.log(country); // 'Japan'
  1. デフォルト値の設定: プロパティが存在しない場合や値がundefinedの場合にデフォルト値を設定する方法です。
const obj = { name: 'John' };
// デフォルト値を設定
const { name, age = 30 } = obj;
console.log(name); // 'John'
console.log(age); // 30
  1. 別名の使用: 変数名をオブジェクトのプロパティ名とは異なる別の名前で使用する方法です。
const obj = { name: 'John', age: 25 };
// 別名を使用
const { name: fullName, age: years } = obj;
console.log(fullName); // 'John'
console.log(years); // 25

これらはES6でのオブジェクトのデストラクチャリングの基本的な使い方です。他にもさまざまな応用方法がありますが、ここでは簡単な例を示しました。詳細な情報は、公式のJavaScriptドキュメントや関連するチュートリアルを参照してください。