【ES6 basics 】 New methods of Object

Object Object is an important core content of JS. In the process of using JS, you will find that most of your work is in the operation of objects. ES6, ES7 and ES8 introduce many new methods.

This article will be introduced from the following aspects:

• More concise syntax
• Object.values()
• Object.entries()
• __proto__
• Object.is()
• Object.setPrototypeOf()
• Object.assign()
• Object.getOwnPropertyDescriptors()

The reading time for this article is expected to be 6 minutes

More concise syntax

Custom properties

We all know that define an object, it is necessary to clear the property name and the value of the corresponding attribute names and statement as a variable name (var a = {obj: obj}), ES6 and subsequent version allows us to use a short code statement object and attributes of the object is used to allocate to attribute the variables with the same name, we tend to declare variables, so the code is as follows:

var x = 1, y = 2;
var object = {
 x: x,
 y: y 
};
console.log(object.x); //output "1"Copy the code

But after ES6, you can

let x = 1, y = 2;
let object = { x, y };
console.log(object.x); Copy the code

Define methods

ES6 provides a new syntactic way to define objects. Example code is as follows:

let object = {
    myFunction(){
        console.log("Hello World!!!"); //Output "Hello World!!!"
    }
}
object.myFunction();Copy the code

We can see that the declaration attribute name is omitted, and the attribute name is the method name.

Compute attribute name

Object properties support computed property names. This allows expressions to be placed in [], and the result can be used as the attribute name.

let object = {
["first" + "Name"] :"Eden"}; //extract console.log(object["first" + "Name"]); 
//Output "Eden" console. The log (object); //Output "{ firstName: 'Eden'}"Copy the code

Object.values()

ES8 introduces the object.values () method, which outputs the values of all objects as an array, saving us from manually iterating out the values of each Object attribute. The example code is as follows:

const obj = {
    book: "Learning ES2017 (ES8)",
    author: "Front End guy",
    publisher: "Front End guy",
    useful: true
};
console.log(Object.values(obj));Copy the code

The above code will print:

[ 'Learning ES2017 (ES8)'.'Front-end talent'.'Front-end talent'.true ]Copy the code

Object.entries()

Object.entries() can be used to convert objects to an array of key/value pairs. A two-dimensional array, each element of which is an array of keys and values. Example code is as follows:

const obj = {
    book: "Learning ES2017 (ES8)",
    author: "Front End guy",
    publisher: "Front End guy",
    useful: true
};
console.log(Object.entries(obj));Copy the code

The above code will print:

[['book'.'Learning ES2017 (ES8)' ],
  [ 'author'.'Front-end talent' ],
  [ 'publisher'.'Front-end talent' ],
  [ 'useful'.true]]Copy the code

__proto__

Proto: is a built-in property owned by an object that is used internally by JS to find prototype chains. It can be understood as a pointer to the prototype object of the function object that created it (the prototype of the constructor). Prototype: a property of a Function (each Function has a prototype) that contains properties and methods shared by all instances of the Function.

