数组2 API ：改变原始数组，不改变原始数组，ES5，ES6新增

憨憨404

已于 2023-02-12 21:49:57 修改

阅读量492

点赞数

分类专栏： JS基础文章标签： es6 前端

于 2022-12-06 19:01:53 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/128195171

版权

JS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

改变原始数组

<script>
        /* 
            这几个方法的共同点：都是直接改变原始数组
                1.push()方法
                    语法：数组名.push(数据)
                    意思：向数组的末尾追加一条数据
                    返回值：追加了数据之后数组的长度
                2.pop()方法
                    语法：数组名.pop()
                    意思：删除数组末尾的一条数据
                    返回值：你删除的那条数据
                3.unshift()
                    语法：数组名.unshift(你要加的数据)
                    意思：从数组的开头添加一条数据
                    返回值：数组的长度
                4.shift()
                    语法：数组名.shift()
                    意思：从头删除一条数据
                    返回值：被删除的那个数据
                5.reverse()
                    语法：数组名.reverse()
                    意思:反转数组，将数组中的数据逆序
                    返回值：反转之后的数组
                6.sort()方法
                    语法1：数组名.sort()
                    意思：对数组中的数据进行排序（从小到大）
                    排序规则：一位一位数字阅读，比较。

                    语法2：数组名.sort(function(a,b){return a-b})
                        记住：a-b按照从小到大
                        记住：b-a按照从大到小
                7.splice()
                    语法1：数组名.splice(开始索引，个数)
                    意思：从数组中截取出一部分数据
                    返回值：你截取出来的数据，是一个新数组
                    注意：如果不写个数，那么就是从开始位置一直截取到左后
                    语法：数组名.splice(开始索引，个数，你要插入的新数据1，数据2，数据3，。。。。)
                    记住：从哪里开始截取，就从哪里开始插入
        */
</script>

不改变原始数组

<script>
        /*
            不改变原始数组：
                8.concat()
                    语法：数组名.concat(你要拼接的数据1，数据2。。。)
                    将数据拼接成一个新的数组。参与拼接的数据可以是具体的数值也可以是另外一个数组
                    返回值:拼接好之后的新数组。
                9.join()
                    语法：数组名.join(连接符)
                    作用：用连接符将数组中的数据连接成一个字符串
                    返回值：连接好的字符串
                    注意：不写连接符，默认是逗号连接
                10.slice()
                    语法：数组名.slice(开始位置，结束位置)
                    注意：
                        1.不包含结束位置
                        2.如果不写结束位置，会一直截取最后
                        3.如果开始和结束位置都不写，就是从头到尾全部截取，相当于进行了一次复制操作
                        4.位置也可以写负数，数组中的索引用负数表示的时候，需要从右到左看，最后一个数据是-1，
                11.indexOf()
                    语法：数组名.indexOf(数据)
                    作用：根据数据查找到该数据‘第一次’对应的索引。如果该数据不存在。那么就是-1
                    用这个方法可以验证一个数据到底在不在数组中，如果不再结果一定是-1

                    语法2：数组名.indexOf(数据，开始位置)
                    作用：从开始位置起找该数据第一次出现的索引
                    注意：包含开始位置
                12.lastIndexOf()
                    写法同上
                    区别：indexOf是从左到右找，lastIndexOf是从右到左找
        */
</script>

ES5新增，ES6新增

