Extended application of Object method for ES6 knowledge point arrangement

Posted by Chris.P on Sun, 05 Apr 2020 04:31:33 +0200

In ES6, some extensions and optimizations have been made for the object-oriented methods. The following is a brief summary of the commonly used methods

is method to judge whether two objects are equal

console.log(Object.is({},{}), {} === {}); // false, false
console.log(Object.is(NaN,NaN), NaN === NaN); // true, false
console.log(Object.is(+0,-0), +0 === -0); // false, true

The assign method is used for copying object properties

If there are two parameters, copy the enumerable properties in the second parameter to the first parameter object, only the enumerable properties. If there are multiple parameters, copy the same

var obj = {};
var obj2 = Object.assign(obj,{name:'Joh'},{age:10});

console.log(obj === obj2, obj); // true, {name:'Joh', age:10}
console.log(Object.is(obj,obj2)); // true

Overlay copy of the same attribute

const DEFAULT_OPTIONS = {
  name:"Joh"
};
function test(opts) {
  let options = Object.assign({}, DEFAULT_OPTIONS, opts);
  console.log(options);
}
test(); // {name: "Joh"}
test({name:"Lily",age:10}); // {name: "Lily", age: 10}

The Symbol property is also copied

var skey1 = Symbol('test');
var skey2 = Symbol('test');
var obj = {};
Object.assign(obj,{name:'Joh'},{age:10},{[skey1]: 'I am test1'},{[skey2]: 'I am test2'}); // Copy
// Verify the copy of Symbol is successful
console.log(obj[skey1]); // I am test
console.log(obj); // {name: "Joh", age: 10, Symbol(test): "I am test1", Symbol(test): "I am test2"}

Object method: keys, getOwnPropertyNames, getOwnPropertySymbols, application of getOwnPropertyDescriptor

class A {
  constructor() {
    this.name = 'Joh';
  }

  [Symbol('fullnameA')] () {

  }
  getName() {

  }
}
class B extends A {
  constructor() {
    super();
    this.age = 22;
  }

  [Symbol('fullnameB')] () {

  }
  getAge() {

  }
}

B.prototype.getColor = function () {};

var b = new B();
// Note: you can only get [own enumerable properties], but not [properties on prototype chain (such as method) + Symbols properties]
console.log(Object.keys(b)); // ["name", "age"] 

// Note: you can obtain [enumerable properties], but not [properties on prototype chain + Symbols properties]
console.log(Object.getOwnPropertyNames(b)); // ["name", "age"] 

// You can't get enumerable properties on the prototype chain by using keys [method created by syntax sugar]
console.log(Object.keys(B.prototype)); // ["getColor"]
// Use getOwnPropertyNames to pass in prototype to get the properties on the prototype chain
console.log(Object.getOwnPropertyNames(B.prototype)); // ["constructor", "getColor", "getAge"]

// Through getOwnPropertySymbols, you can get its own Symbols property, but not the inherited Symbol property
console.log(Object.getOwnPropertySymbols(B.prototype)); // [Symbol(fullnameB)]

// Get its own enumerable attributes, including inherited ones. Note: the method of creating through the syntax sugar inside the class is not enumerable, but it is enumerable through the later B.prototype
for(let key in b) {
  console.log(key); // Output name, age and getColor in turn
}

// Describe object test enumerability
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getColor'));
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getColor').enumerable); // true
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getAge').enumerable); // false

Topics: Attribute