JavaScript数组方法链接

Question

我正在尝试学习数组方法链接，并且正在使用一个基本示例-https://jsbin.com/surizinifi/edit?js,console

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, animal) => sum + animal.age)

console.log('ages', ages);

我将“ NaN”作为伪装返回到数字输出（例如84）。任何想法我在这里做错了吗？

Answer 1

通过映射，您得到一个数字数组，然后不需要求和的属性。

一个好主意是为累加器使用一个起始值，并避免在第一个循环中使用数组的两个第一个值。

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, age) => sum + age, 0)

console.log('ages', ages);

Answer 2

[C0方法返回数字的数组，没有求和的属性

.map()

.reduce((sum, age) => sum + age)

Answer 3

您还可以将一组新的动物传递给减少方法，在该方法中，每只动物的年龄乘以7：

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, age) => sum + age, 0)

console.log('ages', ages);