• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

ES2015

ES2015/分割代入

Top / ES2015 / 分割代入

Destructuring assignment

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

オブジェクトや配列から値を抽出するための方法

JavaScript/配列

• 配列に格納されている順に名前を設定して抽出可能

  var [name, age] = ['Koyabu', 20];

JavaScript/オブジェクト

• 一致するプロパティを取り出すことができる
  • 名称さえ合っていれば順番は関係ない (一部でも可能)
  • 存在しないプロパティは指定不可

  const myProfile = {name; "aaa",age:123};
  const {name, age} = myProfile;

別名

• 新しい変数名への代入
• 取得してさらに別名をつけることも可能

  const {name:newName, age:newAget} = myProfile;

JavaScript/デフォルト値

• プロパティが存在しない場合の値を指定可能

  const {name = "名前", age = 123} = myProfile;

• 既定値のある分割代入の引数
  • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters#既定値のある分割代入の引数

  function preFilledArray([x = 1, y = 2] = []) {
    return x + y;
  }

代入する変数名の指定

• https://typescriptbook.jp/reference/values-types-variables/object/destructuring-assignment-from-objects#代入する変数名の指定
• オブジェクトの分割代入では、コロン:のあとに変数名を指定すると、その名前の変数に代入できます。

  const color = { r: 0, g: 122, b: 204, a: 1 };
  const { r: red, g: green, b: blue, a: alpha } = color;
  console.log(green);
  122

関連

• ES2015/略記プロパティ名