<!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.forEach()语法
            语法:数组名.forEach(function(item,index,origin){})
            作用:遍历数组

            匿名函数中第一个参数:用来表示数组中的每一个数据,推荐起名item
            第二个参数用来表示数组的索引,推荐起名index
            第三个参数用来表示原数组,推荐起名origin
            注意:匿名函数中的三个参数不是必须要需要的.
        */
        // var arr = [100, 200, 300, 'hello', 400]

        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }
        // console.log('=====================');

        // arr.forEach(function (item) {
        //     console.log(item);
        // })

        /* 
           用for循环和forEach2种方式对数组中的数据 累加求和
        */
        // var arr = [100, 200, 300, 400, 500]
        // var sum = 0
        // // for (var i = 0; i < arr.length; i++) {
        // //     // i表示索引 arr[i]表示数组中的数据
        // //     sum += arr[i]
        // // }

        // arr.forEach(function(item){
        //     // item指的就是数组中每一个数据
        //     sum+=item
        // })
        // console.log(sum);

        /* 
            用for循环和forEach求所有的偶数和
        */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var sum = 0
        // // for (var i = 0; i < arr.length; i++) {
        // //     if (arr[i] % 2 == 0) {
        // //         sum += arr[i]
        // //     }
        // // }
        // arr.forEach(function (item) {
        //     if (item % 2 == 0) {
        //         sum += item
        //     }
        // })
        // console.log(sum);


        /* 
            2.map()方法
            语法:数组名.map(function(item,index,origin){})
            作用:可以对数组中的数据进行加工处理,将加工处理的新的结果映射出一份新数组
            返回值:加工处理的新数组
            注意:加工的语句需要用return的形式书写


            利用map将数组中的每一个数组都增加10
            利用map将数组中的每一个数组都增加30%
        */
        // var arr = [100, 200, 300, 400]
        // var res = arr.map(function (item) {
        //     // item指的就是arr中的每一个数组
        //     // return item += 10
        //     return item += item * 0.3
        // })
        // console.log(arr);
        // console.log(res);

        /* 
            3.filter()方法
            语法:数组名.filter(function(item,index,origin){})
            作用:对数组中的数据进行过滤,筛选出符合条件的数据,并加入新数组中
            返回值:过滤好的新数组
            注意点:过滤条件用return形式书写.
        */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var res = arr.filter(function (item) {
        //     // return item > 3
        //     // return item % 2 == 0
        //     return item % 2 != 0
        // })
        // console.log(arr);
        // console.log(res);

        /* 
            4.find()
             语法:数组名.find(function(item,index,origin){})
             作用:从原始数组中找符合条件的'第一项'数据
             返回值:符合条件的第一个数据,如果没有符合条件的就undefined
             注意点:查找条件写在return后面
         */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var res = arr.find(function (item) {
        //     // return item > 3
        //     // return item % 2 == 0
        //     return item > 6
        // })
        // console.log(res);

        /* 
            5.findIndex()和find一样
            区别:find是找数据,findIndex是找符合条件的数据的索引
            找到符合条件的:就返回索引,找不见就是-1
        */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var res = arr.findIndex(function (item) {
        //     // return item > 3
        //     // return item % 2 == 0
        //     return item > 6
        // })
        // console.log(res);

        /* 
            6.every
            语法:数组名.every(function(item,index,origin){})
            作用:判断数组内的数据是否每一个都是满足条件的
            返回值:一定是一个布尔类型,每一个都满足就是true,只要有一个不满足是false

            和&&的意思一样
        */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var res = arr.every(function (item) {
        //     return item <= 6
        // })
        // console.log(res);

        /* 
            7.some()
             语法:数组名.some(function(item,index,origin){})
             作用:判断数组中是否有满足条件的
             返回值:只要有一个满足条件,结果就是true,所有都不满足,结果才是false
             类似于||的意思
        */
        // var arr = [1, 2, 3, 4, 5, 6]
        // var res = arr.some(function (item) {
        //     return item < 0
        // })
        // console.log(res);


        /* 
            8.reduce()
            语法:数组名.reduce(function(){},init)
            作用:将数组中所有数据进行累加的
            返回值:累加之后的结果
            reduce中传递2个参数
                第一个是匿名函数,函数函数参数的写法:可以写4个参数
                    第一个参数用来表示初始值,或者上一次的运算结果,prev
                    第二个参数用来表示数组中的每一个数据,item
                    第三个参数用来表示索引,index
                    第四个参数用来表示原始数组,origin
                第二个是初始值
                初始值可写可不写.
        */
        var arr = [1, 2, 3, 4, 5, 6]
        var res = arr.reduce(function (prev, item) {
            console.log("prev:"+prev+'item:'+item);
            return prev + item
        }, init)
        console.log(res);
    </script>
</body>

</html>