3.2.3 ES6 Objects

Object literals

Shorthand notation for properties

ES6 allows object properties to be written directly as variables; the property name is the variable name, and the property 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, add an asterisk in front:

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

Property name expressions

ES6 allows expressions to be used as property names, but the expression must be placed in square brackets.

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

Note: The shorthand notation for properties and property name expressions cannot be used at the same time, otherwise an error will be thrown.

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

Object spread operator

The spread operator (...) is used to extract all enumerable properties of the parameter object and 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"}

Notes

When custom properties have the same name as the properties in the spread operator object:If the custom property comes after the spread operator, the property with the same name inside the spread 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 property comes before the spread operator, it becomes setting default property values for the new object.

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

If the spread operator is followed by an empty object, it has no effect and does not throw an error.

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

If the spread operator is followed by null or undefined, it has no effect and does not throw an error.

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

New methods for objects

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

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

Basic usage

If the target object and a source object have a property with the same name, or multiple source objects have a property with the same name, the later property will overwrite the earlier one.
If the function has only one parameter, when the parameter is an object, it returns the object directly; when the parameter is not an object, it first converts the parameter into an object and then returns it.

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

Because null and undefined cannot be converted to objects, an error is thrown:

Object.assign(null); // TypeError: Cannot convert undefined or null to object Object.assign(undefined); // TypeError: Cannot convert undefined or null to objectWhen there is more than one parameter,nullandundefinedif it is not placed first, i.e., is not the target object, it will be skipped,nullandundefinedwithout throwing an error.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

Notes

assign's property copying 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

Replacement of properties with the same name

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

Handling of arrays

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

It treats arrays as objects, so [2,3] is first converted to {0:2,1:3}, and then property copying is performed, so property 0 of the source object overwrites property 0 of the target object.

Object.is(value1, value2)

Used to compare whether two values are strictly equal, basically similar to (===).