数组迭代方法

最新推荐文章于 2024-09-29 18:24:40 发布

啊唯11

最新推荐文章于 2024-09-29 18:24:40 发布

阅读量142

点赞数

文章标签： javascript java 前端

本文链接：https://blog.csdn.net/weixin_66059613/article/details/126953176

版权

接下来我们将会介绍六个常用的方法

map数组遍历器

1.map应用场景：利用某种规则映射得到一个新数组

简单来说:遍历每一个元素，并对每一个元素做响应的处理，返回一个新数组

例如：将数组中的每一个元素+1 或者乘2 代码如下：

<!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 = [1,6,88,12,997]
        //需求1数组中每一个元素加1
        let arr1= arr.map ((value,index) => {
              return value + 1
        })
        console.log(arr1);
   //需求2数组中每一个元素乘2
   let arr2 =[9,88,5,199,62]
   let arr3 = arr2.map((value,index) => {
       return value*2
   }) 

   console.log(arr3);
   </script>
</body>
</html>

.注意点:

1.回调函数执行次数 ==数组长度(数组中有几个元素，回调函数就会执行几次)

2.map函数返回的新数组长度==原数组长度

3.回调函数中一定要return，返回的是当前遍历的元素值

(如果不return，新数组中的每一个元素都变成了undefined)

语法:(元素，下标)=> {return 新元素}

02.filter用给定条件过滤

filter应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组

语法:数组.filter(function(value,index,arr){

return 筛选条件

比如我们的需求是要求筛选出数组内大于10所有方法

用之前学习的方法;

<!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>

        //需求：求数组中大于10的所有元素
        老方法
         let result=[]
         for(let i =0;i<arr.length;i++){
  if(arr[i]>10){
       result.push(arr[i])
   }
        }
         console.log(result);
  </script>
</body>
</html>

用fliter

<!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>

//用filter
let nARR =arr.filter((value) =>{
    //筛选条件
    return value>10
})
//nARR是保存的是所有满足条件的元素
console.log(nARR);
//作业找出数组中的偶数
let Aee = arr.filter((value)=>{
    return value%2 === 0
})
console.log(Aee);
    </script>
</body>
</html>

注意点;

,回调函数执行次数数组长度

filter承数返回的新数组长度 != 原数组长度

03forEach数组遍历器

.forEach应用场景:用于遍历数组，相当于for循环另一种写法。

2.语法:数组.forEach( function(value,indexarr){//算法})

3.forEach必须提供一个参数

a.value:每次遍历到的数组元素

b.index:每次遍历到的数组的下标

c.arr:数组

比如现在我们需要对一个数组进行累加

<!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>
// d.forEach
        let arr =[61,3,11,225,12]
        //需求1对数组进行累加
 
        //原来
        // let sum = 0;
        // for(let i = 0;i< arr.length;i++){
        //     sum+=arr[i]
        // }
        // console.log(sum);
        // 现在
        let sum=0;
        arr.forEach((value)=>{
            sum+=value
        })
        console.log(sum);

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

3.注意点:

.回调函数执行次数 ==数组长度(数组中有多少元素，回调函数就会执行几次

b.forEach函数没有返回值

c.回调函数不需要return(就算手动ruturn，也不会结束循环)

4.filter方法和forEach方法的参数完全相同。

filter主要是根据条件进行筛选，满足条件的值会被return返回,需要一个变量接收

some方法

1.some应用场景:用于判断数组中是否存在满足条件的元素

2.注意点:

a.回调函数执行次数!=数组长度 b.some函数返回一个布尔类型值

c.回调函数返回布尔类型值用于结束遍历

return true; 遍历结束，且some函数返回值为true。

return false; 遍历继续，且some函数返回值为true。

例如我们需要判断元素中有没有负数：

<!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 = [66,2,11,44,55]
    let arr1 = arr.some((item,index)=>{
        return item<0
    })
    console.log(arr1);//false
</script>    
</body>
</html>

every方法

1every应用场景：用于判断数组中是否所有元素满足条件

2注意点：every函数返回一个布尔值类型

比如我们要判断元素中是否有负数

<!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 = [33,84,11,6,1,2];
        let arr1 = arr.every((item) =>{
            return item > 0;
        })
        console.log(arr1);
    </script>
</body>
</html>

06-findindex

1数组findIndex方法：

作用：获取符合条件的第一个元素位置（下标）

语法：arr.findIndex((item,index)=>{return true/false})

返回值：符合则返回元素下标，不符合则返回-1.

应用场景：适合于数组中元素为对象类型，比传统for循环要高效

例如需求：查找arr1中第一个未成年在什么位置

<!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=[
        {name:'胆',age:3},
        {name:'小',age:33},
        {name:'如',age:66},
        {name:'旭',age:34},
        {name:'下头男',age:5},
    ]
//数组findIndex方法：获取符合条件的第一个元素位置（下标）

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

})
console.log(res);//0
</script>    
</body>
</html>