1. Object.is()

Used to address the weakness of the two equality operators in ES5. Used to compare whether two values are strictly equal, and the behavior is basically the same as (===).

In ES5, the only way to determine whether two values are equal is to use the (==) equality operator and the (===) strict equality operator, but both have disadvantages. The former values convert data types, and the latter NaN is not equal to itself and +0 == -0.

Object.is('foo', 'foo')  // true
Object.is({}, {})  // false

// 在 Object.is()

+0 === -0  // true
NaN === NaN // false

Object.is(+0, -0)   // false
Object.is(NaN, NaN) // true 
Copy the code

2. Object.assign()

Used for object merging to copy all enumerable properties of the source object to the target object, now commonly used for shallow copy.

const t = {a: 1} const s1 = {b: 2} const s2= {c: 3} object. assign(t, s2, s2) // t {a:1, b:2, c:3Copy the code

Note: If the target object and the source object have attributes with the same name, or multiple attributes with the same name, subsequent attributes will override the previous attributes.

const t = {a: 1, b: 2}
const s1 = {b: 3, c: 4}
const s2 = {c: 5}

Object.assign(t, s1, s2)
t // {a:1, b:3, c:5}
Copy the code

If object. assign has only one parameter, this parameter will be returned. If the parameter is not an Object, object. assign will be returned as an Object

const t = {a: 2}
Object.assign(t)
t // {a: 2}

Object.assigin(2)
// "object"
Copy the code

In addition, since null and undefined do not convert bitobjects, they will report an error if they are used as the first argument, but not if they are not

Object. The assign (undefined) / / an error Object. The assign (null) / / an error So as not to error: the following const t = {a: 2} Object.assign(t, undefined) // true Object.assign(t, null) // trueCopy the code

Other (numeric, string, Boolean) values are no longer the first and no error is reported, but the string is copied to the target object as an array, and nothing is done to the other two.

const a = 'abc' const b = true const c = 12 const o = Object.assign({}, a, b, c) o // {"0": "a", "1": "b", "2": "C "} // We cannot copy object. assign because number is PrimitiveValue [PrimitiveValue]]Copy the code

Obeject.assign is limited in that it can only copy the source object’s own properties, and cannot copy non-enumerable properties. In addition, properties of Symbol values can also be copied

Note:

1. The shallow copy

Object.assign implements a shallow copy, which means that if a source Object’s attribute value is an Object, the target Object gets a reference to that Object

2. Substitution of the same name attribute

If an attribute of the same name is encountered, the object. assign method is used to replace rather than append

3. Array processing

When dealing with arrays, object. assign treats them as objects, and overwrites rather than appends them if they have the same subscripts

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]
Copy the code

4. Processing of value functions

Object. Assign can only copy values. If the copied value is a function, the value will be copied after the function evaluation is complete

Common uses:

1. Add attributes for the object 2. Add methods for the object 3. Merge multiple objects 5. Specify default values for propertiesCopy the code

3. Object.getOwnPropertyDescriptors()

A description object that returns all its own properties (non-inherited properties) for the specified object

const o = { left: 123, top() { return 'new' } } Object.getOwnPropertyDescriptors(o) // { left:{ configurable: True Enumerable: True value: 123 Writable: true}, top: {video: manufacturer: ƒ Top () writable: True}} Object. GetOwnPropertyDescriptors () returns an Object, all of the original Object attribute names are attributes of the Object, the description of the corresponding attribute value is the attribute Object.Copy the code

4. __proto__ attribute, object.setProtoTypeof (), Object.getProtoTypeof ()

4.1. __proto__ properties

The prototype object used to read or set the current object, and this is an internal property. __proto__ is the called object.prototype. proto method

//es5 const o = {method: Function (){}} o.__proto__ = someOtherObj var o = object.create (someOtherObj) o.thod = function(){}Copy the code

4.2 Object. SetPrototypeOf ()

Used to set the prototype object of an object in the same way as __proto__, returning the parameter itself

Object. SetPrototypeOf (Object, prototype) const o = object.setPrototypeof ({}, Null) === function setPrototyoeOf(obj, Proto) {obj.__proto__ = proto return obj} // example let proto = {} let o = {x: } object.setPrototypeof (o, proto) proto.y = 20 proto.z = 40 o.x // 10 o.y // 20 o.z // 40 So you can read the properties of proto from oCopy the code

Note: If the first argument is not an object, it is automatically converted to an object. Since the first argument is still returned, this operation has no effect. Also, since undefined and null cannot be converted to an object, an error is reported if the first argument is either of these

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined
Copy the code

4.3 Object. GetPrototypeOf ()

The prototype Object used to read an Object is used with Object.setProtoTypeof. All features are the same as above, the first argument will be converted to an object if it is not an object, undefined and null will raise an error

5. object.keys (), object.values (), object.entries ()

5.1 the Object. The keys ()

Returns an array whose members take the key names of all traversable properties of the object itself

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// ["x", "y"]
Copy the code

5.2 the Object. The values ()

The return value is an array whose members are the values of all traversable properties of the object itself (not inherited). Objet.values returns only traversable properties of the object itself.

let obj = {
    x: 1,
    y: 'b'
}

Object.keys(obj)
// [1, "b"]
Copy the code

In addition, if an attribute named value is encountered during Object. Values traversal, the value will be traversed from small to large, as follows:

const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]
Copy the code

Note: Object.values filters properties with the property name Symbol

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']
Copy the code

If the argument to Object.values is a string then an array of string fragments is returned

Object.values('symbol')
["s", "y", "m", "b", "o", "l"]
Copy the code

Note: If object. values takes a Boolean value or a number, the return value is an empty array,

Object.values(true)
[]
Object.values(2,null)
[]
Copy the code

5.3 Object. Entries ()

Returns an array of key-value pairs of all traversable properties of the object itself (not inherited). Similarly, the values of the Symbol property are filtered.

const p = { f: 'b', az: 22 };
Object.entries(p)
// [ ["f", "b"], ["az", 22] ]


Object.entries({ [Symbol()]: 456, o: 'c' });
// [ [ 'o', 'c'] ]
Copy the code

Object.entries can be used to traverse Object properties

Object.entries Convert objects into real Map structures

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }
Copy the code

6. Object.fromEntries()

“Is the inverse operation of Object.entries, which turns an array of key-value pairs into objects. It is mainly used to restore the key-value pair’s data structure to an object, applicable to Map structure to an object

Object.fromEntries([ ['foo', 'bar'], ['baz', 42] ]) // { foo: "bar", baz: Const Map = new Map().set('foo', true).set('bar', false); Object.fromEntries(map) // { foo: true, bar: false }Copy the code

ES6 Introduction series

ES6 Introduction to let and cont

ES6 introduction to variable deconstruction assignment

ES6 starter string extension

ES6 – An extension to get started with re

ES6 introduction to numerical extension

Extension of ES6 introductory functions

ES6 introduction to the array extension

Extensions to ES6 starter objects

Git tutorial

Front-end Git basics tutorial