JavaScript 数组方法链接答案

【问题标题】：JavaScript array method chainingJavaScript 数组方法链接
【发布时间】：2019-09-30 08:36:34
【问题描述】：

我正在尝试学习数组方法链接并且正在使用一个基本示例 - 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）的姿势返回。有什么想法我在这里做错了吗？

【问题讨论】：

在您的 reduce 中，您不会生成 animal 对象，而是生成 animalAge 数字 - 上一步中的 map 为您提供了一个数字数组。
你可以很容易地调试这个问题。

标签： javascript arrays chaining

【解决方案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);

【讨论】：

【解决方案2】：

方法.map()返回数字的数组，没有要求和的属性

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

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);

【讨论】：

【解决方案3】：

您还可以将新的动物数组传递给 reduce-method，其中每只动物的年龄乘以 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: animal.age * 7
   }))
  .reduce((sum, animal) => sum + animal.age, 0)

console.log('ages', ages);

【讨论】：