JavaScript中数组的方法汇总

最新推荐文章于 2024-03-05 17:02:31 发布

IG_hyt

最新推荐文章于 2024-03-05 17:02:31 发布

阅读量633

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/IG_hyt/article/details/124503748

版权

1.数组map遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>

        /* 
        1. map作用与场景 :  映射数组(将数组每一个元素处理之后，得到一个新数组)
            举例子:  商品打8折 (数组中每一个元素都要 乘以 0.8)
            经典场景 : 数据驱动渲染dom树(将数组直接渲染到页面)

        2.语法特点 :
            2.1 循环执行次数  ==   数组长度
            2.2 回调函数内部return作用
                (1)return 新元素值
                (2)没有return,新元素都是undefined
            2.3 map本身返回值作用
                隐射之后的新数组
        */
        let arr = [20,66,80,90,100]

        //完整写法
        // let res = arr.map( (item,index)=>{
        //     return item*0.8
        // })

        //简写
        let res = arr.map( item=>item*0.8 )

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

2.数组filter遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /* 
        1. filter作用与场景 :  筛选数组
            经典场景 : 筛选,根据条件筛选数组，将符合条件的元素放入新数组中

        2.语法特点 :
            2.1 循环执行次数  ==   数组长度
            2.2 回调函数内部return作用
                (1)return true : 满足筛选条件，当前元素放入新数组中
                (2)return false : 不满足筛选条件，当前元素不放入新数组中
            2.3 filter本身返回值作用
                筛选之后的新数组
        */

        let arr = [20, 61, 80, 95, 100]

        //需求：筛选出数组中的偶数

        //完整写法
        // let res = arr.filter((item, index) => {
        //     console.log(item, index)
        //     if(item % 2 == 0){
        //         return true
        //     }
        // })

        //简洁写法
        let res = arr.filter(item=>item % 2 == 0)
        console.log( res )  
    </script>
</body>

</html>

3.数组forEach遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /* 
        1. forEach作用与场景 :  遍历数组
            类似于for循环遍历数组

        2.语法特点 :
            2.1 循环执行次数  ==   数组长度
            2.2 回调函数内部return作用
                无
            2.3 forEach本身返回值作用
                无
        */

        let arr = [20, 61, 80, 95, 100]

        arr.forEach( (item,index) => {
            console.log(item,index)  
        })

        
        
    </script>
</body>

</html>

4.数组some.遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /* 
        1. some作用与场景 : 判断数组中是否有满足条件的元素 ( 逻辑或|| )
            经典场景 : 非空判断。 多个表单只要有一个是空的,就不能提交

        2.语法特点 :
            2.1 循环执行次数  !=   数组长度
            2.2 回调函数内部return作用
                (1)return true : 循环结束。 找到满足条件的元素,此时some的返回值也是true
                (2)return false : 循环继续。没有找到满足条件的元素,如果循环执行完毕还是false，最终some的返回值也是false
            2.3 some本身返回值作用
                return true : 有满足条件的元素
                return false : 没有满足条件的元素
        */

        let arr = [20, 61, 80, 95, 100]

        //需求：判断数组中有没有负数

        //完整写法
        let res = arr.some((item, index) => {
            if( item < 0 ){
                return true
            }
        })

        //简洁写法
        // let res = arr.filter(item=>item % 2 == 0)
        console.log( res )
        
    </script>
</body>

</html>

5.数组every遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /* 
        1. every作用与场景 : 判断数组是否所有的元素都满足条件 ( 逻辑与&& )
            经典场景 : 开关思想. 购物车全选

        2.语法特点 :
            2.1 循环执行次数  !=   数组长度
            2.2 回调函数内部return作用
                (1)return true : 循环继续。 当前元素满足条件,继续判断. 如果循环执行完毕还是true,则every返回值就是true
                (2)return false : 循环结束。当前元素不满足条件。 every的返回值也是false
            2.3 every本身返回值作用
                return true : 全部元素都满足条件
                return false : 有元素不满足
        */

        //需求：判断数组中是否所有的元素都是正数
        let arr = [20, 61, -80, 95, 100]

        //需求：判断数组中有没有负数

        //完整写法
        // let res = arr.every((item, index) => {
        //     if(item>0){
        //         return true
        //     }
        // })

        //简洁写法
        let res = arr.every(item=>item>0)
        console.log( res )
        
    </script>
</body>

</html>

6.数组findIndex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /* 
        1. findIndex作用与场景 : 找元素下标
            * 数组中的元素是值类型:  arr.indexOf()
            * 数组中的元素是引用类型:  arr.findIndex()

        2.语法特点 :
            2.1 循环执行次数  !=   数组长度
            2.2 回调函数内部return作用
                (1)return true : 找到了,循环结束。 此时findIn是当前元素下标
                (2)return false : 没找到，循环继续。 如果执行完毕还找不到，最终返回固定值-1
            2.3 findIndex本身返回值作用
                return -1 : 没有
                return 下标 : 有
        */

        //需求：判断数组中是否所有的元素都是正数
        let arr = [
            { name: '张三', age: 20 },
            { name: '李四', age: 25 },
            { name: '王五', age: 30 },
        ]

        let res = arr.findIndex(item => item.name == '李四')
        console.log(res)//-1
    </script>
</body>

</html>

7.数组reduce方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.数组reduce方法作用： 为每一个元素执行一次回调,并最终返回最后一次结果
            经典应用： 求数组累加和
        */

        let arr = [10, 20, 30]

        //累加和
        //(1)声明变量存储结果
        let sum = 0
        //(2)遍历数组
        for (let i = 0; i < arr.length; i++) {
            //(3)累加
            sum += arr[i]
        }
        // console.log( sum )

        /* 
        第一个参数:回调    (sum,value,index)=>{}
            sum : 累加和变量
            value:当前元素
            index: 当前下标
            return : 下一次回调sum的值
        第二个参数: sum初始值
            * 如果不传，sum默认是第一个元素值
            * 一般要传0, 如果不传空数组的话reduce直接报错
        */

        //标准写法
        //    let res =  arr.reduce( (sum,value,index)=>{
        //         console.log(sum,value,index)
        //         return sum+value
        //     } , 0 )

        //简写
        let res = arr.reduce((sum, value) => sum + value, 0)

        console.log(res)
    </script>
</body>

</html>