JS中数组方法详解

JS中数组的方法有很多，但是自己一直没有抽时间进行整理分类，故单独写一篇博文，对目前我所掌握的JS中数组相关的方法进行整理，夯实一下自己的基础。

我将数组相关的方法分为两类

1.方法会改变原数组

相应的方法有：shift、unshift、pop、push、reverse、sort、splice
shift：将第一个元素删除并且返回删除元素，空即为undefined

var arr = [1,2,3,4];
var res = arr.shift();
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (3) [2, 3, 4]
//res: 1

unshift：向数组开头添加元素，并返回新的长度

var arr = [1,2,3,4];
var res = arr.unshift(33);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (5) [33, 1, 2, 3, 4]
//res: 5

pop：删除最后一个并返回删除的元素

var arr = [1,2,3,4];
var res = arr.pop();
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (3) [1, 2, 3]
//res: 4

push：向数组末尾添加元素，并返回新的长度

var arr = [1,2,3,4];
var res = arr.push(88);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (5) [1, 2, 3, 4, 88]
//res: 5

reverse：颠倒数组顺序

var arr = [1,2,3,4];
var res = arr.reverse();
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [4, 3, 2, 1]
//res: (4) [4, 3, 2, 1]

sort：对数组排序
注意–默认是按照字符编码的顺序对数组中的元素进行排序

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

默认按照字符编码排序

var arr = [10,3,20,41];     
var res = arr.sort();
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [10, 20, 3, 41]
//res: (4) [10, 20, 3, 41]

给予排序函数，从大到小排序

var arr = [10,3,20,41];     
var res = arr.sort((a,b)=>(a-b));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [3, 10, 20, 41]
//res: (4) [3, 10, 20, 41]

给予排序函数，从大到小排序

var arr = [10,3,20,41];     
var res = arr.sort((a,b)=>(b-a));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [41, 20, 10, 3]
//res: (4) [41, 20, 10, 3]

splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组

这个方法还是很强大的,有三个参数，下面我将依次尝试不同参数个数时该函数的效果

一个参数：从start开始删除元素，返回删除的元素数组

var arr = [1,2,8,4,5];      
var res = arr.splice(2);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (2) [1, 2]
//res: (3) [8, 4, 5]

两个参数：从start开始删除length个元素，返回删除的元素数组

var arr = [1,2,8,4,5];      
var res = arr.splice(2,2);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (3) [1, 2, 5]
//res: (3) [8, 4]

三个以上参数：从start开始删除length个元素，并将item及item后的参数从index处插入到数组中

var arr = [1,2,8,4,5];      
var res = arr.splice(2,1,9,9);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (6) [1, 2, 9, 9, 4, 5]
//res: [8]

2.方法不会改变原数组

相应的方法有：forEach，map，every， some，concat，filter ， slice ，indexOf，find，findIndex，join，reduce

forEach:没有返回值(undefined)，循环调用回调函数会处理每一项，且无法正常退出循环，除非抛出异常

var  arr = [1,2,3];
var  res = arr.forEach((val,i)=>{
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//输出
//1 0
//2 1
//3 2
//arr: (3) [1, 2, 3]
//res: undefined

map：返回一个新的数组，新数组的每一项都是回调函数处理的结果

var  arr = [1,2,3];
var  res = arr.map((val,i)=>{           
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//输出
//1 0
//2 1
//3 2
//arr: (3) [1, 2, 3]
//res: (3) [2, 4, 6]

every(callback)：检测数组所有元素是否都符合callback中的指定条件

如果数组中检测到有一个元素不满足，则表达式返回 false ，且不再检测剩余元素。
如果所有元素都满足条件，则返回 true。

var  arr = [1,2,3];
var  res = arr.map((val,i)=>{           
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 2, 8, 4]
//res: false

some(callback):检测数组中是否有符合callback中条件的元素，如果有就返回true，否则返回false

如果有一个元素满足条件，则表达式返回true , 且不再检测剩余元素。
如果没有满足条件的元素，则返回false。

var arr = [1,2,8,4];        
var res = arr.some((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 2, 8, 4]
//res: true

concat(a,b,…):这个方法就是将数组进行拼接，不会进行去重处理，可以同时连接很多个数组，返回一个连接后的新数组

var arr = [1,2,3];
var res = arr.concat([1,2],[3,4]);  
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (3) [1, 2, 3]
//res: (7) [1, 2, 3, 1, 2, 3, 4]

filter(callback):返回数值中符合callback中条件的所有元素组成的新数组

var arr = [1,2,8,4];        
var res = arr.filter((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 2, 8, 4]
//res: (2) [8, 4]

slice（from,end）:这个方法就是从数组中截取从from开始，end结束的数组

var  arr = [1,2,3,4,5];
var  res = arr.slice(1,4);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (5) [1, 2, 3, 4, 5]
//res: (3) [2, 3, 4]

indexOf(val):这个方法就是寻找数组中值为val项的索引

var  arr = [1,2,3];
var  res = arr.indexOf(2);
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (3) [1, 2, 3]
//res: 1

find( callback(val) ):返回callback中符合测试条件的第一个数组元素的值，如果没有符合条件的元素返回 undefined

var arr = [1,22,23,24];
var res = arr.find((val)=> val > 22 );
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 22, 23, 24]
//res: 23

findIndex(callback):返回callback中符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1

var arr = [1,2,8,4];        
var res = arr.findIndex((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 2, 8, 4]
//res: 2

join(item):将数组以item为分隔符进行连接，并返回字符串

var arr = [1,2,'aa',4];     
var res = arr.join('|');
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (4) [1, 2, "aa", 4]
//res: 1|2|aa|4

reduce:接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

var arr = [1,2,3,4,5];      
var res = arr.reduce((prev,val)=>(prev + val));
console.log("arr:",arr);
console.log("res:",res);
//输出
//arr: (5) [1, 2, 3, 4, 5]
//res: 15

这个reduce方法还是挺有意思的，后面会专门写一篇讲解reduce的文章，此处立flag!

上面是我对数组array相关方法的总结，欢迎大家在评论区进行补充！