一、常用数组方法整理
数组方法简单应用参考 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位置,返回索引值
!!!他们输出的索引值 一定是根据其查找顺序找到的第一个该元素的索引值