Three Methods of JavaScript Object Creation

Directory 1, object literal 2, new keyword to create object 3, using Object. create () to create object 4. Use the extension operator:... 5, use Object. assign () Method 6, Abbreviation Attribute 7, Abbreviation Method

Foreword:

In JavaScript Object is an unordered set of attribute names and attribute values. Object can be created by literal, new Keyword and Object.create() Function to create.

1. Object literal

let obj = {}  //  Empty object 
let obj2 = {a:1, b:2}

let obj3 = {" hel": "wold"}  //  If there are spaces in the property name, you can use a string literal as the property name 

2. new keyword creation object

Use new The constructor is called after the keyword to create a new object

let o = new Object(); //  Built-in constructor 

let m = new Math();

let a = new Array();

let d = new Date();

function Person(){  // Custom constructor 

}
let person = new Person()

3. Create an object using Object. create ()

let o = Object.create({x:1, y:2});
console.log(o.x+o.y) //3

The new object o inherits {x:1, y:2} The attributes x and y are called inherited attributes if the parameter passed in is null This object does not inherit any objects. Inherited objects are also called "prototypes".

Object.create(null)

4. Use the extension operator:...

ES 2018 adds an extension operator... to copy existing object properties to new objects

let foo  = {x:1, y:2}
let bar  = {z:3}

let zoo = {...foo, ...bar}

console.log(zoo) // {x:1, y:2, z:3}

Several points to pay attention to:

Extension operators only extend the object's own attributes, and inherited attributes do not support extension If the extended object and the extended object have an attribute with the same name, the value of the attribute is determined by the following object

5. Use the Object. assign () method

assign You can copy the properties of one object to another, assign Receives two or more arguments, the first being the target object and the second and subsequent being the source object. The function copies the properties of the source object to the target object and returns the target object.

let foo  = {x:1, y:2}
let bar  = {z:3}

let zoo = {}

let obj = Object.assign(zoo, foo, bar)

console.log(zoo)  // {x:1, y:2, z:3}

console.log(obj===zoo) // true  

Add two more ES6 Added object attributes in

6. Abbreviation Attributes

If you want to create an object composed of multiple variable names and corresponding values, you need to build the object like the traditional object literal syntax

let x=1, y =2;
let o = {x:x, y:y}

console.log(o) // {x:1, y:2}

ES6 After that, you can shorten the attribute directly, omitting the semicolon and attribute name

let o2 = {x, y}

console.log(o2) // {x:1, y:2}

7. Abbreviation method

When you define a method in an object, ES6 In the past, when defining methods, you need to define methods through functional expressions just like ordinary attribute 1

let point={
    x:1,
    y:2,

    area: function(){
        return this.x*this.y
    }
}

console.log(point.area()) //2

And ES6 You can then omit the colon and function Keyword, in a simple way to define the method of an object.

let point2={
    x:1,
    y:2,

    area(){
        return this.x*this.y
    }
}

console.log(point2.area()) //2