The __proto__ attribute was not standardized in ES5, but due to its popularity, it was standardized in later versions. We can use the object.getProtoTypeof () method to return the value of the specified Object’s Prototype (internal [[Prototype]] property. We can use the Object.create() method to create a new Object, using the existing Object to provide the __proto__ of the newly created Object.

//In ES5
var x = {prop1: 12};
var y = Object.create(x, {prop2:{value: 13}});
console.log(y.prop1); //Output "12"
console.log(y.prop2); //Output "13"
console.log(x); // Output: {prop1: 12}
console.log(y); // Output: {prop2: 13}
console.log(y.__proto__); // Output: {prop1: 12}

//In ES6 onwards
let a = {prop1: 12, __proto__: {prop2: 13}};
console.log(a.prop1); //Output "12"
console.log(a.prop2); //Output "13"
console.log(a); // Output: {prop1: 12}
console.log(a.__proto__); // Output: {prop2: 13}Copy the code

In the ES5 example, the object Y inherits from the object X, the properties of x are hidden from y, and we can use __proto__ to find the property prop1 that inherits from X. In ES6 and beyond, you can add values directly to an object’s prototype chain.

Object.is()

The object.is () method is used to determine whether two values are equal. It is similar to the === operator, but the object.is () method has some special cases that are inconsistent with the result of using “===”, as shown in the following code:

console.log(Object.is(0, -0)); //falseconsole.log(0 === -0); //trueconsole.log(Object.is(NaN, 0/0)); //trueconsole.log(NaN === 0/0); //falseconsole.log(Object.is(NaN, NaN)); //trueconsole.log(NaN ===NaN); //falseCopy the code

The figure below shows the difference between using ==, === and object.is:

Object.setPrototypeOf()

The object. setPrototypeOf method can set a prototype for an existing Object and return a new Object. The object. setPrototypeOf method takes two arguments, the first an existing Object and the second a prototype Object. Object.setprototypeof () sets the prototype of the Object for obj.proto =…. It’s more elegant, it’s more compatible. The following code looks like this:

let x = {x: 12};
let y = {y: 13};
Object.setPrototypeOf(y, x);
console.log(y.x); //Output "12"
console.log(y.y); //Output "13" the console. The log (y); //Output "{ y: 13 }" console.log(y.__proto__); //Output "{ x: 12 }"Copy the code

Object.assign()

The object.assign () method is used to copy the values of all enumerable properties from one or more source objects to target objects. It will return the target object. It takes at least two objects as arguments, the first being the target object and the rest being the source object. The following code looks like this:

let x = {x: 12};
let y = {y: 13, __proto__: x};
let z = {z: 14, get b() {return2; }, q: {}}; Object.defineProperty(z,"z", {enumerable: false});
letm = {}; Object.assign(m, y, z); console.log(m.y); //13 console.log(m.z); //undefined console.log(m.b); //2 console.log(m.x); //undefined console.log(m.q == z.q); //trueCopy the code

From the above output, we can derive some characteristics of the object.assign () method:

• This method uses the source object’s [[Get]] and the target object’s [[Set]], so it calls the relevant getter and setter.
• It simply assigns the attribute values of the source to new or existing attributes of the target.
• It does not copy the [[prototype]] attribute of the source.
• JavaScript attribute names can be strings or symbols. Object.assign() supports both.
• The object. assign method copies only the enumerable properties of the source Object itself to the target Object.
• If an attribute in the target object has the same key, the attribute is overwritten by the attribute in the source. The attributes of the later source override the earlier attributes.
• To defined properties (including its enumerable) is copied to the prototype, the Object should be used. The getOwnPropertyDescriptor () and Object. The defineProperty ().
• Object.assign does not skip source objects whose value is [null] or [undefined].

Object.getOwnPropertyDescriptors()

Introduced in ES8 JS Object. GetOwnPropertyDescriptors () method returns all attributes of the given Object description, as shown in the following code:

const details = { 
    get food1() { return 'tasty'; },
    get food2() { return 'bad'; }}; console.log(Object.getOwnPropertyDescriptors(details));Copy the code

The above code will print:

{ food1:
   { get: [Function: get food1],
     set: undefined,
     enumerable: true,
     configurable: true },
  food2:
   { get: [Function: get food2],
     set: undefined,
     enumerable: true,
     configurable: true}}Copy the code

This method can also be used for object cloning, as shown in the following example:

const x = { foo: 1, __proto__: { bar: 2 } };
const y = Object.create( 
  Object.getPrototypeOf(x), 
  Object.getOwnPropertyDescriptors(x) 
);
console.log(y.__proto__); // { bar: 2 }Copy the code

section

Today’s content is here, we can see that ES6 on the use of objects, add a lot of new methods, properly used, can make our business code more concise and easy to read, we suggest that we use more in practice, deepen and understand its application scenarios.