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

})

回调函数参数说明：

1. item：数组中正在处理的元素

2. index：数组中正在处理的元素的下标

3. 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

})

回调函数参数说明：

1. item：数组中正在处理的元素
2. index：数组中正在处理的元素的下标
3. 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 条件

})

回调函数参数说明：

1. item：数组中正在处理的元素
2. index：数组中正在处理的元素的下标
3. 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 条件

})

回调函数参数说明：

1. item：数组中正在处理的元素
2. index：数组中正在处理的元素的下标
3. 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 条件

})

回调函数参数说明：

1. item：数组中正在处理的元素
2. index：数组中正在处理的元素的下标
3. 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

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处