Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Destructuring

構造分解（destructuring、旧：分割代入）構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の構文です。これは、データを受け取る場所（代入の左辺や、新しい識別子バインディングを作成する場所ならどこでも）で使用できます。

言語コアES2015

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
destructuring
49
14
41
8
49
8
computed property names

計算されたプロパティ名
49
14
41
10
49
10
rest in arrays

配列の残り
49
16
41
9.1
49
9.3
rest in objects

モノで休む
60
79
55
11.1
60
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • FirefoxはFirefox 2から40まで、非標準のデストラクチャリング実装を提供していました。

基本構文

JAVASCRIPT 
// Object spread assignment
const { name, age, role = 'user' } = user;

// Array spread assignment
const [first, , third] = [1, 2, 3];

// Renaming
const { name: userName } = user;

// Nesting
const { address: { city } } = { address: { city: 'Tokyo' } };

// Function arguments
function greet({ name, age }) {
  return `${name} (age: ${age})`;
}

ライブデモ

Object destructuring

Extract properties, rename them, and provide defaults close to the read site.

JavaScript
出力
「実行」ボタンを押してください

Array destructuring

Read by position, skip values, capture the rest, and even swap variables.

JavaScript
出力
「実行」ボタンを押してください

実務での使いどころ

  • Destructuring の活用

    構造分解（destructuring、旧：分割代入）構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の構文です。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク