数组的迭代方法

最新推荐文章于 2024-09-09 20:37:59 发布

cabacwj

最新推荐文章于 2024-09-09 20:37:59 发布

阅读量104

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cabacwj/article/details/126961213

版权

1.filter用给定条件过滤

代码如下：

<!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 =[-2,-1,0,1,2]

        //数组>0

        // let result = [];
        // for (let i =0 ; i<arr.length ;i++){
        //     if(arr[i] > 0)
        //     result.push(arr[i])
        // }
        // console.log(result);

        let nArr =arr.filter(function(value){
            //筛选条件
            return value >0
        })
        //nArr里保存的是所以满足条件的元素
        console.log(nArr);

        // 筛选出偶数
        let arr1=arr.filter(function(value){
            return value%2==0
        })
        console.log(arr1);
    </script>
</body>
</html>

效果图：

2.findindex

代码如下

<!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>
        //1.数组findIndex万法:
        // a.作用:获取符合条件的第一个元素位置(下标)。
        // b.语法: arr.findIndex((item,index) =>{return true/false})
        //返回值:符合则返回元素下标,不符合则返回-1。
        //c.应用场景:适合于数组中元素为对象·类型,比传统for循环要高效。
        let arr = [
            {name:'护牙菜',age:19},
            {name:'小老鼠',age:20},
            {name:'罗毅',age:15},
        ]
        //数组findIndex方法:获取符合条件的第一个元素位置(下标)

        //需求:查找arr1中第一个未成年在什么位置
        let res =arr.findIndex((item,index) =>{
            return item.age <18;
        })
        console.log(res);//2
    </script>
</body>
</html>

效果图：

3.forEach遍历器

代码如下：

<!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>
    <!-- 1.forEach应用场景:用于遍历数组，相当于for循环另一种写法。
     2.语法:数组.forEach( function(value,index, arr){//算法})
     3.forEach必须提供一个参数
     a.value:每次遍历到的数组元素
    b.index:每次遍历到的数组的下标
     c.arr:数组 -->
     
    <script>
         let arr=[12,21,34,42,35,666]

        // // 累加
        // let sum =0;
        // for(let i = 0; i < arr.length;i++){
        //     sun += arr[i]
        // }
        // console.log(sum);

        // 现在写法
        let sum =0
        arr.forEach(function(value){
            sum += value
        })
        console.log(sum);
    </script>
</body>
</html>

效果图：

4.map数组遍历器

代码如下：

<!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>
    <!-- 1.map应用场景:利用某种规则映射得到一个新数组
    说人话:遍历每一个元素，并对每一个元素做响应的处理，返回一个新数组
    例如:将数组中的每一个元素+1 -->

    <!-- 2.注意点:
    a.回调函数执行次数==数组长度（数组中有几个元素，回调函数就会执行几次)
    b.map函数返回的新数组长度==原数组长度
    c.回调函数中一定要return，返回的是当前遍历的元素值
      (如果不return,新数组中的每一个元素都变成了undefined) -->

      <!-- 3.语法:(元素,下标)=> {return新元素} -->
    <script>
        let arr = [1,2,3,4,5]

        // 每个数组加一
        let arr1 = arr.map((value) => {
        return value + 1
        })
        console.log(arr1);

        // 每个数组乘二
        let arr2 = arr.map((value)=>{
        return value *2
        })
        console.log(arr2);
    </script>
</body>
</html>

效果图：