数组的常用方法之map与forEach

最新推荐文章于 2024-05-28 09:22:52 发布

ADwblj

最新推荐文章于 2024-05-28 09:22:52 发布

阅读量527

点赞数

文章标签：数据结构

本文链接：https://blog.csdn.net/ADwblj/article/details/128056263

版权

数组除了基础的增删改查之外还有许多方法来更好的操作数组

本次先介绍一下数组的两种遍历方法： map方法与forEach方法

一.map方法的应用场景及基础运用

1.map一般在需要映射数组的情况下使用，并且遍历之后得到的是一个新的数组

2.map的循环次数等于数组的长度

3.回调函数内部返回值 return 新数组元素

4.方法自身返回值 return 映射后的数组

基础使用代码如下：

<!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 = [10,20,60,40,50]

        /*
        根据规则映射数组 得到新的数组
        循环次数等于数组的长度
        回调函数内部返回值   return 新数组元素

        方法自身返回值 return 映射后的数组
        */
       //需求 使数组内所有数据变为原来的一半
        const res = arr.map(item => item*0.5)
        console.log(res);//[5,10,30,20,25]
    </script>
</body>
</html>

二.forEach方法应用场景及基础运用

1.forEach 应用场景：循环遍历数组，遍历修改数组每一个元素值

（不需要得到新数组，仅仅只是修改数组自身元素）

2.循环次数等于数组的长度

3.回调函数内部返回值无return

4.方法自身返回值无return

基础使用代码如下：

<!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:'1',select:false},
            {name:'2',select:true},
            {name:'3',select:true},
            {name:'4',select:false},
            {name:'5',select:true},
            {name:'6',select:false},
        ]
        /*
        forEach 应用场景：循环遍历数组
        遍历修改数组每一个元素值（不需要得到新数组，仅仅只是修改数组自身元素）

        循环次数等于数组的长度
         回调函数内部返回值   无return

        方法自身返回值  无return
        */
        arr.forEach((item ,index) => {
            item.select = true
        })
        console.log(arr);
/*
0: {name: '1', select: true}
1: {name: '2', select: true}
2: {name: '3', select: true}
3: {name: '4', select: true}
4: {name: '5', select: true}
5: {name: '6', select: true}
*/

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