使用 forEach map filter reduce 分别遍历数组

最新推荐文章于 2024-07-06 16:47:02 发布

麦兜的明天

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量159

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ll123456789_/article/details/127709646

版权

不同需求会用到不同的遍历方式，以下是麦兜的小小总结

对于任何函数，首先要关注参数与返回值。

一个函数的返回值就是函数最后的return出来的内容，一个函数没有返回值，得到结果就是undefined。

forEach 函数

forEach 函数它的参数是一个函数函数的内部还有一些参数item,index 即当前的每一项和索引，它没有return 返回值

map函数

map是将数组里面每个元素加工,再返回出去,必须要写return

filter函数

filter函数可以过滤只留下需要的数据返回的是一个新数组，它的参数是一个函数，这个函数也有两个参数 item和index

返回值是过滤后的新数组一定是数组可能为空数组

reduce函数

react框架里面有很多这个函数使用

它有两个参数第一个参数是函数第二个参数是初始值(可以不写)

<!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>
        const arr=[10,20,30,40]

        //注意： 一个函数没有return返回值 得到的就是undefined

        // forEach遍历数组 它没有return返回值 你非要返回值的话就是undefined
        const res1=arr.forEach((item,index)=>{
            // 这里打印次数就是数组的长度
            console.log('打印次数');
        })
        console.log(res1); //undefined 

        // filter遍历数组 可以过滤 只留下需要的数据 返回的是一个新数组
        const res2=arr.filter((item,index)=>{
            return item>20
        })
        console.log(res2);//[30,40]

        // map遍历数组 可以对数组的数据进行加工 
        const res3=arr.map((item,index)=>{
            return item*item
        })
        console.log(res3);//[100,400,900,1600]

        // reduce遍历数组 react框架里面 有很多这个函数使用
        // reduce有两个参数 第一个参数是函数  第二个参数是初始值(可以不写)
       const res4=arr.reduce((sum,item,index)=>{
            sum+=item
            return sum
       })
       console.log(res4);//100


    </script>
</body>
</html>