JavaScript 中优雅处理对象的6个方法

简介: 和其他编程语言一样,JavaScript 有自己的数据类型,如数字、字符串、数组、对象等。而对象在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个方法做了简单的介绍,并提供了相应的示例代码,在实际编码处理对象的过程中,使用上面的方法可以让代码变得更加优雅。


相关文章
|
14天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
14天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
16天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
17天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
23天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
|
17天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
14天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
3天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
7天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法