Extension of objects

Enhancements to object literals

Object.is()

Object.assign()

Object.getOwnPropertyDescriptors()

Object.keys(), Object.values(), Object.entries()

  • Enhancements to object literals

Intra-object property abbreviation, intra-object method abbreviation, note that the abbreviation is function, not arrow function

Const obj = {// bar:bar bar, // method:function(){}, method(){// function console.log(); / / this point to obj}, [Math. The random ()] : 123, / / calculate attribute name (1 + 1] : 2}
  • Object.is()
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

There are only two differences with === : one is that +0 does not equal -0, and the other is that NaN equals itself.

Two class before the comparison can carry out type conversion, third class strictly judge type, object comparison address value

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

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
  • Object.assign()

The Object.assign() method is used to merge objects. Copies all enumerable properties of the source Object to the target Object.

The first argument is the target object, and all subsequent arguments are the source object

Property of the same name, the subsequent property overrides the previous property

The return value is the target object, at which point the BAR reference has been changed to the merged object

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

const result = Object.assign(target, source1, source2);   target // {a:1, b:2, c:3}

console.log(result === target) true
  • Object.getOwnPropertyDescriptors()

ES5 Object. GetOwnPropertyDescriptor () method returns an Object attribute description of Object (descriptor). ES2017 introduced Object. GetOwnPropertyDescriptors () method, which returns the specified all its attributes (not inherit property) a description of the 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 } }

The above code, the Object. GetOwnPropertyDescriptors () method 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

The main purpose of this method is to solve the problem that Object.assign() cannot properly copy the get and set attributes

const source = { set foo(value) { console.log(value); }}; const target1 = {}; Object.assign(target1, source); Object.getOwnPropertyDescriptor(target1, 'foo') // { value: undefined, // writable: true, // enumerable: true, // configurable: true }

In the above code, the value of the source Object’s foo property is an assignment function. The Object.assign method copies this property to the target1 Object, making the value of the property undefined. This is because the Object.assign method always copies the value of an attribute, not the underlying assign or accessor method.

. At this time, the Object getOwnPropertyDescriptors () method with the Object. The defineProperties () method, which can realize the correct copy.

const source = { set foo(value) { console.log(value); }}; const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); Object.getOwnPropertyDescriptor(target2, 'foo') // { get: undefined, // set: [Function: set foo], // enumerable: true, // configurable: true }
  • Object.keys(), Object.values(), Object.entries()
Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]
let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2