JavaScript对象处理技巧：Object.freeze/seal/keys/values/create/entries详解

前言

与其他编程语言类似，JavaScript 拥有多种数据类型，例如数字、字符串、数组和对象等。其中，对象是 JavaScript 中极为重要的数据类型，提供了丰富的内置方法，在日常项目开发中，利用这些方法可以便捷地对对象进行各种处理。

本文将介绍6个在实际项目中非常实用的对象处理方法，借此机会深入理解它们的具体用法。

1、Object.freeze()

Object.freeze() 方法用于防止对象中的数据被修改，即冻结一个对象。一旦对象被冻结，便无法向该对象添加、更新或删除任何属性。


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 }

如上面的代码所示，尝试更新属性name、新增属性province以及删除属性age，最终对象的状态均不会发生任何改变。

2、Object.seal()

Object.seal() 方法的功能与 Object.freeze() 有些相似。它阻止向对象添加新的属性或删除现有属性，但允许更改和更新已有的属性。


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 }

从上面的代码可以看出，新增属性和删除属性的操作均无效，只有更新属性name的操作生效了。

3、Object.keys()

Object.keys() 方法会返回一个数组，该数组包含参数对象的所有键的名称。数组中属性名的排列顺序与正常循环遍历该对象时返回的顺序一致。

看看下面的代码：


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

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

可以看到上面的代码中打印的结果是一个包含键作为输出的数组。输出的结果可以使用数组的方法进行处理或者迭代。


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

4、Object.values()

Object.values() 和 Object.keys() 类似，不过Object.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() 基于现有对象的原型__proto__创建一个新对象，先来看下面代码：


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

在上面的代码中，使用object. create()创建一个具有author对象原型的新对象newAuthor。这样在新对象newAuthor中可以像改变author对象所拥有的属性值一样改变相应的属性值，这个看起来是不有点像继承，没错，使用 Object.create 可以实现类式继承。

6、Object.entries()

Object.entries() 允许获取对象的键和值，返回一个多维数组，其中每一维包含每个键和值，如[键 , 值]


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

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

输出的结果如下：


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

总结

本文对对象常见的6个方法做了简单的介绍，并提供了相应的示例代码，在实际编码处理对象的过程中，使用上面的方法可以让代码变得更加优雅。

到此这篇关于JavaScript优雅处理对象的6种方法的文章就介绍到这了,更多相关JavaScript处理对象内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript处理对象的6种实用方法

前言