filter、map、reduce结合使用_map和reduce方法连用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46978034/article/details/119090304

本文深入探讨JavaScript中的三个核心函数——filter、map和reduce的使用。通过实例解析它们如何协同工作，实现数据过滤、转换和聚合，提升代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [11, 44, 22, 333, 49, 90, 60];

        // 先来讲讲reduce()方法得使用 它得作用主要是对数组中得所有内容进行汇总
        // reduce可以进行传入很多得参数这里我们先简单得传入俩个参数进行讲解
        // 第一个参数:preValue:是上一次返回得值perValue名字不是固定得  item:是数组中每一个元素
        //第二个参数:是 0 代表初始话值 得意思 刚开始就是从0 开始相加得 
        let result = arr.reduce((preValue, item) => {
            return preValue + item
        }, 0)
        console.log(result); //609

        // 执行顺序如下
        // 第一次:preValue 0 item 11
        // 第一次:preValue 11 item 44
        // 第一次:preValue 55 item 22
        // 第一次:preValue 77 item 333
        // 第一次:preValue 410 item 49
        // 第一次:preValue 459 item 90
        // 第一次:preValue 549 item 60
        // 最终结果 609


        // filter、map、reduce结合使用 在实际开发中用得效率很高
        let arr1 = [10, 20, 111, 222, 444, 40, 50];
        let result1 = arr1.filter(function(item) {
            return item < 100;
        }).map(function(item) {
            return item * 2
        }).reduce(function(temp, item) {
            return temp + item
        }, 0)
        console.log(result1);
        // 也可以写成以下
        let result2 = arr1.filter(item => item < 100).map(item => item * 2).reduce((temp, item) => temp + item);
        console.log(result2);
    </script>
</body>

</html>