- `Object.entries()` - `Object.keys` - `Object.values()`

举报
搞前端的半夏 发表于 2022/04/30 22:21:49 2022/04/30
1k+ 0 0
【摘要】 对象静态方法接下来我们有这些静态方法:Object.entries()Object.keysObject.values()这些方法在对象上而不是在数组上。但是它们返回数组,这就是我们在这里介绍它们的原因。这个练习需要我们取出对象并用, ,meats组成 3 个数组。.entries()``.keys()``.values()这是我们的肉类对象👇const meats = { beyon...

对象静态方法

接下来我们有这些静态方法:

  • Object.entries()
  • Object.keys
  • Object.values()

这些方法在对象上而不是在数组上。但是它们返回数组,这就是我们在这里介绍它们的原因。

这个练习需要我们取出对象并用, ,meats组成 3 个数组。.entries()``.keys()``.values()

这是我们的肉类对象👇

const meats = {  beyond: 10,  beef: 5,  pork: 7,};

如果你想把这个对象变成一个键数组,或者一个值数组,或者两者兼而有之,这就是我们使用这些静态辅助方法的地方。

当我们Object.entries()想将键和值都放入数组时使用,如下所示:

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

使用 Object.entries() 方法显示肉类对象变成数组的浏览器控制台

在记录条目数组的行下方添加以下代码。

console.log(Object.entries(meats));console.log(Object.keys(meats));console.log(Object.values(meats));

使用 Object.keys() 方法显示肉类数组键条目的浏览器控制台

如我们所见,keys()将给我们一个包含所有对象键的数组,values()将给我们一个包含所有值的数组,并将给我们entries()一个数组,其中每个项目都是嵌套在其中的第二个数组,其中第一个嵌套数组中的项是键,第二项是值。

这些都是很常见的事情。

一种非常常见的处理方式是使用forEach.

添加以下代码👇

Object.values(meats).forEach(qty => {  console.log(qty);});

如果我们刷新 HTML 页面并查看控制台,我们应该会看到以下内容👇

使用 forEach 显示数组值条目的浏览器控制台

这是一件很常见的事情,你想循环并加起来你有多少库存,或者你想加起来所有的数字,让我们看看你如何使用它reduce()来做到这一点。

同样的事情是,如果我们要这样做keys,而不是获取数量,我们将获取值并将它们放入数组中,然后循环它们。

Object.keys(meats).forEach(qty => {  console.log(qty);});
Object.entries(meats).forEach(entry => {  console.log(entry);});

使用 forEach 显示数组条目的浏览器控制台

对于每一个,我们都会得到一个包含 2 个项目的数组。

第一项永远是,第二项永远是

如果我们想将它们分成自己的变量,我们可以执行以下操作👇

const key = entry[0];const value = entry[1];console.log(key, value);

浏览器控制台在拆分变量上显示键值对的 console.log

我们已经讨论过在这种情况下非常有用的东西是解构

我们可以这样做👇,而不是使用条目数组上的方括号和索引来获取每个项目

const [key, value] = entry;

该代码正在做的是获取条目数组中的第一项并将其分配给变量键,并获取第二项并将其分配给变量值。

这和👇完全一样

const key = entry[0];const value = entry[1];

我们甚至可以更进一步,在函数定义内部而不是在函数体中解构入口变量。

先修改这行代码👇

Object.entries(meats).forEach(entry => {

像这样包裹entry在括号里👇

Object.entries(meats).forEach((entry) => {

如果我们刷新页面,一切都应该仍然有效,添加这些括号我们什么也没做。

我们将不只是传递一个名为 的变量,entry而是将该entry数组直接解构。key``value

在函数体内你不需要做任何解构,我们可以直接记录键和值变量。

Object.entries(meats).forEach(([key, value]) => {  // const key = entry[0];  // const value = entry[1];  // const [key, value] = entry;  console.log(key, value);});

key并且value不是特殊名称,我们可以为它们命名任何我们想要的名称,例如这仍然有效👇

Object.entries(meats).forEach(([meat, qty]) => {  // const key = entry[0];  // const value = entry[1];  // const [key, value] = entry;  console.log(meat, qty);});

这些方法中的任何一种都没有错,它们都有效。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。