仕組み
キーは全て文字列(string)として扱われます。実際に「for in」を使った際に取り出せるキーのデータ型は全て文字列になっている。
キーの順番
for inやObject.keysをしたときのキーの順番は以下の順番にプログラムが自動でソートします。
- 整数値（小数の数値は勝手に並び替えられないので注意です。）
- 整数以外（文字列、関数、小数値など）は定義された順番
なお、整数値がstringであってもnumberであっても一律で同じように整数値として処理されます。ECMAScriptの仕様書上キーは全てstringになるためです。
注意点
for inやObject.keysで表示される順番とconsole.logなどで表示される順番はまた違います。なお、console.logで表示される順番に関してはブラウザによって違います。
ECMAScript2015(ES6)
同名メンバであれば簡潔な記述が可能になった（オブジェクトリテラル）
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); |
ゲッター
普通に関数で記述するよりもゲッターを使うと呼び出すときの丸括弧を省略できます。ただ、扱いとしてはプロパティみたいなものなので以下の例のような「getAge」などという名前はつけないです。プロパティ同士で計算して結果が欲しい場合などに使います。
|
1 2 3 4 5 6 7 8 9 |
const person = { name: "太郎", age: 24, get getAge() { return this.age; }, }; console.log(person.getAge); |
オブジェクトの分割代入
基本
|
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 |
Object.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: '東京' } |
スプレット構文でオブジェクトをつなげる場合と違って、既存オブジェクトを拡張するイメージになります。（スプレット構文の場合は新しいオブジェクトを作成します。）
Object.assignでも新しいオブジェクトを作りたい場合
以下のように一番左のオブジェクトを空オブジェクトに変更します。
|
1 2 3 4 |
let obj2 = { age: 25 } let obj3 = { perfecture: "東京" } let obj4 = Object.assign({}, obj2, obj3); obj4; |
一番左のオブジェクトを基準にして取り込んでいく挙動になるので全く新しいオブジェクトが生成される挙動になります。
プロパティの有無を調べる方法
|
1 |
'キー名' in オブジェクト |
キーが含まれればtrue、含まれなければfalseが返ります。
この記事へのコメントはありません。