6 Ways to Elegantly Handle Objects in JavaScript

Preface

Like other programming languages, JavaScript has its own data types such as numbers, strings, arrays, objects, etc. Objects are a very important data type in JavaScript. They have many useful methods that can be used to easily handle objects in daily project development.

This article introduces 6 methods that can be used in projects. Take this opportunity to deepen your understanding of their usage.

1. Object.freeze()

Object.freeze() method prevents the data in an object from being modified, that is, it freezes an object so that properties cannot be added, updated, or deleted from the object.

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.freeze(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }

As shown in the code above, the attribute name is updated, the attribute province is added, and the attribute age is deleted, but there is no change in the final object.

2. Object.seal()

Object.seal() method is somewhat similar to Object.freeze() . Prevents adding new properties to an object and removing properties, but allows changing and updating existing properties.

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.seal(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }

As you can see from the above code, adding new attributes and deleting attributes are invalid, only updating the attribute name is effective.

3. Object.keys()

Object.keys() method returns an array containing the names of all the keys of the parameter object. The order of the attribute names in the array is consistent with the order returned when traversing the object normally.

Take a look at the following code:

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]

You can see that the result printed in the above code is an array containing the keys as output. The output results can be processed or iterated using array methods.

console.log(Object.keys(author).length); // 4

4. Object.values()

Object.values() is similar to Object.keys() , but Object.values() gets the values ​​of all attributes in the object and returns an array of values.

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]

5. Object.create()

Object.create() creates a new object based on the prototype __proto__ of an existing object. Let's look at the following code:

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

const newAuthor = Object.create(author);
console.log(newAuthor); // {}
newAuthor.firstName = "Ronb";
newAuthor.lastName = "Joy";
console.log(newAuthor.fullName()); // Ronb Joy

In the above code, object. create() is used to create a new object newAuthor with the prototype of author object. In this way, in the new object newAuthor you can change the corresponding attribute values ​​​​just like changing the attribute values ​​​​of author object. Doesn’t this look a bit like inheritance? Yes, class inheritance can be achieved using Object.create .

6. Object.entries()

Object.entries() allows you to get the keys and values ​​of an object, returning a multidimensional array where each dimension contains each key and value, such as [鍵, 值]

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(Object.entries(author));

The output is as follows:

[
  [ 'firstName', 'Quintion' ],
  [ 'lastName', 'Tang' ],
  [ 'fullName', [Function: fullName] ]
]

Summarize

This article briefly introduces the six common methods of objects and provides corresponding sample codes. In the actual process of coding and processing objects, using the above methods can make the code more elegant.

This concludes this article about 6 ways to elegantly process objects in JavaScript. For more content related to JavaScript processing objects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!