オブジェクトリテラル

プロパティの省略記法

ES6では、オブジェクトのプロパティに直接変数を記述できます。この場合、プロパティ名は変数名、プロパティ値は変数値になります。

const age = 12; const name = "Amy"; const person = {age, name}; person //{age: 12, name: "Amy"} //次と同等です const person = {age: age, name: name}

メソッド名も簡略化できる

const person = { sayHi(){ console.log("Hi"); } } person.sayHi(); //"Hi" //次と同等です const person = { sayHi:function(){ console.log("Hi"); } } person.sayHi();//"Hi"

Generator関数の場合は、前にアスタリスクを付けます:

const obj = { * myGenerator() { yield 'hello world'; } }; //次と同等です const obj = { myGenerator: function* () { yield 'hello world'; } };

プロパティ名の式

ES6では式をプロパティ名として使用できますが、式は角括弧内に置く必要があります。

const obj = { ["he"+"llo"](){ return "Hi"; } } obj.hello(); //"Hi"

注意点:プロパティの省略記法とプロパティ名の式は同時に使用できません。使用するとエラーが発生します。

const hello = "Hello"; const obj = { [hello] }; obj //SyntaxError: Unexpected token } const hello = "Hello"; const obj = { [hello+"2"]:"world" }; obj //{Hello2: "world"}

オブジェクトの拡張演算子

拡張演算子(...)は、引数オブジェクトのすべての列挙可能なプロパティを取得し、現在のオブジェクトにコピーするために使用されます。

基本的な使い方

let person = {name: "Amy", age: 15}; let someone = { ...person }; someone; //{name: "Amy", age: 15}

2つのオブジェクトを結合するために使用できる

let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name}; person; //{age: 15, name: "Amy"}

注意点

カスタムプロパティと拡張演算子オブジェクト内のプロパティが同じ場合:カスタムプロパティが拡張演算子の後ろにある場合、拡張演算子オブジェクト内の同名のプロパティは上書きされます。

let person = {name: "Amy", age: 15}; let someone = { ...person, name: "Mike", age: 17}; someone; //{name: "Mike", age: 17}

カスタムプロパティが拡張演算子の前にある場合、新しいオブジェクトのデフォルトプロパティ値を設定することになります。

let person = {name: "Amy", age: 15}; let someone = {name: "Mike", age: 17, ...person}; someone; //{name: "Amy", age: 15}

拡張演算子の後ろが空のオブジェクトの場合、何の効果もなくエラーも発生しません。

let a = {...{}, a: 1, b: 2}; a; //{a: 1, b: 2}

拡張演算子の後ろがnullまたはundefinedの場合、何の効果もなくエラーも発生しません。

let b = {...null, ...undefined, a: 1, b: 2}; b; //{a: 1, b: 2}

オブジェクトの新しいメソッド

Object.assign(target, source_1, ···)

ソースオブジェクトのすべての列挙可能なプロパティをターゲットオブジェクトにコピーするために使用されます。

基本的な使い方

let target = {a: 1}; let object2 = {b: 2}; let object3 = {c: 3}; Object.assign(target,object2,object3); //最初のパラメータはターゲットオブジェクトで、後続のパラメータはソースオブジェクトです。 target; // {a: 1, b: 2, c: 3
  • ターゲットオブジェクトとソースオブジェクトに同名のプロパティがある場合、または複数のソースオブジェクトに同名のプロパティがある場合、後ろのプロパティが前のプロパティを上書きします。
  • この関数にパラメータが1つしかない場合、パラメータがオブジェクトならそのオブジェクトをそのまま返します。パラメータがオブジェクトでない場合は、まずパラメータをオブジェクトに変換してから返します。
Object.assign(3); // Number {3} typeof Object.assign(3); // "object"

null と undefined はオブジェクトに変換できないため、エラーが発生します:

Object.assign(null); // TypeError: Cannot convert undefined or null to object Object.assign(undefined); // TypeError: Cannot convert undefined or null to objectパラメータが複数ある場合、nullとundefined最初のパラメータを置かない場合、つまりターゲットオブジェクトでない場合はスキップされますnullとundefined、エラーは発生しません。Object.assign(1,undefined); // Number {1} Object.assign({a: 1},null); // {a: 1} Object.assign(undefined,{a: 1}); // TypeError: Cannot convert undefined or null to object

注意点

assign のプロパティコピーは浅いコピーです:

let sourceObj = { a: { b: 1}}; let targetObj = {c: 3}; Object.assign(targetObj, sourceObj); targetObj.a.b = 2; sourceObj.a.b; // 2

同名プロパティの置換

targetObj = { a: { b: 1, c:2}}; sourceObj = { a: { b: "hh"}}; Object.assign(targetObj, sourceObj); targetObj; // {a: {b: "hh"}}

配列の処理

Object.assign([2,3], [5]); // [5,3]

配列をオブジェクトとして処理するため、まず [2,3] を {0:2,1:3} に変換し、それからプロパティコピーを行います。そのため、ソースオブジェクトの 0 番目のプロパティがターゲットオブジェクトの 0 を上書きします。

Object.is(value1, value2)

2つの値が厳密に等しいかどうかを比較するために使用され、(===)と基本的に似ています。

基本的な使い方

基本的な使い方

Object.is("q","q"); // true Object.is(1,1); // true Object.is([1],[1]); // false Object.is({q:1},{q:1}); // false

(===)との違い

//1つ目は、+0 は -0 と等しくない Object.is(+0,-0); //false +0 === -0 //true //2つ目は、NaN はそれ自体と等しい Object.is(NaN,NaN); //true NaN === NaN //false