JavaScript优雅处理对象的6种方法

更新时间：2021年12月01日 10:12:36 作者：天行无忌

大家好，本篇文章主要讲的是JavaScript优雅处理对象的6种方法，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下哦，方便下次浏览

前言

和其他编程语言一样，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 动态table添加colspan\rowspan 参数的方法$
javascript 动态table添加colspan\rowspan 参数的方法
动态的给某个表对象添加列属性和行属性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
2009-07-07
一些不错的js函数ajax
创建组件ajax回显等
2008-08-08
JS是按值传递还是按引用传递
在分析这个问题之前，我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。
2015-01-01
js中window.open()的所有参数详细解析
本篇文章主要是对js中window.open()的所有参数进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
js 蒙版进度条（结合图片）
js 结合图片实现的蒙版进度条效果。
2010-03-03
表格隔行换色升级版
表格隔行换色升级版,直接用javascript实现。
2009-11-11
JS+Canvas实现贪吃蛇小游戏
这篇文章介绍了JS+Canvas实现贪吃蛇小游戏，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
使用JavaScript触发过渡效果的方法
hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的，下面通过本文给大家介绍下
2017-01-01
效率高的Javscript字符串替换函数的benchmark
这是经常使用的HTML特殊字符替换函数，即将 &、<、>、" 等函数替换成 &、<、>、"。通常的作法都是连续使用数个 replace 函数，而Clear仅使用一个 replace 就完成了替换。
2008-08-08
Postman无法正常返回结果问题解决
这篇文章主要介绍了Postman无法正常返回结果问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08