Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Instance Analysis of ES6 object

2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article introduces the relevant knowledge of "ES6 object instance Analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

A concise representation of the literal attribute of an object

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} method name can also be abbreviated to 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"} 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: pay attention to Cannot convert undefined or null to object

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 (1Magne1); / / trueObject.is ([1], [1]); / / falseObject.is ({Q _ trueObject.is}, {Q _ trueObject.is}); / / false

The difference between () and ()

/ / one is that + 0 is not equal to-0Object.is (+ 0 0Object.is); / / false+0 =-0 / / true// second is that NaN equals itself Object.is (NaN,NaN); / / trueNaN = NaN / / false "ES6 object instance Analysis" ends here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.

Views: 234

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report