深入了解js数组的常用15种方法

js中数组的常用方法

前言
在学习前端过程中，我们会经常跟对象，数组打交道，所以我们要熟练掌握数组与对象的一些常用的方法。我就把平常一些零散的东西整理一下，跟大家一起分享一下。

操作数组

数组中有很多种方法，下面我们一起看一下这些方法怎么使用
（1）map方法
数组的map方法在平常我们是经常使用的，此方法是将数组的每一个元素遍历一遍，然后返回一个新的数组，注意，这里并没有改变原来数组。
例子1：

        let arr=[1,2,3,4,5,6,7,8]
        var arr1=arr.map(function(item){
            return item*2
        })
        console.log(arr1);

打印可得

上面是一个简单案例 在函数里面就直接返回每一个元素的两倍
下面我们看另外一个案例
例子2：

        function map(arr,cb){
            var newArr=[]
            for(var i=0 ;i < arr.length; i++){
                newArr.push(
                    cb(arr[i])
                )
            }
            return newArr
        }
        var arr=[1,2,3,4,5,6,7,8]
        console.log(map(arr,function(num){
            return num+10
        }));

在这里我们可以看到函数里面放了两个参数 ，一个是数组 ，一个是一个回调函数cb ，我们可以看到函数里面进行一个操作定义一个新数组newArr用来存放每一项元素加10后的结果 ， 再返回出去。

（2）forEach方法
例子1：

        var arr = [1, 2, 3, 4, 5];
        var num = 3;
        arr.forEach(function (v) {
            if (v == num) {
                break;
            }
            console.log(v);
        });

这里有几点东西是特别要注意一下的，第一forEach方法是没有返回值的，第二，forEach方法是不能中断的，所以在里面break跟return都是没啥卵用的。第三，不需要知道循环的次数

你会得到一段报错的信息了
例子2：

        var arr = [1, 2, 3, 4, 5];
        var num = 3;
        arr.forEach(function (v) {
            if (v == num) {
                return;
            }
            console.log(v);
        });

你可以看到，是不能中断的

（3）slice方法
例子1

        var arr = [1,2,3,4,5];
        var res=arr.slice(2)
        console.log(arr,res);

在这我们可以看到arr还是原数组不变，res是截取索引到之后的数组，这里的2是索引的意思
例子2

        var arr = [1,2,3,4,5];
        var res=arr.slice(2,3)
        console.log(arr,res);

在这里我们可以看到arr依然是数组本身，res则是所以从2开始到3不包括索引为3的数组
例子3

        var arr = [1,2,3,4,5];
        var res=arr.slice(-2,-1)
        console.log(arr,res);

我们会惊奇的发现，里面的参数也可以为负数，热搜是倒数第2到倒数第1（不包括倒数第1）的数组。

（4）filter方法

        var arr = [10, 20, 30, 40, 50];
        var res = arr.filter(function (items, index, arr) {
            return items >= 30;
        })
        console.log(res);

返回值：根据你的条件过滤出的数据组成的数组

（5）some方法

 var arr = [1, 2, 3, 4, 5];
        var num = 3;
        arr.every(function (v) {
            if (v == num) {
                return false;
            } else {
                console.log(v);
                return true;
            }
        });

满足条件就会中断，就只会打印1 2 两个元素

（6）push方法

        var arr=[1,2,3,4,5,6,7,8]
        var res = arr.push(50)
        console.log(res,arr);

打印我们可以看到res返回的不是一个数组 而是一个数字9 这个9代表新数组的长度
再看看原来的数组 arr后面添加了一个50
这样我们就可以得出结论：

arr.push(值) 向数组的最后一个位置追加一个元素
语法：arr.push()
返回值：改变之后的数组的长度
改变原数组

（7）pop方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.pop()
        console.log(res,arr);

打印可得 返回的res是个数字8 这个8是删除的那一个元素8 arr则是进行删除后的到的数组
我们又可以总结出：

arr.pop() 删除数组中的最后一个元素
语法：arr.pop()
返回值：以字符串的形式被删掉的那个元素
改变原数组

