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

该方法.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);

Answer 3

您还可以将新的动物数组传递给reduce方法，其中每只动物的年龄乘以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);