JS中reduce和map怎么写

开发技术 作者:iii 2024-05-09 12:20:02
这篇文章主要介绍了JS中reduce和map怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS中reduce和map怎么写文章都会有所收...

这篇文章主要介绍了JS中reduce和map怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JS中reduce和map怎么写文章都会有所收获,下面我们一起来看看吧。

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

JS中reduce和map怎么写

其中,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]

JS中reduce和map怎么写

其中,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
}

JS中reduce和map怎么写

其中,find方法的参数是一个回调函数,它接收一个参数:当前元素(item)。回调函数需要返回一个布尔值,表示当前元素是否符合条件。find方法会返回符合条件的第一个元素,如果没有符合条件的元素,则返回undefined。

在回调函数中,我们判断当前元素是否banana,如果是,则返回当前元素。最终得到了一个对象,其中只有name属性为'banana'的元素的price属性有值,其他元素price属性为undefined。我们可以使用if语句来判断是否找到了符合条件的元素,如果找到了,则输出它的price属性。

关于“JS中reduce和map怎么写”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JS中reduce和map怎么写”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注捷杰建站行业资讯频道。

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_25591.html
js reduce map