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”作為數字 output（例如 84）返回。 有什么想法我在這里做錯了嗎？

Answer 1

.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 2

通過映射，你得到一個數字數組，然后你不需要求和的屬性。

一個好主意是使用累加器的起始值，並防止在第一個循環中使用數組的兩個第一個值。

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