（8）unshift方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.unshift(50)
        console.log(res,arr);

打印可得 返回的res是个数字9 这个9是返回数组的长度 arr则是进行添加后的到的数组
我们可以总结出：

arr.unshift(值) 在数组的最前面添加一个元素
返回值： 改变之后数组的长度
改变原数组

（9）shift方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.shift(50)
        console.log(res,arr);

打印可得 返回的res是个数字1 这个1是删除的个数 arr则是进行删除后的到的数组
我们可以总结出：

arr.shift() 删除数组中的第一个元素
返回值：以字符串的形式被删掉的那个元素
改变原数组

（10）splice方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.splice(5,2)
        console.log(res,arr);

打印可得 返回的res是个数组 这个数组是删除的元素组成的 arr则是进行删除后的到的数组
在这基础上我们在进行扩展：

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.splice(5,1,20)
        console.log(res,arr);

打印可得 返回的res是个数组 这个数组是被替换的元素组成的 arr则是进行替换后的到的数组

我们可以总结出：
arr.splice(idx,num) 从指定位置开始 删除数组的元素
idx:指定位置的索引
num:删除的个数
arr.splice(idx,num,value)
value:用来替换删除掉的元素
返回值：以数组的形式返回 删除的元素
改变原数组

（11）reverse方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.reverse()
        console.log(res,arr);

打印可得 返回的res是个数组 这个数组是反转后的 arr也是一样

我们可以得到结论：
reverse() 反转数组
返回值： 跟反转数组一样
改变原数组

（12）concat方法

        var arr=[1,2,3,4,5,6,7,8] 
        var arr2=[3,5,7,9]
        var arr3=["b",5,7,9]
        var res=arr.concat(arr2,arr3)
        console.log(res,arr);

打印可得 返回的res是个数组 这个数组是合并arr2， arr3后组成的 arr则是原来数组
我们可以总结：

concat() 合并数组
语法：arr.concat(合并的数组)
返回值：合并后的数组
不改变原数组

（13）indexOf方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.indexOf (5)
        console.log(res,arr);

打印可得 返回的res是个数字4 这个4代表的是索引 下标 （要记住这里的索引是从0开始所以是4） arr则是原来数组
我们可以总结：
indexOf 判断数组中是否存在某个元素
语法：arr.indexOf(要查询的元素)
返回值：如果元素存在就返回元素所在的索引位置，元素不存在返回 -1

（14）join方法

        var arr=[1,2,3,4,5,6,7,8] 
        var res=arr.join (",")
        console.log(res,arr);

打印可得 返回的res是个字符串由，隔开 arr则是原来数组
我们可以总结：
arr.join(‘拼接符’) 把数组转化为字符串，默认用逗号拼接
返回值：拼接好的字符串
不改变原始数组

（15）sort方法

        var arr=[5,6,8,100,0,4,3,6,7,5];
        arr.sort(function(a,b){
            return a-b
        })
        console.log(arr);

打印可得 arr是排序好的数组（从小到大）升序 那么有升序就有降序 降序就是把里面return的a-b变成b-a即可就不演示了
我们可以总结：

sort() 排序
原理：利用递归和冒泡排序的方式进行排序的 了解更多可以点击这里
如果sort方法没有参数，那么会按照ASCII 值进行排序，不会按照数值的大小排序
如果要按照数值的大小排序，那么必须 给sort方法传递参数
这个参数是一个 函数,并且这个个函数又有两个参数
还有一个返回值： a-b 得到是从小到大排序 或者 b-a 得到的适合于从大到小排序
sort(function(a,b){
return a -b
})

（16）reduce方法

        var arr = [1, 2, 3, 4, 5];
        sum = arr.reduce(function (prev, cur, index, arr) {
            console.log(prev, cur, index);
            return prev + cur;
        })
        console.log(arr, sum);

这里有四个参数：
prev: 第一项的值或上一次叠加的结果值
cur: 当前会参与叠加的项
index： 当前值的索引
arr: 数组本身
了解完后再看函数就不难理解了

查看更多