常用数组方法

335 阅读6分钟

一、常用数组方法整理

数组方法简单应用参考 www.runoob.com/jsref/jsref…

方法参数描述作用返回值是否改变原数组
array.concat(array2,array3,...)具体的值或者数组,可以多个连接两个或多个数组,具体的值也可以追加进去拼接后的新数组不改变
array.push(item1,item2,...)具体要追加的值,可以多个数组末尾追加一个或多个元素新的长度改变
array.unshift(item1,item2, ..., itemX)具体添加的值数组开头添加一个或多个新的长度改变
array.pop()无参数删除最后一个元素删除的元素改变
array.shift()无参数删除第一个元素删除的元素改变
array.copyWithin(target, start, end)指定索引,复制开始索引,复制结束索引(默认为数组长度)从数组的指定位置拷贝元素到数组的另一个指定位置中。替换 数组原长度不变改变后的数组改变
array.entries()无参数生成一个数组的迭代对象即遍历器遍历器不改变
array.reverse()无参数颠倒数组中元素的顺序颠倒后的数组改变
array.fill(value, start, end)任意值,开始索引,结束位置填充替换任意位置置换后边的数组改变
array.filter(function(curVal,index,arr), thisValue)函数创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素筛选后的数组不改变
array.find(function(curVal,index,arr),thisValue)函数,函数中的this指向的值返回通过测试(函数内判断)的数组的第一个元素的值通过筛选的第一个值不改变
array.findIndex(function(curVal,index,arr),thisValue)函数,函数中的this指向的值返回通过测试(函数内判断)的数组的第一个元素的索引值通过筛选的第一个值的索引不改变原始值
array.forEach(function(currentValue, index, arr), thisValue)函数,this调用数组的每个元素,并将元素传递给回调函数无返回值 不能return和break不改变
array.some(function(currentValue,index,arr),thisValue)函数检测数组所有元素是否都符合函数条件布尔值不改变
array.some(function(currentValue,index,arr),thisValue)函数检测数组是否有元素符合函数条件布尔值不改变
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)函数累加从左到右
array.includes(searchElement, fromIndex)查找的元素和开始查找的索引查找数组是否包含一个指定值布尔值不改变
array.indexOf(item,start)查找的元素和开始查找的索引从前往后查找,返回数组中某个指定元素的位置索引值不改变
array.lastIndexOf(item,start)查找的元素和开始查找的索引从后向前找,返回数组中某个指定元素最后出现的位置索引值不改变
array.slice(start, end)开始位置,结束位置(不包含)从已有的数组中返回选定的元素。截取的新数组不改变
array.splice(index,howmany,item1,.....,itemX)开始位置,删除几个元素,要添加的元素添加或删除数组中的元素删除元素的数组改变原数组
Array.isArray(obj)要判断的对象判断某个对象是否为数组布尔值不改变
Array.from(object, mapFunction, thisValue)要转化为数组的对象,数组中每个元素要调用的函数,映射函数(mapFunction)中的 this 对象将类数组返回一个数组生成的数组不改变原对象

二、着重介绍几个方法

1.reduce/reduceRight用法 归并方法

  • 参数介绍
Array.reduce(function(total, currentValue, currentIndex, arr){
    ...
}, initialValue)
//<!--arr 表示原数组;-->
//<!--prev 表示上一次调用回调时的返回值,或者初始值 init;-->
//<!--cur 表示当前正在处理的数组元素;-->
//<!--index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;-->
//<!--init 表示初始值。-->

  • 用例
var arr = [1,2,3,4,5];
//1.求和
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
});

由于未传入初始值,所以开始时prev的值为数组第一项,cur的值为数组第二项,相加之后返回值作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

//2.求最大值
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值,所以开始时prev的值为数组第一项,cur的值为数组第二项,取两值最大值后继续进入下一轮回调。

 //3.数组去重
 var newArr = arr.reduce(function(prev,cur){
    prev.indexOf(cur) == -1 && prev.push(cur);
    return prev;
 },[])

实现原理:

① 初始化一个空数组
② 将需要去重处理的数组中的第1项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化数组中
③ 将需要去重处理的数组中的第2项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
⑥ 将这个初始化数组返回

还可以用来处理一些数组对象等
参考文章:segmentfault.com/a/119000001… 还有更多高阶用法

2. forEach()、map()、filter()等迭代方法

如何处理数组的每一项,这个时候就得用到迭代方法,能够轻松遍历数组而不用去使用for。

1.forEach和map

var arr = [1,-2,3,4,-5];
arr.forEach(function(item,index,array){
    array[index] = item * 2;
});
console.log(arr);   // [2,-4,6,8,-10]

var newArr = arr.map(function(item,index,array){
    return item * 2;
});
console.log(newArr);   // [2,-4,6,8,-10]

区别: map()有返回值是改变后的数组,forEach无返回值 二者都不会改变原数组

出于性能考虑而进行使用上的选择
很多初学者总会陷入过分追求性能的误区,而忽略了语义和可读性。
如果只谈性能,显然是 for > forEach > map,为什么 for 的性能比较好?
读一下 forEach 和 map 的规范就知道了。map 会返回一个等长数组,forEach 不会,所以 forEach 大于 map。但是哪个快和应该使用哪个,并不应该划等号。 如果你需要将数组按照某种规则映射为另一个数组,就应该用 map。
如果你需要进行简单的遍历,用 forEach 或者 for of。
如果你需要对迭代器进行遍历,用 for of。 如果你需要过滤出符合条件的项,用filter。 如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。 不要担心这样会慢,你那点数据量浏览器根本不 care。
如果你真的需要考虑性能,或者有 break 的需求,就用 for 吧。 但是如果真的到了这一步,你应该不会来问这个问题。

3.indexOf和lastIndexOf 的区别

indexOf(num) 从前到后 查找 num 位置,返回索引值
indexOf(num1,num2) 从num2往后查找num1位置,返回索引值

lastIndexOf(num) 从后到前 查找num 位置,返回索引值
lastIndexOf(num1,num2) 从mun2往前查找num1位置,返回索引值

!!!他们输出的索引值 一定是根据其查找顺序找到的第一个该元素的索引值