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

Destructuring

分割代入は配列やオブジェクトの値を変数に展開する ES2015 構文です。デフォルト値やリネーム、ネストした分割代入もサポートし、コードの簡潔さを大幅に向上させます。

言語コアES2015

概要

分割代入は配列やオブジェクトの値を変数に展開する 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 の活用

    配列やオブジェクトの値を個別の変数に展開する構文。関数の引数やインポートでも使用可能。

注意点

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

アクセシビリティ

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

参考リンク

Powered by web-features