3 ways to create JavaScript objects

Preface:

In JavaScript , an object is an unordered collection of property names and property values. Objects can be created using object literals, the new keyword, and Object.create() function.

1. Object literals

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

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

2. The new keyword creates an object

Use the new keyword followed by a constructor 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+oy) //3

The new object o will inherit {x:1, y:2} . The properties x and y are called inherited properties. If the passed parameter is null , this object will not inherit any object. The inherited object is also called the "prototype".

Object.create(null)

4. Use the extension operator:...

ES2018 adds the spread operator ... to copy existing object properties to a new object

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

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

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

A few points to note:

• The extension operator only extends the object's own properties. Inherited properties do not support extension.
• If the extending object and the extended object have properties with the same name, the value of the property is determined by the latter object.

5. Use Object.assign() method

assign can copy the properties of one object to another object. assign accepts two or more parameters. The first parameter is the target object, and the second and subsequent parameters are the source objects. The function will copy the properties of the source object to the target object and return 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  

In addition, two new object features added in ES6

6. Abbreviated properties

If you want to create an object composed of multiple variable names and corresponding values, you need to construct 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}

After ES6 , you can directly abbreviate properties, omitting semicolons and property names

let o2 = {x, y}

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

7. Abbreviation method

When defining methods in an object, ES6 need to define them through function expressions, just like defining ordinary properties.

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

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

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

After ES6 , the colon and function keyword can be omitted to define object methods in a simple way.

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

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

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

This concludes this article about 3 methods of creating JavaScript objects. For more information about JavaScript object creation methods, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!