JavaScript中reduce与map及find的使用示例

reduce

1、利用 reduce 方法可对对象数组按指定 key 值进行求和计算

示例场景如下所示对象数组：

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

若需依据 price 属性执行求和操作，可参考如下代码实现：

const sum = arr.reduce((acc, cur) => acc + cur.price, 0);
console.log(sum); // 9

此处 reduce 方法的第一个参数为回调函数，接收累加器（acc）与当前元素（cur）两个参数。该回调函数的返回值将作为下次调用时累加器的值。reduce 方法的第二个参数设定为累加器的初始值，此处指定为 0。

在回调函数内部，执行累加器与当前元素 price 属性的相加操作，从而得出所有元素 price 属性的总和。

map

1、利用 map 方法可从对象数组中依据某一 key 值提取另一个 key 的值。

示例场景如下所示对象数组：

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

若需依据 name 属性获取 price 属性，可参考如下代码实现：

const prices = arr.map(item => item.name === 'banana' ? item.price : null);
console.log(prices); // [null, 3, null]

此处 map 方法的参数为回调函数，接收当前元素（item）一个参数。该回调函数的返回值将构成新数组的元素。在回调函数中，判断当前元素的 name 属性是否等于 'banana'，若是则返回当前元素的 price 属性，否则返回 null。最终生成一个新数组，其中仅 name 属性为 'banana' 的元素其 price 属性有值，其余元素的 price 属性均为 null。

2、利用 map 方法获取对象数组中依据某一 key 值得到的元素的 price 属性，亦可使用 find 方法来实现。

示例场景如下所示对象数组：

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

若需依据 name 属性获取 price 属性，可参考如下代码实现：

const banana = arr.find(item => item.name === 'banana');
if (banana) {
  console.log(banana.price); // 3
}

此处 find 方法的参数为回调函数，接收当前元素（item）一个参数。该回调函数需返回布尔值，以指示当前元素是否符合条件。find 方法将返回符合条件的第一个元素，若未找到符合条件的元素，则返回 undefined。

在回调函数中，判断当前元素是否为 banana，若是则返回当前元素。最终得到一个对象，其中仅 name 属性为 'banana' 的元素其 price 属性有值，其余元素 price 属性为 undefined。可通过 if 语句判断是否找到符合条件的元素，若找到，则输出其 price 属性。

至此，关于 JS 中 reduce 和 map 的优雅写法分享介绍完毕，更多相关 JS reduce map 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！