Object extension
5, AggregateError error object
1, Extension operator
The object extension operator is used to fetch all traversable properties of the parameter object and copy them to the current object.
Deconstruction assignment of extension operator cannot copy properties inherited from prototype object. Simple deconstruction assignment can read the inherited prototype object properties.
let father = { count: 10 };
let obj = { num: 2 };
obj.__proto__ = father;
let { ...newObj } = obj;
console.log(newObj); // { num: 2 }
console.log(newObj.count); // undefined
In the above code, the object newObj copies obj, but only the properties of obj itself, not the properties of its prototype object father.
The extension operator of an object is equivalent to using the Object.assign() method: when merging objects, attributes with the same name will be overwritten (the latter overwrites the former).
Object.assign(target, source1, source2) is used to merge objects and copy all enumerable attributes of the source object (source) to the target object (target). The first parameter is the target object, and the rest are source objects.
const obj = {
name: "Author",
age: 18
}
const a = {...obj, age: 20}; // { name:"Author", age: 20 }
const b = {age: 20, ...obj}; // {name:"Author", age: 18} (age: 20 is equivalent to setting the default value of the new object. If the object obj has no age attribute, the new object obtained after merging b = {age: 20, name:"Author"})
Arrays are special objects, and object operators can also be used for arrays.
const foo = { ...['a', 'b', 'c'] };
console.log(foo); // {0: "a", 1: "b", 2: "c"}
If the extension operator is followed by an empty object, there is no effect. The same is true for array extension operators.
If the extension operator is not followed by an object, it is automatically converted to an object.
{...1} // {} This is equivalent to {... Object(1)}
In the above code, the extension operator is followed by an integer 1, which will be automatically converted to a numeric wrapper object Number{1}. Since the object does not have its own properties, an empty object is returned.
If it is a string, it will be converted to a class array object. The array extension operator converts the string to a real array.
{...'hello'}; // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
Object extension operators can also be followed by expressions. The same is true for array extension operators.
In the parameter object of the extension operator, if there is a value taking function get, this function will be executed.
2, Enumerability
-
for...in loop: only traverses the object's own and inherited enumerable properties.
-
Object.keys(): returns the key names of all enumerable properties of the object itself.
-
JSON.stringify(): serialize only the enumerable properties of the object itself.
-
Object.assign(): ignore the attribute whose enumerable is false, and only copy the enumerable attributes of the object itself.
Among them, only for...in will return the inherited properties, and the other three methods will ignore the inherited properties and only process the properties of the object itself.
In fact, the original purpose of introducing the concept of enumerable is to make certain properties avoid the for...in operation, otherwise all internal properties and methods will be traversed. For example, the length attribute in the array is not traversed through enumerability.
ES6 stipulates that the prototype methods of all classes are non enumerable.
3, Property traversal (5 methods)
4, super keyword
super points to the prototype object of the current object.
The this keyword always points to the current object where the function is located.
const proto = {
foo: "Hello",
};
const obj = {
foo: "World",
find() {
return super.foo;
},
};
Object.setPrototypeOf(obj, proto);
console.log(obj.find()); // Hello
Note: when the super keyword represents a prototype object, it can only be used in the method of the object, and an error will be reported in other places.
// report errors
const obj = {
foo: super.foo,
};
// report errors
const obj = {
foo: () => super.foo,
};
// report errors
const obj = {
foo: function () {
return super.foo;
},
};
The above super usage will report errors. In the first case, super is written in the attribute. In the second and third methods, super is written in a function and assigned to the foo attribute. At present, only the abbreviation of object method can let the JavaScript engine confirm that it defines the method of object.