Question

这里是猫的品种，每种猫的数量：

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

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

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

// 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)}`);

我何时会选择一个？什么是最佳做法？

Answer 1

如果您需要用键 other 进行某些操作而不是检索值，请使用JSONObjects。否则，您只会获取键来访问值，如果您可以使用其他方法直接获取值，则这是多余的-因此，在这种情况下，一开始最好使用.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

Answer 2

由于实际上并没有使用按键，因此可以将reduce与Object.values结合使用并进行结构分解以使其更简单，更简洁：

const cats = {
  abyssinian: {
    number: 23
  },
  persian: {
    number: 12
  },
  siamese: {
    number: 7
  }
};

const totalCats = Object.values(cats).reduce((acc, { number }) => acc + number, 0);

console.log(totalCats);

Answer 3

Array.from(arrayLike [, mapFn [, thisArg]])也是从类似数组或可迭代对象创建数组的另一种方法，而且非常简单。第二个参数是一个映射函数，用于调用数组的每个元素

 const cats = {
    abyssinian: {
      number: 23
    },
    persian: {
      number: 12
    },
    siamese: {
      number: 7
    }
};
const catsArray = Array.from(Object.values(cats), breed => breed.number)
console.log(catsArray);

Answer 4

var total = Object
  .entries(cats)
  .reduce((acc, [name, {number}])=> acc + number , 0);
console.log(total); // 42

Answer 5

const iterableValues = function* (obj) { for (let i of Object.values(obj)) yield i;}
let result = 0;
for (let {number} of iterableValues(cats)) result += number;

Answer 6

如果要考虑性能，则可能要坚持使用Object.keys

这里是另一个人对迭代对象的不同方式的性能的比较。

“5 Techniques to Iterate Over JavaScript Object Entries and their Performance”

使用Object.keys（）与Object.values（）从对象属性创建数组

6 个答案: