JS常用数组API汇总
1. 数组尾部出入栈push()与pop()
push()函数:将元素添加到数组的末尾并返回数组的新长度
var arr1 = [80, 25, 100];
var length1 = arr1.push(90);
console.log(arr1);//[80, 25, 100, 90]
console.log(length1);//4
//如果需要一次添加多个元素，参数以逗号分隔
var arr2 = [80, 25, 100];
var length2 = arr2.push(90, 35, 200);
console.log(arr2);//[80, 25, 100, 90, 35, 200]
console.log(length2);//6
pop()函数:删除数组的末尾的元素，并返回删除的元素
var arr1 = [80, 25, 100, 90];
var popItem1 = arr1.pop();
console.log(arr1);//[80, 25, 100]
console.log(popItem1);//90
ar arr2 = [{'aaa':111}, {'bbb':222}, {'ccc':333}];
var popItem2 = arr2.pop();
console.log(arr2);//[{'aaa':111},{'bbb':222}]
console.log(popItem2);//{'ccc':333}
2.数组头部出入栈unshift()与shift()
unshift()函数:将元素添加到数组的头部并返回数组的新长度
var arr1 = [80, 25, 100];
var length1 = arr1.unshift(90);
console.log(arr1);//[90, 80, 25, 100]
console.log(length1);//4
//如果需要一次添加多个元素，参数以逗号分隔
var arr2 = [80, 25, 100];
var length2 = arr2.unshift(90, 35, 200);
console.log(arr2);//[90, 35, 200, 80, 25, 100]
console.log(length2);//6
shift()函数:删除数组的头部的元素，并返回删除的元素
var arr1 = [80, 25, 100, 90];
var popItem1= arr1.shift();
console.log(arr1);//[25, 100, 90]
console.log(popItem1);//80
var arr2 = [{'aaa':111}, {'bbb':222}, {'ccc':333}];
var popItem2= arr2.shift();
console.log(arr2);//[{'bbb':222}, {'ccc':333}]
console.log(popItem2);//{'aaa':111}
3. 数组转为字符串String()与join()
String()函数:将数组中每个元素都转为字符串，以逗号分隔，返回拼接的字符串，不改变原数组
var arr = [80, 25, 100, 90];
var str = String(arr);
console.log(arr);//[80, 25, 100, 90]
console.log(str);//80,25,100,90
join()函数:将数组中每个元素都转为字符串，可自定义连接符，返回拼接的字符串，不改变原数组
var arr = [80, 25, 100, 90];
var str1 = arr.join('');
var str2 = arr.join(',');
var str3 = arr.join('-');
console.log(arr);//[80, 25, 100, 90]
console.log(str1);//802510090
console.log(str2);//80,25,100,90
console.log(str3);//80-25-100-90
4.数组拼接concat()、选取slice()
concat()函数:将其它元素或其它数组拼接到当前数组末尾,返回新数组，不改变原数组
语法:var newArr = arr.concat(val1,val2,…,arr1,arr2…)
var arr = [80, 25];
var newArr1 = arr.concat(65, 98, 33);
var addArr = [69, 23];
var newArr2 = arr.concat(65, 98, 33, addArr);//数组addArr会被打散添加到新数组中
console.log(arr)//[80, 25] --原数组未修改
console.log(newArr1);//[80, 25, 65, 98, 33]
console.log(newArr2);//[80, 25, 65, 98, 33, 69, 23]
slice()函数:获取原数组中指定开始位置到结束位置之间（含头不含尾）的所有元素，组成的临时子数组并返回，不改变原数组
语法:var newArr = arr.slice(startIndex,endIndex)
var arr = [80, 69, 68, 32, 55, 88];
var newArr1 = arr.slice();//不给参数，复制整个数组中所有元素
console.log(newArr1);//[80, 69, 68, 32, 55, 88]
var newArr2 = arr.slice(3);//一个参数代表起始位置，一直取到数组末尾
console.log(newArr2);//[32, 55, 88]
var newArr3 = arr.slice(0,3);//含头不含尾，实际取下标为0,1,2的元素
console.log(newArr3);//[80, 69, 68]
var newArr4 = arr.slice(2,5);//含头不含尾，实际取下标为2,3,4的元素
console.log(newArr4);//[68, 32, 55] //参数取负值表示倒数第n个元素的下标，arr.slice(-m,-n) 与 arr1.slice(arr.length-m,arr.length-n) 等价
var newArr5 = arr.slice(-4,-2); console.log(newArr5);//[68, 32]
var newArr6 = arr.slice(arr.length-4,arr.length-2);
console.log(newArr6);//[68, 32]
5.数组修改splice()
splice()函数:这是一个非常强大的api，可以对数组进行删除、插入、替换操作,调用该函数会改变原数组
语法:var deleteArr = arr.splice(startIndex,n,val1,val2…arr1,arr2…),先删除startIndex位置的n个元素，再插入val1,val2,…arr1,arr2…;
说明:
1.只有一个参数为删除操作，删除以该值为起始的所有元素
2.有两个参数也是删除操作，第一参数是起始索引，第二个参数是删除元素的数量
3.有三个以上参数(包括三个)且第二个参数为0，为插入操作，第一参数是起始索引，第二个参数为0代表不进行删除操作，后面的参数是插入的值
4.有三个以上参数(包括三个)且第二个参数不为0，为替换操作，第一参数是起始索引，第二个参数为要删除的元素个数，后面的参数是插入的值
//一个参数的删除操作
var arr1 = [11, 22, 33, 44, 55, 66];
var deleteArr1 = arr1.splice(0);//删除从下标0开始的所有元素
console.log(arr1);//[]
console.log(deleteArr1);//[11, 22, 33, 44, 55, 66]
//两个参数的删除操作
var arr2 = [11, 22, 33, 44, 55, 66];
var deleteArr2 = arr2.splice(1, 2);//删除从下标1开始的2个元素
console.log(arr2);//[11, 44, 55, 66]
console.log(deleteArr2);//[22, 33]
//插入操作
var arr3 = [11, 22, 33, 44, 55, 66];
var addArr = [100, 200, 300];
var deleteArr3 = arr3.splice(3, 0, 331, 332, addArr);//从索引3开始插入元素331、332和数组[100, 200, 300]
console.log(deleteArr3);//[]
//注意:addArr 没有被打散而是整体作为一个元素插入
console.log(arr3);//[11, 22, 33, 331, 332, [100, 200, 300], 44, 55, 66]
//替换操作
var arr4 = [11, 22, 33, 44, 55, 66];
var addArr = [100, 200, 300];
var deleteArr4 = arr4.splice(1, 2, 221, 222, addArr);//删除从下标1开始的2个元素并替换为221、222和数组[100, 200, 300]
console.log(arr4);//[11, 221, 222, [100, 200, 300], 44, 55, 66]
console.log(deleteArr4);//[22, 33]
6.迭代方法forEach()、map()、filter()、every()、some()
forEach()函数:对原数组中每个元素执行相同的操作,返回值：undefined
语法：arr.forEach(function(item,index,arr){
//do something
})
回调函数参数说明：
-
item：数组中正在处理的元素
-
index：数组中正在处理的元素的下标
-
arr：forEach函数正在操作的数组
//数组元素为简单数值 var arr1 = [11, 22, 33, 44, 55, 66]; var returnVal1 = arr1.forEach(function(item,index,arr){ arr[index] = item * 2 }) console.log(arr1);//[22, 44, 66, 88, 110, 132] console.log(returnVal1);//undefined //数组元素为对象 var arr2 = [{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}]; var returnVal2 = arr2.forEach(function(item,index,arr){ arr[index]['ccc'] = item.aaa + item.bbb }) console.log(arr2); //[{'aaa':111,'bbb':101,'ccc':212}, {'aaa':222,'bbb':202,'ccc':424}, {'aaa':333,'bbb':303,'ccc':636}]; console.log(returnVal2);//undefined
map()函数:数组元素为原始类型:创建一个新数组，结果是原数组中每个元素执行回调函数返回的结果,返回值：执行回调函数后生成的新数组若数组元素为引用类型，回调函数处理item时会直接影响原数组
语法：var newArr = arr.map(function(item,index,arr){
//do something
})
回调函数参数说明：
- item：数组中正在处理的元素
- index：数组中正在处理的元素的下标
- arr：map函数正在操作的数组
//数组元素为简单数值（原始类型）
var arr1 = [11, 22, 33, 44, 55, 66];
var returnArr1 = arr1.map(function(item,index,arr){ return item.toString()+'-' + index.toString() })
console.log(returnArr1);//["11-0", "22-1", "33-2", "44-3", "55-4", "66-5"]
//数组元素为对象（引用类型）回调函数处理item时会直接影响原数组*
var arr2 = [{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}];
var returnArr2 = arr2.map(function(item,index,arr){ item['ccc'] = item.aaa - item.bbb return item })
console.log(arr2); //[{'aaa':111,'bbb':101,'ccc':10}, {'aaa':222,'bbb':202,'ccc':20}, {'aaa':333,'bbb':303,'ccc':30}];
console.log(returnArr2); //[{'aaa':111,'bbb':101,'ccc':10}, {'aaa':222,'bbb':202,'ccc':20}, {'aaa':333,'bbb':303,'ccc':30}];
filter()函数:选取原数组中符合条件的元素组成新数组,返回值：回调函数函数中返回true的元素组成的新数组
语法：var filterArr = arr.filter(function(item,index,arr){
return 条件
})
回调函数参数说明：
- item：数组中正在处理的元素
- index：数组中正在处理的元素的下标
- arr：filter函数正在操作的数组
*//数组元素为简单数值（原始类型）*
var arr1 = [11, 22, 33, 44, 55, 66];
var returnArr1 = arr1.filter(function(item,index,arr){ return item > 33 })
console.log(arr1);*//[11, 22, 33, 44, 55, 66]*
console.log(returnArr1);*//[44, 55, 66]
//数组元素为对象（引用类型）*
var arr2 = [{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}];
var returnArr2 = arr2.filter(function(item,index,arr){ return item.bbb > 200 })
console.log(arr2);*//[{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}]*
console.log(returnArr2 );*//[{'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}]*
every()函数:判断arr中每个元素是否都符合要求，只有都符合条件时，才返回true，只要有一个元素不符合条件就返回false
语法：var bool = arr.filter(function(item,index,arr){
return 条件
})
回调函数参数说明：
- item：数组中正在处理的元素
- index：数组中正在处理的元素的下标
- arr：every函数正在操作的数组
//数组元素为简单数值（原始类型）
var arr1 = [11, 22, 33, 44, 55, 66];
var bool11 = arr1.every(function(item,index,arr){ return item > 33 })
var bool12 = arr1.every(function(item,index,arr){ return item > 10 })
console.log(bool11);//false
console.log(bool12);//true
//数组元素为对象（引用类型）
var arr2 = [{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}];
var bool21 = arr2.every(function(item,index,arr){ return item.bbb > 200 })
var bool22 = arr2.every(function(item,index,arr){ return item.aaa > 100 })
console.log(bool21);//false console.log(bool22);//true
some()函数:判断arr中是否包含符合要求的元素，只要有一个元素符合条件就返回true，除非所有元素都不符合条件才会返回false
语法：var bool = arr.filter(function(item,index,arr){
return 条件
})
回调函数参数说明：
- item：数组中正在处理的元素
- index：数组中正在处理的元素的下标
- arr：some函数正在操作的数组
//数组元素为简单数值（原始类型）
var arr1 = [11, 22, 33, 44, 55, 66];
var bool11 = arr1.some(function(item,index,arr){ return item > 50 })
var bool12 = arr1.some(function(item,index,arr){ return item > 100 })
console.log(bool11);//true
console.log(bool12);//false
//数组元素为对象（引用类型）
var arr2 = [{'aaa':111,'bbb':101}, {'aaa':222,'bbb':202}, {'aaa':333,'bbb':303}];
var bool21 = arr2.some(function(item,index,arr){ return item.bbb > 200 })
var bool22 = arr2.some(function(item,index,arr){ return item.aaa > 1000 })
console.log(bool21);//true
console.log(bool22);//false
7.获取位置indexOf()和lastIndexOf()
了解find()和findIndex()函数 请移步find()和findIndex()与indexOf()用法与区别
indexOf()函数:从头开始往后查找指定值,返回指定值出现的第一个索引，找不到返回-1
语法：var index = arr.indexOf(searchValue[, startIndex = 0])
var arr1 = [11, 22, 33, 22, 44, 55, 66];
var index1 = arr1.indexOf(22);
console.log(index1)//1
var index2 = arr1.indexOf(22,2);
console.log(index2)//3
var index3 = arr1.indexOf(22,5);
console.log(index3)//-1
lastIndexOf()函数:从数组后面开始往前查找指定值,返回指定值出现的第一个索引，找不到返回-1
语法：var index = arr.lastIndexOf(searchValue[, startIndex = arr.length-1])
var arr1 = [00, 11, 22, 33, 22, 44, 55, 66];
var index1 = arr1.lastIndexOf(22);
console.log(index1)//4
var index2 = arr1.lastIndexOf(22,2);
console.log(index2)//2
var index3 = arr1.lastIndexOf(22,1);
console.log(index3)//-1
8.排序翻转sort()、reverse()
sort()函数:默认仅支持按字符串升序排序,调用该函数会改变原数组
语法：var sortedArr = arr.sort(function(a, b){ return a - b})
//调用默认sort函数，根据字符串升序排序
var arr1 = [28, 8, 3, 56, 29, 7];
var sortedArr1 = arr1.sort()
console.log(arr1);//[28, 29, 3, 56, 7, 8]
console.log(sortedArr1);//[28, 29, 3, 56, 7, 8]
//按升序排序，比较器函数返回a-b
var arr2 = [28, 8, 3, 56, 29, 7];
var sortedArr2 = arr2.sort(function(a, b){ return a - b})
console.log(arr2);//[3, 7, 8, 28, 29, 56]
console.log(sortedArr2);//[3, 7, 8, 28, 29, 56]
//按降序排序，比较器函数返回b-a
var arr3 = [28, 8, 3, 56, 29, 7];
var sortedArr3 = arr3.sort(function(a, b){ return b - a})
console.log(arr3);//[56, 29, 28, 8, 7, 3]
console.log(sortedArr3);//[56, 29, 28, 8, 7, 3]
//数组元素为对象（引用类型）根据元素中a属性升序排序
var arr4 = [{'a':3,'b':111}, {'a':1,'b':222}, {'a':2,'b':333}];
var sortedArr4 = arr4.sort(function(item1, item2){ return item1.a - item2.a})
console.log(arr4);//[{'a':1,'b':222}, {'a':2,'b':333}, {'a':3,'b':111}]
console.log(sortedArr4);//[{'a':1,'b':222}, {'a':2,'b':333}, {'a':3,'b':111}]
reverse()函数:不负责排序，仅颠倒数组元素的顺序,调用该函数会改变原数组
语法：var sortedArr = arr.reverse()
//数组元素为普通元素（原始类型）
var arr1 = [28, 8, 3, 56, 29, 7];
var sortedArr1 = arr1.reverse();
console.log(arr1);//[7, 29, 56, 3, 8, 28]
console.log(sortedArr1);//[7, 29, 56, 3, 8, 28]
//数组元素为对象（引用类型）
var arr2 = [{'a':1,'b':111}, {'a':2,'b':222}, {'a':3,'b':333}];
var sortedArr2 = arr2.reverse();
console.log(arr2);//[{'a':3,'b':333}, {'a':2,'b':222}, {'a':1,'b':111}]
console.log(sortedArr2);//[{'a':3,'b':333}, {'a':2,'b':222}, {'a':1,'b':111}]
作者： 点燃火柴
链接： https://blog.csdn.net/qw8704149/article/details/106559748
来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处
