1. Abbreviation of attribute
In ES6, when the object key name is equal to the corresponding value name, it can be abbreviated
const baz = {foo:foo} // Equivalent to const baz = {foo}
Methods can also be abbreviated
const o = { method() { return "Hello!"; } }; // Equivalent to const o = { method: function() { return "Hello!"; } }
As a return value in a function, it will also become much more convenient
function getPoint() { const x = 1; const y = 10; return {x, y}; } getPoint() // {x:1, y:10}
Note: Shorthand object methods cannot be used as constructors, otherwise an error will be reported
const obj = { f() { this.foo = 'bar'; } }; new obj.f() // report error
Second, attribute name expression
ES6 allows expressions to be enclosed in parentheses when defining objects with literals
let lastWord = 'last word'; const a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"
Expressions can also be used to define method names
let obj = { ['h' + 'ello']() { return 'hi'; } }; obj. hello() // hi
Note that the attribute name expression and concise notation cannot be used at the same time, and an error will be reported
// Error reporting const foo = 'bar'; const bar = 'abc'; const baz = { [foo] }; // correct const foo = 'bar'; const baz = { [foo]: 'abc'};
Note that if the property name expression is an object, the object will be automatically converted to a string by default [object Object]
const keyA = {a: 1}; const keyB = {b: 2}; const myObject = { [keyA]: 'valueA', [keyB]: 'valueB' }; myObject // Object {[object Object]: "valueB"}
three, super keyword
The this
keyword always points to the current object where the function is located, and ES6 adds another similar keyword super
, which points to the prototype object of the current object
const proto = { foo: 'hello' }; const obj = { foo: 'world', find() { return super. foo; } }; Object.setPrototypeOf(obj, proto); // Set the prototype object for obj obj. find() // "hello"
Fourth, the application of the spread operator
In the destructuring assignment, the traversable properties that have not been read are assigned to the specified object
let { x, y, ... z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }
Note: The destructuring assignment must be the last parameter, otherwise an error will be reported
Destructuring assignment is a shallow copy
let obj = { a: { b: 1 } }; let { ... x } = obj; obj.a.b = 2; // Modify the key value in the a attribute in obj x.a.b // 2, affects the value of x from the structure
The object spread operator is equivalent to using the Object.assign()
method
5. Traversal of attributes
ES6 has a total of 5 methods to traverse the properties of an object.
-
for…in: Loop through the object’s own and inherited enumerable properties (excluding Symbol properties)
-
Object.keys(obj): returns an array, including the key names of all enumerable properties (excluding Symbol properties) of the object itself (excluding inherited ones)
-
Object.getOwnPropertyNames(obj): returns an array containing the key names of all properties of the object itself (excluding Symbol properties, but including non-enumerable properties)
-
Object.getOwnPropertySymbols(obj): returns an array containing the key names of all Symbol properties of the object itself
-
Reflect.ownKeys(obj): returns an array containing all the key names of the object itself (excluding inherited ones), regardless of whether the key name is a Symbol or a string, or whether it is enumerable
The above traversals all follow the same order rules for attribute traversal:
- First traverse all the numeric keys and sort them in ascending order
- Secondly, traverse all string keys and arrange them in ascending order of joining time
- Finally, traverse all Symbol keys and sort them in ascending order of joining time
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()]
6. Methods for adding objects
The methods for adding new objects are as follows:
- Object. is()
- Object. assign()
- Object. getOwnPropertyDescriptors()
- Object.setPrototypeOf(), Object.getPrototypeOf()
- Object.keys(), Object.values(), Object.entries()
- Object. fromEntries()
Object.is()
Strictly judge whether two values are equal, which is basically the same as the strict comparison operator (===), with only two differences: one is that + 0
is not equal to -0
, the second is that NaN
is equal to itself
+ 0 === -0 //true NaN === NaN // false Object. is( + 0, -0) // false Object.is(NaN, NaN) // true
Object. assign()
The Object.assign()
method is used for object merging, copying all enumerable properties of the source object source
to the target object target
The first parameter of the Object.assign()
method is the target object, and the following parameters are all source objects
const target = { a: 1, b: 1 }; const source1 = { b: 2, c: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3}
Note: The Object.assign()
method is a shallow copy, and will be replaced when encountering an attribute with the same name
Object.getOwnPropertyDescriptors()
Returns the description object of all its own properties (non-inherited properties) of the specified object
const obj = { foo: 123, get bar() { return 'abc' } }; Object. getOwnPropertyDescriptors(obj) // { foo: // { value: 123, // writable: true, // enumerable: true, // configurable: true }, // bar: // { get: [Function: get bar], // set: undefined, // enumerable: true, // configurable: true } }
Object.setPrototypeOf()
The Object.setPrototypeOf
method is used to set the prototype object of an object
Object.setPrototypeOf(object, prototype) // usage const o = Object.setPrototypeOf({}, null);
Object.getPrototypeOf()
The prototype object used to read an object
Object.getPrototypeOf(obj);
Object.keys()
Returns an array of key names of all enumerable properties of itself (not inherited)
var obj = { foo: 'bar', baz: 42 }; Object. keys(obj) // ["foo", "baz"]
Object.values()
Returns an array of values corresponding to the keys of all enumerable properties of its own (not inherited)
const obj = { foo: 'bar', baz: 42 }; Object. values(obj) // ["bar", 42]
Object.entries()
Returns an array of key-value pairs of all enumerable properties of the object itself (not inherited)
const obj = { foo: 'bar', baz: 42 }; Object. entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
Object. fromEntries()
Used to convert an array of key-value pairs into an object
Object.fromEntries([ ['foo', 'bar'], ['baz', 42] ]) // { foo: "bar", baz: 42 }