[ES6] object extension

1、 A concise representation of an attribute

ES6 Allow direct writing of variables and functions , Properties and methods as objects

const foo = 'baz'
const bar = {
    foo}
console.log(bar)    //{foo: 'baz'}
// Equate to 
const bar = {
    foo: foo}

ES6 Allow variables to be written directly in objects , At this time , Property name is variable name , Property value is variable value

function fn(x,y){
    
    return {
    x,y}
}
// Equate to 
function fn(x,y){
    
    return {
    x: x, y: y}
}
fn(1,2)    //Object {x: 1, y: 2}

2、 A concise representation of a method

const obj = {
    
    method(){
    
        return 'hello'
    }
}

// Equate to 
const obj = {
    
    method: function(){
    
        return 'hello'
    }
}

3、 Property name expression

JavaScript Define the properties of an object , There are two ways .

// Method 1 
obj.foo = true

// Method 2 
obj['a' + 'bc'] = 123

The first method is to directly use the identifier as the variable name
The second method is to use the expression as the attribute name , Put the expression in square brackets

ES6 When you allow literals to define objects , Use method 2 （ expression ） As the property name of the object , Put the expression in square brackets

let = propKey = 'foo'
let obj = {
    
    [propKey]: true,
    ['a' + 'b']: 123,
    ['h' + 'ello']() {
    
        return 'hi'
    }
}
obj.hello()    //hi
obj[propKey]    //true
obj['foo']    //true

Be careful ： Property name expression and concise notation cannot be used at the same time , Will report a mistake

// Report errors 
const foo = 'bar'
const bar = 'abc'
const baz = {
    [foo]}
// correct 
const foo = 'bar'
const baz = {
    [foo]: 'abc'}

4、 Methodical name attribute

Functional name Property returns the function name . Object methods are also functions , So there is name attribute

const person = {
    
    sayName() {
    
        console.log('hello')
    }
}
person.sayName.name     //sayName

5、 Enumerability and traversal of properties

Enumerability

Each attribute of an object has a description object （Descriptor), Used to control sexual behavior .
Object.getOwnPropertyDescriptor Method to get the description object for the property

let obj = {
    foo: 123}
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
    
// value: 123,
// writable: true,
// enumerable: true,
// configurable: true
//}

Describing the object enumerable attribute , be called ” Enumerability “, If the property is false, It means that some operations will ignore the current property .

at present , There are four operations that will be ignored enumerable by false Properties of

• for...in loop ： Only the inherited enumerable properties of the object itself are traversed .
• Object.keys()： Returns the key name of the enumerable property of the object itself
• JSON.stringify()： Serialize only the enumerable properties of the object itself
• Object.assign()： Ignore enumerable by false Properties of , Copy only the enumerable properties of the object itself

Property traversal

ES6 Altogether 7 There are two ways to traverse the properties of an object
（1）for…in
for...in Loop through the object's own and inherited enumerable properties （ Not included Symbol attribute ）
（2）Object.keys(obj)
Object.keys Returns an array , Including the object itself （ Without inheritance ） All enumerable properties （ Not included Symbol attribute ） Key name of
（3）Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames Returns an array , Contains all the properties of the object itself （ It doesn't contain Symbol attribute , But include enumerable properties ） Key name of .
（4）Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols Returns an array , Contains all of the object itself Symbol The key name of the property .
（5）Reflect.ownKeys(obj)
Reflect.ownKeys Returns an array , Contains all the key names of the object itself , Whatever the key name is Symbol Or a string , It doesn't matter whether it's enumerable or not .
（6）Object.values(obj)
Object.values(obj) Returns an array of object property values
（7）Object.entries(obj)
Object.entries(obj) Returns an array of object key value pairs

let obj = {
    
    name: 'zhangsan',
    age: 18,
    gender: ' male '
}
/* for-in  Traverse , Can only traverse objects  */
for(let item in obj){
    
    console.log(item)
}
let keys = Object.keys(obj)
let values = Object.values(obj)
let entries = Object.entries(obj)
// Or use for...of Traversing objects entries
for(let [key, value] of entries){
    
    console.log(key,values)
}

6、 Deconstruct assignment

The deconstruction assignment of an object is used to take values from an object , It is equivalent to all traversable objects of the target object （enumerable), But properties that have not been read , Assign to the specified object . All the keys and their values , Will be copied to the new object .

let {
    x, y, ...z} = {
    x: 1, y: 2, a: 3, b: 4}
x //1
y //2
z // {a: 3, b: 4}
// Variable z Is the object that deconstructs the assignment . It gets all unread keys to the right of the equal sign , Copy them along with the values 

7、Object.is(val1,val2)

Equal in value , And === similar , The difference is ：

1. +0 It's not equal to -0
2. NaN be equal to NaN

console.log(Object.is(+0, -0))  //false
console.log(Object.is(NaN,NaN)) //true
// In addition to the above two cases , Others follow  ‘===’  equally 
console.log(Object.is(true,'true')) //false

8、Object.assign(target,o1,o2…)

For merging objects , Put the source object （source） All enumerable properties of , Copy to target object （target）. Object.assign The method is Shallow copy , Not a deep copy . in other words , If the value of a property of the source object is an object , So what the target object copies is the reference of this object . It has the following functions ：

• Add properties and methods to objects

  Object.assign(SomeClass.prototype, {
    
  someMethod(arg1, arg2) {
     ··· },
  anotherMethod() {
     ··· }
  });

• Clone objects

  function clone(origin) {
     return Object.assign({
    }, origin); }

• Provide default values for attributes

  function processContent(options) {
    
  	options = Object.assign({
    }, DEFAULTS, options);
  	//...
  }
  // In the above code ,DEFAULTS Object is the default value ,options Object is a user supplied parameter .

.postCon a:link {
    
    text-decoration: none;
    color: blueviolet;
}
a.c_b_p_desc_readmore {
    
    color: blueviolet;
}