博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
6种你应该知道的强大JavaScript对象方法
阅读量:4118 次
发布时间:2019-05-25

本文共 2710 字,大约阅读时间需要 9 分钟。

英文 | https://javascript.plainenglish.io/the-6-powerful-javascript-object-methods-that-you-should-know-b2a659ddf3b5

翻译 | web前端开发

与任何其他编程语言一样,JavaScript具有自己的数据类型,例如,数字,字符串,数组,对象等。这些数据类型使开发人员可以使用数据并用该语言实现许多有用的功能。

对象是JavaScript中非常重要的数据类型,它们具有许多有用的内置方法,我们可以使用和访问这些方法,以帮助开发人员更轻松地处理对象。

这就是为什么在本文中,我们将学习一些你应该在JavaScript中了解的有用的对象方法。

现在,让我们开始吧。

1、Object.keys( )

该方法Object.keys( )(大写的O)用于返回一个数组,该数组包含我们作为参数传递给它的特定对象的所有键。

让我们看下面的例子:

const employee = {  name: "James",  age: 25,  available: true}//Print the keys in the consoleconsole.log(Object.keys(employee));//output: ["name", "age", "available"]

如你在上面的示例中看到的,我们得到一个包含键作为输出的数组。现在,你可以使用任何其他数组方法来访问和迭代键。

由于对象不具有length属性,因此,你也可以通过Object.keys( )用来获取对象的长度。

示例如下:

Object.keys(employee).length; //3

2、Object.freeze( )

该方法Object.freeze( )防止对象中的数据突变。因此,你不能将Object.freeze( )作为参数传递给对象,更不能添加,更新或删除属性。

看下面的例子:

const employee = {  name: "James",  age: 25,  available: true}//Freezing the object.Object.freeze(employee);//updating and adding properties.employee.name = "Brad";employee.newProp = "Hard Worker";console.log(employee);//Output: {name: "James", age: 25, available: true}

如你所见,即使我们更新了属性,该对象也不会更改。

3、Object.seal( )

该方法Object.seal( )有点类似于Object.freeze( )。它可以防止向对象添加新属性,但是可以更改和更新现有属性。

const user = {  name: "Alex",  age: 23,  isOnline: false}//使用Object.seal()Object.seal(user);//更新属性。user.isOnline = true;//添加一个属性。user.active = false;console.log(user);//输出:{名称:“ Alex”,年龄:23,isOnline:true}

该属性isOnline已更新,但是我们无法将该属性添加active到对象中,因为我们使用Object.seal( )它来防止这种情况的发生。

4、Object.values( )

该方法Object.values()允许你将对象内的所有值作为数组获取。你只需要将对象作为参数传递给方法Object.values()。

这是一个例子:

const user = {  name: "Alex",  age: 23,  isOnline: false}console.log(Object.values(user));//output: ["Alex", 23, false]

如你所见,你将获得一个对象值数组。现在,你可以使用该数组执行任何操作。

5、Object.entries( )

该方法Object.entries()也是有用的。它允许你同时获取对象的键和值,并返回一个多维数组,该多维数组包含每个键和值的其他数组。

让我们看一个实际的例子:

const user = {  name: "Alex",  age: 23,  isOnline: false}console.log(Object.entries(user));//output: [["name", "Alex"], ["age", 23], ["isOnline", false]]

如你在示例中所见,该方法Object.entries( )允许我们将键和值作为数组获取。

6、Object.create( )

该方法Object.create()用于从另一个现有对象的原型创建一个新对象。

看下面的例子:

const user = {  firstName: "John",  lastName: "Doe",  age: 25,  fullName(){    return `${this.firstName} ${this.lastName}`;  }}//新对象。let newObject = Object.create(user);//更新属性。newObject.firstName = "Mehdi";newObject.lastName = "Aoussiad";//我们也可以在此新对象中使用user的fullName方法。newObject.fullName();  //输出:Mehdi Aoussiadconsole.log(newObject);//输出:{firstName:“ Mehdi”,lastName:“ Aoussiad”}

在上面的示例中,我们用于Object.create()创建一个具有用户对象原型的新对象。这就是为什么我们能够更改属性并user在新对象中使用对象的方法的原因。如果你不想在对象中复制代码,这将非常有用。

结论

如你所见,这些对象方法在JavaScript中很有用,因为它们能够帮助开发人员更轻松地处理对象。在某些情况下,你肯定需要使用这些方法。

感谢您阅读本文。希望你觉得它有用。

本文完〜

学习更多技能

请点击下方web前端开发

转载地址:http://tobpi.baihongyu.com/

你可能感兴趣的文章
C 语言-static和extern关键字2-对变量的作用
查看>>
【JavaScript 教程】浏览器—History 对象
查看>>
还不会正则表达式?看这篇!
查看>>
100道+ JavaScript 面试题,助你查漏补缺
查看>>
JavaScript深入理解之闭包
查看>>
这才是学习Vite2的正确姿势!
查看>>
7 个适用于所有前端开发人员的很棒API,你需要了解一下
查看>>
25个构建Web项目的HTML建议,你需要了解一下!
查看>>
【web素材】02-10款大气的购物商城网站模板
查看>>
6种方式实现JavaScript数组扁平化(flat)方法的总结
查看>>
如何实现a===1 && a===2 && a===3返回true?
查看>>
49个在工作中常用且容易遗忘的CSS样式清单整理
查看>>
20种在学习编程的同时也可以在线赚钱的方法
查看>>
隐藏搜索框:CSS 动画正反向序列
查看>>
12 个JavaScript 特性技巧你可能从未使用过
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(上)
查看>>
【视频教程】Javascript ES6 教程27—ES6 构建一个Promise
查看>>
【5分钟代码练习】01—导航栏鼠标悬停效果的实现
查看>>
127个超级实用的JavaScript 代码片段,你千万要收藏好(中)
查看>>
8种ES6中扩展运算符的用法
查看>>