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数据扁平化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要为大家详细介绍了微信小程序实现导航栏选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
这篇文章主要介绍了javascript中的数据类型检测方法,结合实例形式分析了javascript数据类型并总结分析了常见的数据类型检测操作技巧,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了JS、CSS和HTML实现注册页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
尝试了好多种css属性，总是无法达成目标。主要就是height这个属性，100%，对于ff似乎并不起什么作用，既然我将其父容器的高度也设置为100%，依然没有效果。这样的话，就无法显示出平铺的背景，想法也得不到实现。2008-11-11
这篇文章主要介绍了JavaScript设置名字输入不合法的方法,需要的朋友可以参考下2017-05-05
javascript 动态table添加colspan\rowspan 参数的方法
动态的给某个表对象添加列属性和行属性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
下面小编就为大家带来一篇封装运动框架实战左右与上下滑动的焦点轮播图(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
JS 中forEach，for in、for of用法实例总结
这篇文章主要介绍了JS 中forEach，for in、for of用法,结合实例形式总结分析了JS 中forEach，for in、for of的基本功能、使用方法与相关注意事项,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了JavaScript实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论