ES6以後のEnhanced Object Literals(強化されたオブジェクトリテラル)をマスターする
Enhanced Object Literals
皆さんもご存知の通りES6(ES2015)以降、JavaScriptに数多くの新しい機能、構文が追加されました。代表的なものとしては変数let、アロー関数、Promise、スプレッド演算子、分割代入、クラス、For of、デフォルト引数などがありますが、今回はその中でもEnhanced Object Literalsについて備忘録も兼ねて簡単にまとめてみました。
Enhanced Object Literalとは?
直訳すると「強化されたオブジェクトの記法」といったところでしょうか。ES5以前のオブジェクトリテラルと比較して、以下の3つのオブジェクトリテラルが追加されています。
- 他のオブジェクトをオブジェクトに挿入する際のキーの省略
- メソッドの省略記法
- キーに動的な値の設定
他のオブジェクトをオブジェクトに挿入する際のキーの省略
オブジェクトを持つ変数を他方のオブジェクトに同名のkeyとともに格納する際の省略記法です。
// 旧
let fruits = [
orange: 100,
peach: 300,
apple: 120
];
let price = {
milk: 150,
rice: 2000,
fruits: fruits
};
↓
↓
// 新
let fruits = {
orange: 100,
peach: 300,
apple: 120
};
let price = {
milk: 150,
rice: 2000,
fruits // fruits: fruitsと等しい。キーを省略できる。
};
従来の記法ではfruits: fruits
というように変数名と同名のプロパティをキーとして記載する必要がありました。
しかし、ES6以後では以下の通り同名のキーを省略して書くことができます。
なお、当然ながら別名のキーで変数を格納する場合はキーを省略することはできません。fruitsPrice: fruits
のようにキーを明記します。
メソッドの省略記法
// 旧
let price = {
milk: 150,
rice: 2000,
fruits,
order: function (product) {
return `${product} has been ordered!`
}
};
↓
↓
// 新
let price = {
milk: 150,
rice: 2000,
fruits,
order(product) { // : functionを省略
return `${product} has been ordered!`
}
};
上記のようにオブジェクト内に関数(メソッド)が存在した場合、従来の記法ではプロパティ名: function() {}
というように関数式をvalueとして渡してあげる必要がありました。しかし、ES6以後の新記法ではセミコロンとfunctionを省略することが可能です。
キーに動的な値の設定
// 旧
let fruits = {
orange: 100,
peach: 300,
apple: 120
};
↓
↓
// 新
let fruitsStock = [orange, peach, apple];
let fruits = {
[fruitsStock[0]]: 100, // orange
[fruitsStock[1]]: 300, // peach
[`fruits ${1+2}`]: 120 // fruits 3
};
従来の記法ではプロパティは静的な値しか設定できませんでした。しかしES6以後の記法ではプロパティ名に変数名やテンプレートリテラルを使い動的な値を設定できます。プロパティ名を動的な値にする際にはプロパティを角括弧[]
で囲ってあげる必要があります。
まとめ
ES6で追加された他の機能たちと比べるとだいぶ影の薄いEnhanced Object Literalsですが、使いこなせば多少コードを綺麗に書くことができるのではないでしょうか。
Author And Source
この問題について(ES6以後のEnhanced Object Literals(強化されたオブジェクトリテラル)をマスターする), 我々は、より多くの情報をここで見つけました https://qiita.com/mizuno_jin/items/71b964515cd6a6d49972著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .