Object Literal

Concise representation of attributes

ES6 allows the attributes of objects to write variables directly. At this time, the attribute name is the variable name and the attribute value is the variable value.

const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//Equivalent to
const person = {age: age, name: name}

Method names can also be abbreviated

const person = {
  sayHi(){
    console.log("Hi");
  }
}
person.sayHi();  //"Hi"
//Equivalent to
const person = {
  sayHi:function(){
    console.log("Hi");
  }
}
person.sayHi();//"Hi"

If it is a Generator function, an asterisk should be added in front of it:

const obj = {
  * myGenerator() {
    yield 'hello world';
  }
};
//Equivalent to
const obj = {
  myGenerator: function* () {
    yield 'hello world';
  }
};

Property name expression

ES6 allows you to use an expression as an attribute name, but be sure to put the expression in square brackets.

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

Note: the concise representation of attribute and the expression of attribute name cannot be used at the same time, otherwise an error will be reported.

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

Object extension operator

The extension operator (...) is used to take out all traversable properties of the parameter object and then copy them to the current object.

Basic Usage

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}
Can be used to merge two objects
let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  //{age: 15, name: "Amy"}

Note:
When the custom attribute is the same as the attribute in the extension operator object: if the custom attribute is behind the extension operator, the attribute with the same name in the extension operator object will be overwritten.

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

If the custom attribute is in front of the expansion operation degree, it becomes to set the default attribute value of the new object.

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

The extension operator is followed by an empty object, which has no effect and will not report an error.

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

The extension operator is followed by null or undefined, which has no effect and will not report an error.

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

New method of object

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

Used to copy all enumerable properties of the source object to the target object.
Basic Usage

let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);  
// The first parameter is the target object, and the following parameter is the source object
target;  // {a: 1, b: 2, c: 3

• If the target object and the source object have properties with the same name, or multiple source objects have properties with the same name, the subsequent properties will overwrite the previous properties.
• If the function has only one parameter, when the parameter is an object, the object is returned directly; When the parameter is not an object, it will be converted to an object and then returned.

Object.assign(3);         // Number {3}
typeof Object.assign(3);  // "object"

Because null and undefined cannot be converted into objects, an error will be reported:

Object.assign(null);       // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object
 When there is more than one parameter, null and undefined If the first one is not placed, that is, it is not the target object, it will be skipped null and undefined ，No error reporting
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

Attention

The attribute copy of assign is a shallow copy:

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

Replace attribute with the same name

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

Array processing

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

The array will be treated as an object, so first convert [2,3] to {0:2,1:3}, and then copy the attribute, so the 0 attribute of the source object overrides the 0 of the target object.

Object.is(value1, value2)

It is used to compare whether two values are strictly equal, which is basically similar to (= =).
Basic Usage

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

Difference from (= = =)

//First, + 0 is not equal to - 0
Object.is(+0,-0);  //false
+0 === -0  //true
//Second, NaN is equal to itself
Object.is(NaN,NaN); //true
NaN === NaN  //false