1. Simple attributes notation
ES6 allow direct write variables and functions, as object properties and methods. Such writing more concise.
const foo = 'bar'; const baz = {foo}; baz //{foo: "bar"} // equivalent const baz = {foo: foo}; baz //{foo: "bar"}
The above code indicates, ES6 allowed in the subject, write directly to variables. In this case, the variable name attribute name, attribute value the value of the variable. Here is another example.
function f(x, y){ return {x, y}; } // equivalent to the function F (X, Y) { return {X: X, Y: Y}; } f(1, 2); //{x: 1, y: 2}
In addition to the properties shorthand, the method may also abbreviated.
a = const { method (){ return "hello!"; } }; // equivalent const O = { method : function() { return "hello!"; } };
Here's another example.
let brith = '2000/01/01'; const Person = { name = 'Lisi' , // equivalent Birth: Birth Birth, hell() { // equivalent Hello: function () ... the console.log ( 'My name IS', the this .name); } };
The wording used for the return value of the function, will be very convenient.
function getPoint() { const x = 1; and const = 2 ; return {x, y}; } getPoint() //{x: 1, y: 2}
2. The property name expression
Javascript defined object properties, there are two methods.
@ Method a: directly as a property name identifier obj.name = 'Lisi' ; @ Method 2: expression as the attribute name, the expression in square brackets obj [ 'a' + 'bc '] = 123;
However, if a literal manner defined object (braces), a method using only attributes defined in the ES5. When ES6 allows literal definition of the object, using two methods as a property name of the object, i.e. the expression in square brackets.
let propKey = 'foo'; let obj = { [propKey]:true, ['a' + 'bc']: 123 };
Expressions can also be used to define the method name. Note that the property name expression with simple notation can not be used at the same time, it will complain.
// given const foo = 'bar' ; const bar = 'abc'; const baz = {[foo]}; // correct const foo = 'bar' ; const baz = {[foo]: 'abc'}
Note that if the attribute name if the expression is an object, by default objects are automatically converted to string [object, object].
const keyA = {a: 1 };
const keyB = {b: 2};
const myObject = {
[keyA]: 'valueA',
[keyB]: 'valueB'
};
myObject //{[object Object]: "valueB"}
In the above code, [keyA] and [keyB] are obtained [object, object], so that [keyB] will [keyA] overwritten, and only a last myObject [object, object] property.
3. The method of name attribute
The name attribute function returns the function name. A method is a function of the object, and therefore have a name attribute.
const person = { sayName() { console.log('hello!'); }, }; person.sayName.name //"sayName"
In the above code, name attribute method returns the name of the function (i.e. the method name)
If the method of the object using the function value (getters) and stored-value functions (the setter), instead of the name attribute in the method above, but the above-described properties get set object attributes method and the return value is the name of the former method plus get and set.
const person = { sayName() { console.log('hello!'); }, }; person.sayName.name //"sayName" const obj = { get foo() {}, set foo(x) {} }; //obj.foo.name TypeError: Cannot read property 'name' of undefined const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo'); descriptor.get.name //"get foo" descriptor.set.name //"set foo"
There are two special cases: function bind methods to create, name property returns bound together with the name of the original function; Function constructor function to create, name property returns anonymous.
(new Function ()).name //"anonymous" var doSomething = function (){}; doSomething.bind().name //"bound doSomething"
If the object is a method Symbol value, then returns the name attribute values describing the Symbol.
const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
[Key1] () {},
[key2]() {},
};
obj[key1].name //"[description]"
obj[key2].name //""
The above code, key1 Symbol corresponding values are described, key2 no.
4. traversal attribute and enumerable
Enumerable property
Each object has a property description object (Descriptior), for controlling the behavior of the attribute. Object.getOwnPropertyDescriptor ways to obtain the target properties.
let obj = { foo:123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
/* {
value: 123,
writable: true,
enumerable: true,
configurable: true
} */
enumerable properties that describe the object, referred to as "enumeration" of, if the property is false, meaning certain operations will ignore the current property.
Currently, there are four operating ignores enumerable attribute to false.
- for ... in loop: only traverse the object itself and inherited enumerable property
- Object.keys (): Returns the name of the object itself is the key to all enumerable properties
- Json.stringify (): Only the object itself may be serialized enumerated property
- Object.assign (): Ignore enumerable property is false, only a copy of the object's own enumerable properties
In addition, ES6 provisions, the prototype of all Class methods are not enumerable.
Overall, the property will make the introduction of the inherited problems complicate the operation, most of the time. We only care about the object's own properties. So try not to use for ... in loop, instead of using Object.keys ().
Traversal property
ES6 are a total of five kinds of methods can traverse the object's properties.
- for in: looping through the object's own enumerable and inheritable attributes (attributes not including Symbol)
- Object.keys (obj): returns an array, including the object itself (without inheritance) all enumerable properties (not including the Symbol Properties) key name
- Object.getOwnPropertyNames (obj): returns an array containing all the object's own properties (not including the Symbol property, including but not enumerated attribute) key name
- Object.getOwnPropertySymbols (obj): returns an array containing all the properties of the object itself Symbol key name
- Reflect.ownKeys (obj): returns an array containing all the key name of the object itself, regardless of the key name is Symbol or string, whether or not enumerable
More than 5 ways to traverse the object key name, all follow the same order of traversal rule properties.
- First, through all the numeric keys, arranged in ascending order of value.
- Secondly, the string through all keys, arranged in ascending order of addition time
- Symbol last traverse all keys, arranged in ascending order of addition time
Reflect.ownKeys({ [Symbol()]:0, b:0,10:0, 2:0,a:0})
// ["2", "10", "b", "a", Symbol()]
The above code, Reflect.ownKeys method returns an array containing all the attributes of the parameter object.
5. super keyword
We know, this keyword always refers to the current location of the object function, ES6 has added another similar keyword super, pointing to the current object's prototype object.
const proto = { foo: 'hello' }; const obj = { foo: 'world', find() { return super.foo; } }; Object.setPrototypeOf(obj, proto); obj.find(); //"hello"
In the above code, the object obj.find () method, by reference to the prototype object super.foo the proto foo properties.
Note, super keyword indicates prototype object, can only be used in the method of the object, an error will be used in other places
// given const obj = { foo: super.foo } const obj = { foo: () => super.foo } const obi = { foo: function (){ return super.foo } }
Three kinds of super above usage will be error, because for Javascript engines, super here are not used in the method of the object. The first super wording is used inside the property, the second and third wording is used in a super function inside, and then assigned to foo properties. Currently, only the object method of shorthand that allows javascript engine confirmed, is defined methods of the object.
6. The object operator expansion
Deconstruction assignment
Expand the operator
Reproduced in: https: //www.cnblogs.com/ly2019/p/11050447.html