ECMAScript2015
同名メンバであれば簡潔な記述が可能になった（オブジェクトリテラル）
ECMAScript2015ではオブジェクト内のメンバ名が変数名と同じ名前のメンバであれば代入においては右辺が必要なくなりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const name = "太郎"; const age = 25; //従来型 // let person = { // name: name, // age: age // } //ECMAScript2015 let person = { name, age } console.log(person.name); //太郎と表示される。 console.log(person.age); //25と表示される。 |
キー名のエクスプレッション化（外部化）が可能になった。
オブジェクトのキー名に角括弧([])を使う事が可能になりました。
|
1 2 3 4 5 |
const key = "age"; let person = { name: "太郎", [key]: 25 } |
下記のように記述すればエクスプレッションの中で関数を使用する事も可能になります。
|
1 2 3 4 5 6 7 |
function getKey() { return "age" } let person = { name: "太郎", [getKey()]: 25 } |
オブジェクト内に関数を定義する。
下記のようにすればオブジェクト内に関数を定義する事が可能です。
|
1 2 3 4 5 6 7 8 9 10 |
let person = { name: "太郎", age: 25, addAge: function () { this.age++; } } person.addAge(); console.log(person.age); //26 |
ECMAScript2015だと「: function」を省略する事が可能になります。
|
1 2 3 4 5 6 7 8 9 10 |
let person = { name: "太郎", age: 25, addAge() { this.age++; } } person.addAge(); console.log(person.age); |
オブジェクトの分割代入
基本
|
1 2 3 |
let { a, b } = { a: 2, b: 3 } a; //2 b; //3 |
任意の名前をつける
下記のようにすればオブジェクトのプロパティ名ではなく任意の変数名に代入できます。
|
1 |
{ プロパティ名:任意の変数名} = {プロパティ名:値} |
実装する例は下記になります。
|
1 2 3 |
let { a: a_, b: b_ } = { a: 2, b: 3 } a_; b_; |
順番を無視して代入も可能
オブジェクトの分割代入は配列の分割代入と違ってキーを指定すればオブジェクトの中の要素の順番を無視して代入する事が可能です。
|
1 2 3 |
let { c, d } = { a: 2, b: 3, c: 4, d: 5 } c; d; |
関数の引数に渡して代入
|
1 2 3 4 5 6 |
let c = {} function hairetu({ a, b }) { c = { a, b } } hairetu({ a: 2, b: 3 }); c; //{ a: 2, b: 3 } |
デフォルト値
|
1 2 3 |
let { a, b = 3 } = { a: 2 } a; //2 b; //3 |
assign
オブジェクト同士をつなげる。
|
1 2 3 4 5 |
let obj = { name: "太郎" } let obj2 = { age: 25 } let obj3 = { perfecture: "東京" } let obj4 = Object.assign(obj, obj2, obj3); obj4; //{ name: '太郎', age: 25, perfecture: '東京' } |
この記事へのコメントはありません。