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

This article mainly introduces the use of ES6 objects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The full name of ES6 is ECMAScript 6.0. it is the next version of JavaScript, released in 2015.06. ES6 is mainly to solve the inherent shortcomings of ES5. For example, there is no concept of class in JavaScript, but at present, the JavaScript of browsers is the ES5 version, and most high-version browsers also support ES6, but only some of the features and functions of ES6 are implemented.

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"} object extension operator

Extension operator (… 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} object's new method

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" will report an error because null and undefined cannot be converted to objects:

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 reading this article carefully. I hope the article "what's the use of ES6 objects" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.