map,filter,find,findindex,some,every,js中数组遍历

最新推荐文章于 2023-06-15 20:12:45 发布

GYB4979

最新推荐文章于 2023-06-15 20:12:45 发布

阅读量158

点赞数

分类专栏：代码片段文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/GYB4979/article/details/126862768

版权

代码片段专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<!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>
    <!-- JS中的数组遍历 map, filter, find, findIndex,some, every, forEach, for in, for of 用法总结和区别 -->
    <!-- 函数简述：
        map():返回一个新的Array，每个元素为调用func的结果
        filter():返回符合func条件的元素数组
        find():返回第一个符合条件的元素对象
        findIndex():返回第一个符合条件的元素对象的位置(索引)
        some():返回一个boolean，判断是否有元素是否符合func条件
        every():返回一个boolean，判断每个元素是否符合func条件
        forEach():没有返回值，只是针对每个元素调用func 
    -->


    <script>
        // <!-- map 返回一个新的数组,每个元素为调用func函数后的结果 -->
        var list = [1, 2, 3, 4, 5]
        var need = list.map((item, index) => {
            return item * 2
        })
        console.log(need);   //[2, 4, 6, 8, 10]
    </script>

    <script>
        // filter  返回符合fun条件的元素素组
        var list = [1, 2, 3, 4, 5, 6];
        var need = list.filter((item, index) => {
            return (item % 2 == 0)
        })
        console.log(need);  //[2,4,6]
    </script>

    <script>
        //find // 返回第一个符合条件的元素对象 如果没有符合的元素,则返回undefined   /* 注意,返回的是符合条件的元素对象,新数组*/
        var list = [{ name: '张三', age: 18 }, { name: '李四', age: 83 }];
        var need = list.find((item, index) => {
            return item.name == '张三'
        })
        console.log(need); //  {name: '张三', age: 18}
    </script>


    <script>
        // findIndex 返回第一个符合条件元素的索引,如果都不符合,则返回-1
        var list = [false, null, 1, 2, 3, 4, 5, 6]
        var need = list.findIndex((item, index) => {
            return item == 5
        })
        console.log(need);   // 6
    </script>

    <script>
        // some  返回一个Boolean 判断元素是否符合funs条件,如果有一个符合,则循环停止,并且返回true
        var list = [1, 2, 3, 4, 5];
        var flag = list.some(d => {
            console.log(d);   // print: 1 2 3 4
            return d > 3;
        });
        console.log(flag);
    </script>

    <script>
        // every 返回一个boolean，判断每个元素是否符合func条件，有一个元素不满足func条件，则循环终止，返回false。
        let list = [1, 2, 3, 4, 5];
        let flag = list.every(d => {
            console.log(d);
            return d < 3;
        });
        // print: 1 2 3
        // flag: false
    </script>

</body>

</html>