时间戳

首页 > 解决方案 > 使用 Object.keys() 与 Object.values() 从对象属性创建数组

javascript - 使用 Object.keys() 与 Object.values() 从对象属性创建数组

问题描述

这是猫品种的对象，以及每个对象中的猫数量：

const cats = {
  abyssinian: {
    number: 23
  },
  persian: {
    number: 12
  },
  siamese: {
    number: 7
  }
};

假设我想计算猫的总和。我将reduce用来计算数组值的总和。

但是要从上面的对象创建一个数组，我有两个选择：

  1. Object.keys()
  2. Object.values()

// object
const cats = { abyssinian: { number: 23 }, persian: { number: 12 }, siamese: { number: 7 } };

// sum array values with reduce
const total = numbers => numbers.reduce((acc, cur) => acc + cur);

// 1.
// create array with Object.keys()
const numbersByKeys = Object.keys(cats).map(breed => cats[breed].number);
console.log(`Sum with Object.keys(): ${total(numbersByKeys)}`);

// 2.
// create array with Object.values()
const numbersByValues = Object.values(cats).map(breed => breed.number);
console.log(`Sum with Object.values(): ${total(numbersByValues)}`);

我什么时候会选择其中之一？这里有哪些最佳实践？

标签： javascriptstringfunctionobjectecmascript-6

解决方案

如果.keys()您需要对键执行某些操作而不是检索值，请使用此选项。否则，您只能获取键以访问值，如果您可以使用不同的方法直接获取值，这是多余的 - 因此，在这种情况下，不妨Object.values()从头开始使用。

Object.keys一个可能有用的例子：

const obj = {
  prop1: 'val1',
  prop2: 'val2'
};

const result = Object.keys(obj).map((key) => [key, obj[key]]);
console.log(result);

您也可以使用Object.entries同时获取键和值：

const obj = {
  prop1: 'val1',
  prop2: 'val2'
};

const result = Object.entries(obj).map(([key, val]) => key + '---' + val);
console.log(result);

推荐阅读