最終更新:2024-07-01 (月) 21:27:00 (374d)
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;
- 既定値のある分割代入の引数
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