Detailed description of extension of the object in ES6 learning courses, and detailed description of extension of es6 Learning Courses

Detailed description of extension of the object in ES6 learning courses, and detailed description of extension of es6 Learning Courses

1. Concise representation of attributes

ES6 allows direct writing of variables and functions as attributes and methods of objects. This means that only attribute names are allowed in the object, and attribute values are not required. In this case, the property value is equal to the variable represented by the property name. The following is an example:

Attribute:

function getPoint(){ var x = 1 ; var y = 2; return {x,y}}

Equivalent

fucntion getPoint(x,y){ var x = 1 ; var y = 2; return {x:x,y:y}}

Test:

getPoint();//{x:1,y:10}

Function:

var obj = { fun(){ return "simply function"; }};

Equivalent

var obj = { fun: function(){ return "simply function"; }}

Test:

obj.fun();//simply function

Ii. attribute name expression

When defining an object in ES6, the expression is used as the object's attribute name or method name, that is, the expression is placed in square brackets.

Attribute

let propKey = 'foo';let obj = { [propKey] : true, ['a'+'bc'] : 123}

Test:

obj.foo; //trueobj.abc ; //123

Method

let obj = { ['h'+'ello'](){ return "hello world"; }}

Test:

obj.hello();//hello world

Note:

Attribute name expressions and description expressions cannot be used at the same time.

// The error var foo = 'bar'; var bar = 'abc'; var baz = {[foo]}; // The correct var foo = 'bar '; var baz = {[foo]: 'abc '}

Iii. method name attributes

This is easy to understand and can be explained directly.

The name attribute of the function returns the function name. Object methods are also functions, so there are also function names.

• Generally, the name attribute of the method returns the function name.
• For a value function, "get" is added before the function name"
• For a stored value function, "set" is added before the function name"
• If the function created by the bind method is added with "bound" before the function name"
• If the Function is created by the Function constructor, "anonymous" is added before the Function name"
• If the object method is a Symbol value, the name attribute returns the description of this Symbol value *
  

4. Oject. is ()

Object.is()Used to compare two values of yan 'ge, which are strictly equal. The behavior is basically the same as that of the strict price comparison operator (=. There are only two differences: one is that + 0 is not equal to-0, and the other is that NaN is equal to itself.

+0 === -0 //trueNaN === NaN //falseObject.is(+0,-0);//falseObject.is(NaN,NaN);//true

V. Oject. assign ()

Object.assign()You can copy the enumerated attributes of the source object to the target object. It requires at least two parameters. The first is the target object, followed by the source object.

Note:

• Each parameter must be an object; otherwise, a TypeError error is reported.
• If the target object has an attribute with the same name as the source object or multiple source objects have the same name, the subsequent attributes overwrite the previous attributes.
• Object.assignOnly copying its own attributes. Non-enumerated attributes and inherited attributes will not be copied.
• The attribute named Symbol value will also be Object. Assign replication.
  

Demo:

var target = {a:1,b:2};var source1 = {a:2,c:5};var source2 = {a:3,d:6};Object.assign(target,source1,source2);target//{a:3,b:2,c:5,d:6}

Object.assignIt can be used to process arrays, but is considered an object.

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

Other functions

• Add attributes to an object
• Add Method for Object
• Clone object
• Merge multiple objects
• Specify the default value for the property
  

6. Enumeration of attributes

No attribute of an object has a description object (Descriptor ).Object.getOwnPropertyDescriptor(object,prop), Object indicates the object, and prop indicates an attribute of the object. You need to add quotation marks when using it. The description object contains an enumerable attribute to describe whether the attribute can be enumerated.

In ES5, attributes with enumerable set to false are ignored.

• for…inLoop: only the object itself and the inherited enumerated attributes (including inheritance) are traversed)
• Object.keys(): Return the key names of all the enumerated attributes of the object.
• Json.stringify(): Serializes only the enumerated attributes of an object.
  

Operations added in ES6

• Object.assign(): Only copies the enumerated attributes of the object.
• Reflect.enumerate(): Returns allfor…inAttributes that the loop will traverse (including inheritance)
  

7. Attribute Traversal

ES6 contains six methods to traverse object attributes.

• for…inCyclically traverse the object itself and its inherited enumerated attributes (excluding the Symbol attribute)
• Object.keys(obj)Returns an array, including all the enumerated attributes of the object itself (excluding the inherited attributes) (excluding the Symbol attribute, but including the non-enumerated attributes)
• Object.getOwnPropertySymbols(obj)Returns an array containing all the Symbol attributes of the object.
• Relect.ownKeys(obj)Returns an array that contains all the attributes of an object. The attribute name can be a Symbol or a string, regardless of whether the attribute can be enumerated.
• Reflect.enumerate(obj)Returns an Iterator object that traverses all the enumerated attributes (excluding Symbol) of the object and its inheritance, and... Same as in

The above six methods follow the same property traversal order rules to traverse object attributes.

• First, traverse all attributes named numeric and sort by number.
• Next, traverse all properties named string and sort by generation time
• Finally, the system traverses all the attributes named Symbol values and sorts them by generation time.

Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0})//[‘2','10','b','a',Symbol()]

8. proto attributes, Object. setPrototypeOf (), Object. getPrototypeOf ()

Proto attributes

(There should be two underscores between the front and back, which are not shown here ). It is used to read or set the prototype object of the current object. However, this attribute is generally not operated directly, but throughObject.setProtortypeOf() (Write operation ),Object.getPrototypeOf()(Read operation) orObject.create() (Generate operation.

Object.setProtortypeOf()

let proto = {};let obj = { x : 10};Object.setProtortypeOf(obj,proto);proto.y = 20;proto.z = 40;obj.x //10obj.y //20obj.z //40

Object.getProtortypeOf()

function Rectangle(){}var rec = new Rectangle();Object.getPrototypeOf(rec) === Rectangele.prototype // true

9. extension operators of Objects

Proposed in ES7, the rest parameter/extension operator (...) Import object.

Rest Parameters

The Rest parameter is used to set an object value, which is equivalent to allocating all attributes that can be traversed and not read to a specified object. All keys and their values are copied to the new object. Note that the replication of the rest parameter is a shortest copy, and does not copy the attributes inherited from the prototype object.

Simple demo

 let {x,y,...k} = {x:2, y:3,z:4,a:5};x //2y //3k //{z:4,a:5}

Extended Operators

The extension operator is used to retrieve all the traversal attributes of the parameter object and copy them to the current object.

let z = {a:3 ,b:4};let n = {...z};n //{a:3,b:4}

The extension operator can also combine two objects.

let a = { c:5,d:6 };let b = { e:7,f:8 };let ab = {...a,...b};ab //{c:5,d:6,e:7,f:7}

The extension operator can also customize attributes and overwrite the original parameters in the new object.

let a = {x:1,y:2};let aWithOverides = {...a,x:3,y:4};aWithOverides //{x:4,y:4}

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.