Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to understand ES6 objects". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas to study and learn "how to understand ES6 objects".

Object literal quantity

A concise representation of attributes

ES6 allows attributes of an object to write variables directly, where the property name is the variable name and the attribute value is the variable value.

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

The method name 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, precede it with an asterisk:

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

Attribute name expression

ES6 allows expressions as attribute names, but be sure to put expressions in square brackets.

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

Note: the concise representation of the attribute and the attribute name expression 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"}

Extension operator of the object

The extension operator (...) is used to fetch all traverable 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"}

Pay attention

When the custom property is the same as the property in the extension operator object: if the custom property is after the extension operator, the property with the same name inside 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}

The custom property is changed to set the default property value of the new object before expanding the degree of operation.

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 that 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 no error is reported.

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

A 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, followed by the source object target; / / {a: 1, b: 2, c: 3

If the destination object and the source object have properties of the same name, or if more than one source object has attributes of the same name, the following properties override the previous properties.

If the function has only one parameter, it is returned directly when the parameter is an object; when the parameter is not an object, the parameter is first converted to an object and then returned.

Object.assign (3); / / Number {3}

Typeof Object.assign (3); / / "object"

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

Object.assign (null); / / TypeError: Cannot convert undefined or null to objectObject.assign (undefined); / / TypeError: Cannot convert undefined or null to object when there is more than one parameter, null and undefined do not put the first, that is, if they are not the target object, null and undefined will be skipped and Object.assign will not be reported (1) undefined; / / Number {1} Object.assign ({a: 1}, null); / / {a: 1} Object.assign (undefined, {a: 1}) / / TypeError: Cannot convert undefined or null to object

Pay 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

Replacement of attributes with the same name

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

Array processing

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

The array will be treated as an object, so first [2p3] will be changed to {0ghead 2d1morph3}, and then the attribute will be copied, so the 0 attribute of the source object overrides the 0 of the target object.

Object.is (value1, value2)

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

Basic usage

Object.is ("Q", "Q"); / / trueObject.is (1dag1); / / trueObject.is ([1], [1]); / / falseObject.is ({QRV 1}, {Q falseObject.is}); / / false

The difference between () and ()

/ / one is that + 0 is not equal to-0Object.is (+ 0 true//); / / false+0 =-0 / / true// is that NaN equals itself Object.is (NaN,NaN) / / trueNaN = = NaN / / false Thank you for your reading, the above is the content of "how to understand ES6 objects". After the study of this article, I believe you have a deeper understanding of how to understand ES6 objects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.