- `Object.entries()` - `Object.keys` - `Object.values()`
对象静态方法
接下来我们有这些静态方法:
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));
在记录条目数组的行下方添加以下代码。
console.log(Object.entries(meats));console.log(Object.keys(meats));console.log(Object.values(meats));
如我们所见,keys()
将给我们一个包含所有对象键的数组,values()
将给我们一个包含所有值的数组,并将给我们entries()
一个数组,其中每个项目都是嵌套在其中的第二个数组,其中第一个嵌套数组中的项是键,第二项是值。
这些都是很常见的事情。
一种非常常见的处理方式是使用forEach
.
添加以下代码👇
Object.values(meats).forEach(qty => { console.log(qty);});
如果我们刷新 HTML 页面并查看控制台,我们应该会看到以下内容👇
这是一件很常见的事情,你想循环并加起来你有多少库存,或者你想加起来所有的数字,让我们看看你如何使用它reduce()
来做到这一点。
同样的事情是,如果我们要这样做keys
,而不是获取数量,我们将获取值并将它们放入数组中,然后循环它们。
Object.keys(meats).forEach(qty => { console.log(qty);});
Object.entries(meats).forEach(entry => { console.log(entry);});
对于每一个,我们都会得到一个包含 2 个项目的数组。
第一项永远是键,第二项永远是值。
如果我们想将它们分成自己的变量,我们可以执行以下操作👇
const key = entry[0];const value = entry[1];console.log(key, value);
我们已经讨论过在这种情况下非常有用的东西是解构。
我们可以这样做👇,而不是使用条目数组上的方括号和索引来获取每个项目
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);});
这些方法中的任何一种都没有错,它们都有效。
- 点赞
- 收藏
- 关注作者
评论(0)