转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：https://blog.csdn.net/pcaxb/article/details/101779805
JavaScript原生系列-Array数组方法总结
目录
2.push 在数组末尾添加一个或多个元素，返回修改后数组长度
4.unshift 在数组头部添加一个或多个元素，返回修改后数组长度
5.sort 对数组元素排序，返回排序后的数组，默认排序顺序是根据字符串Unicode编码
7.splice 删除或插入元素，返回数组删除的项，没有删除的项，返回空数组
2.join 将数组所有元素连接成一个字符串，返回连接后的字符串
4.indexOf 获取查询元素第一次出现的索引，找不到查询元素，则返回-1
5.lastIndexOf 获取查询元素最后一次出现的索引，找不到查询元素，则返回-1
6. toString 返回有数组每个元素的字符串形式拼接而成的以逗号分隔的字符串
1.every()，数组所有元素都满足要求则返回true，否则返回false
2.reduceRight()，从数组最后一项开始遍历到第一项
2.普通for优化,这种方法基本上是所有循环遍历方法中性能最高的一种
3.弱化版for循环,这种方法的性能要远远小于普通for循环
一、会改变原数组
1.pop 移除数组末尾最后一项，返回移除项
var arr1 = [1,2,3,4];
L(arr1.pop(),arr1);//[1, 2, 3]
L([].pop());//undefined2.push 在数组末尾添加一个或多个元素，返回修改后数组长度
var arr2 = [1,2,3,4];
L(arr2.push(5,6),arr2);//6 [1, 2, 3, 4, 5, 6]
//Array.prototype.push.apply 第一个参数类数组，第二个参数类数组，合并两个数组，赋值给第一个数组
L(Array.prototype.push.apply(arr2,[7,8]),arr2);//8 [1, 2, 3, 4, 5, 6, 7, 8]
3.shift 移除数组第一项，返回移除的元素
var arr3 = [1,2,3,4];
L(arr3.shift(),arr3);//1 [2, 3, 4]
L(Array.prototype.shift.apply(arr3),arr3);//2 [3, 4]
//自定义shift
Array.prototype.shift = function () {
var temp = this[0];
for (var i = 1; i < this.length; i++) {
this[i-1] = this[i];
}
this.length--;
return temp;
}
L(arr3.shift(),arr3);
4.unshift 在数组头部添加一个或多个元素，返回修改后数组长度
var arr4 = [1,2,3,4];
L(arr4.unshift(0,0,0),arr4);// 7 [0, 0, 0, 1, 2, 3, 4]
L(Array.prototype.unshift.apply(arr4,[1,1,1]),arr4);//10 [1, 1, 1, 0, 0, 0, 1, 2, 3, 4]
5.sort 对数组元素排序，返回排序后的数组，默认排序顺序是根据字符串Unicode编码
var fruit = ['cherries', 'apples', 'bananas'];
L(fruit.sort());//["apples", "bananas", "cherries"]
//注意10在2之前,因为在 Unicode 指针顺序中"10"在"2"之前
var scores = [1, 10, 21, 2]; // [1, 10, 2, 21]
L(scores.sort());
// 在Unicode中, 数字在大写字母之前,大写字母在小写字母之前.
var things = ['word', 'Word', '1 Word', '2 Words'];
L(things.sort());//["1 Word", "2 Words", "Word", "word"]
//自定义排序
function compare(a, b) {
if(a < b) {
return -1;
}else if(a > b) {
return 1;
}else {
return 0;
}
}
var arr11 = [1, 10, 21, 2];
L(arr11.sort(compare)); //[1, 2, 10, 21]
L("=====================================")
L(arr11.sort( function(a,b){return a-b} ))//a-b升序 [1, 2, 10, 21]
L(arr11.sort( function(a,b){return b-a} ))//b-a降序 [21, 10, 2, 1]
L("=====================================")
6.reverse 颠倒数组元素，返回颠倒后的数组
var arr6 = [1,32,8,2,10,3,48,41];
L(arr6.reverse(),arr6);
//[41, 48, 3, 10, 2, 8, 32, 1][41, 48, 3, 10, 2, 8, 32, 1]
7.splice 删除或插入元素，返回数组删除的项，没有删除的项，返回空数组
var arr7 = [1,32,8,2,10,3,48,41];
//删除，前闭后开，第一个参数是开始位置，第二个参数是结束位置
L(arr7.splice(0,2),arr7);// [1, 32] [8, 2, 10, 3, 48, 41]
arr7 = [8, 2, 10, 3, 48, 41]
//插入， 第一个参数是插入的位置，第二个参数是插入删除几个元素，第三个参数是插入内容
// L(arr7.splice(0,0,"cc"),arr7); //[] ["cc", 8, 2, 10, 3, 48, 41]
// L(arr7.splice(0,2,"cc"),arr7);//[8, 2] ["cc", 10, 3, 48, 41]
L(arr7.splice(3,2,"cc"),arr7);//[3, 48] [8, 2, 10, "cc", 41]
//替换
arr7 = [8, 2, 10, 3, 48, 41]
L(arr7.splice(3,1,"cc"),arr7);//[3] [8, 2, 10, "cc", 48, 41]
二、不会改变原数组
1.concat 合并两个或多个数组，返回新数组
var arr01 = [1,2,3],arr02 = [4,5,6],arr03;
arr03 = arr01.concat(arr02);
L(arr01,arr02,arr03);
// (3) [1, 2, 3] (3) [4, 5, 6] (6) [1, 2, 3, 4, 5, 6]
2.join 将数组所有元素连接成一个字符串，返回连接后的字符串
var arr04 = [1, 2, 3, 4, 5, 6];
L(arr04.join("-"),arr04);//1-2-3-4-5-6 [1, 2, 3, 4, 5, 6]
L(arr04.join("-").split("-"));//1-2-3-4-5-6到["1", "2", "3", "4", "5", "6"]
//split是字符串的函数
3.slice 截取数组元素到新数组中，返回新数组
var arr05 = [1, 2, 3, 4, 5, 6];
//从1开始截取后面所有元素
L(arr05.slice(1),arr05);
//[2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]
arr05 = [1, 2, 3, 4, 5, 6];
//第一个参数开始位置，第二个参数结束位置
L(arr05.slice(1,3),arr05);// [2, 3] [1, 2, 3, 4, 5, 6]
//截取原数组倒数第三个元素与倒数第一个元素之间的元素，前闭后开
arr05 = [1, 2, 3, 4, 5, 6];
L(arr05.slice(-3,-1),arr05);//[4,5]
4.indexOf 获取查询元素第一次出现的索引，找不到查询元素，则返回-1
arr06 = [1, 2, 3, 4, 5, 6];
L(arr06.indexOf(3),arr06.indexOf(-3));//2 -1
5.lastIndexOf 获取查询元素最后一次出现的索引，找不到查询元素，则返回-1
arr06 = [1, 2, 3, 4, 5, 6,3,2];
L(arr06.lastIndexOf(3),arr06.lastIndexOf(-3));//6 -1
6. toString 返回有数组每个元素的字符串形式拼接而成的以逗号分隔的字符串
arr06 = [1, 2, 3, 4, 5, 6, 3, 2];
L(arr06.toString());//1,2,3,4,5,6,3,2
三，迭代方法
每个方法接受含有三个参数的函数，三个参数为：数组中的项，元素索引，数组本身
1.every()，数组所有元素都满足要求则返回true，否则返回false
var number = [1,2,3,4,5,6,7,8];
var res = number.every(function(item, index, array) {
// L(item,index,array);
return (item > 0);
})
L(res); //每个都返回true就是true
2.some()，只要有满足要求的就返回true
var res = number.some(function(item, index, array) {
return (item > 2);
})
L(res); //true3.filter()，返回过滤后的结果数组
var res = number.filter(function(item, index, array) {
return (item > 2);
})
L(res); //[3, 4, 5, 6, 7, 8]
4.map()，返回在函数中处理过的数组
var res = number.map(function(item, index, array) {
return (item * 2);
})
L(res); //[2, 4, 6, 8, 10, 12, 14, 16]
5.forEach()，遍历整个数组
var res = number.forEach(function(item, index, array) {
//执行某些操作
if(item > 6) L(item,index,array);
})四，归并方法
1.reduce()，从数组第一项开始遍历到最后
开始执行回调函数prev为1，cur为2，第二次执行回调函数，在之前的基础上加1函数返回的值都会作为一个参数传给下一项，最后执行函数时就是28+8
var number4 = [1,2,3,4,5,6,7,8];
var res4 = number.reduce(function(prev, cur, index, array) {
// L(prev,cur,index,array);
return prev + cur;
})
L(res4); //1+2+3+4+5+6+7+8=36
2.reduceRight()，从数组最后一项开始遍历到第一项
var res5 = number.reduceRight(function(prev, cur, index, array) {
L(prev,cur,index,array);
return prev + cur;
})
L(res5); //8+7+6+5+4+3+2+1=36
五、JS数组遍历的几种方式性能比较
var array = [2,4,6,8];1.普通for
for (let index = 0; index < array.length; index++) {
const element = array[index];
L(array[index])
}2.普通for优化,这种方法基本上是所有循环遍历方法中性能最高的一种
for (let index = 0,len = array.length; index < len; index++) {
const element = array[index];
L(array[index])
}3.弱化版for循环,这种方法的性能要远远小于普通for循环
简要说明: 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断
for(let j = 0; array[j] != null; j++) {
L(j,array[j])
}
L("====",array[10],array[10] != null,array[10] === undefined,array[10] == null)//false true true
4.foreach循环
简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱。不能正确响应break、continue和return语句
array.forEach(function(item,index){
L(item,index);
});5.foreach变种
简要说明: 遍历类数组类型,实际性能要比普通foreach弱
var likenessArray = {"0":"a","1":"b","2":"c",length:3};;
Array.prototype.forEach.call(likenessArray,function(item,index){
L(item,index);
})6.forin循环
简要说明: 实际测试中，它的效率是最低的。forin是为遍历对象设计的。
for(var index in array){
L(array[index],index);
}7.map遍历
简要说明: 虽然用起来比较优雅，但实际效率还比不上foreach
array.map(function(item,index){
L(item,index);
})8.forof遍历(需要ES6支持)
简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环。用来遍历各种类数组集合
for(let item of array){
L(item);
}javascript原生遍历方法的建议用法：
- 用for循环遍历数组，效率最高，如果要好看建议使用forEach，因为forEach比map效率高。
- 用for-in遍历对象
- 用for-of遍历类数组对象（ES6）
- 用Object.keys()获取对象属性名的集合
参考资料：JS几种数组遍历方式总结
数组资料 Array
数组遍历JS几种数组遍历方式总结
JavaScript原生系列-Array数组方法总结
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
