今天突然想要好好整理一下js数组的所有方法，一直知道挺多的，今天整理完才发现这么多！！
有11个常规方法和9个高阶方法，一篇文章给你全讲完！可以收藏起来慢慢看哦
1、slice
定义：从当前数组中选择元素，返回一个新数组。第一个参数表示选择元素的起始位置，第二个元素表示选择元素的结束位置
语法：array.slice(start,end)
示例：
//slice 示例
var arr = [1,2,3,4,5]
var arr2 = arr.slice(0,3)
console.log(arr2) //[1,2,3] 选取从索引0到索引3的元素，不包含索引3
var arr3 = arr.slice(2)
console.log(arr3) //[3,4,5] 选取从索引2到数组结尾的所有元素
var arr4 = arr.slice()
console.log(arr4) //[1,2,3,4,5] 没有传任何参数时，默认选择所有元素，即复制一个数组
var arr5 = arr.slice(-3,-1)
console.log(arr5) //[3,4] 参数为负数时,从数组末尾算起,选取数组末尾第3个元素到数组末尾第1个元素
console.log(arr) //[1,2,3,4,5] 注意slice不改变原数组，而是返回一个新数组
接下来这个是splice，在数组方法中很常用，而且和slice只差一个字母，注意不要弄混
2、splice
定义：从当前数组中删除或者添加元素，并返回被删除的元素
语法：array.splice(index,num,item1,item2,...,itemX)
示例：
//splice 示例
var arr = ['a','b','c','d','e']
var arr2 = arr.splice(0,1)
console.log(arr2) //['a'] 从0索引开始数起,删除一个元素，并返回被删除的元素组成的数组
console.log(arr) //['b','c','d','e']注意splice会改变原数组，第一个元素已经被删除掉了
var arr3 = arr.splice(1,2)
console.log(arr3) //['c','d'] 从1索引开始数起,删除两个元素，并返回被删除的元素组成的数组
console.log(arr) //['b','e'] 现在原数组只剩下b,e两个元素了，我们再添加一些新元素
var arr4 = arr.splice(0,0,'f','g')
console.log(arr4) //[]
console.log(arr) //['f','g','b','e'] 不删除元素，并从0位置开始添加f,g两个元素
3、push
定义：在数组末尾添加元素，并返回数组长度
语法：array.push(item1,item2,...,itemX)
示例：
//push 示例
var arr = ['a','b']
var length = arr.push('c','d')
console.log(length) //4 返回数组的长度
console.log(arr) //['a',b','c','d']
4、pop
定义：删除数组末尾最后一个元素，并返回被删除的元素
语法：array.pop()
示例：
//pop 示例
var arr = ['a','b']
var element= arr.pop()
console.log(element) //b 删除数组最后一个元素，返回被删除的元素
console.log(arr) //['a']
var element2= arr.pop()
console.log(element2) //a 再删一个
console.log(arr) //[]
var element3= arr.pop()
console.log(element3) //undefined 无法操作空数组
console.log(arr) //[]
5、shift
定义：删除数组的第一个元素，并返回被删除的元素
语法：array.shift()
示例：
//shift 示例
var arr = ['a','b']
var element= arr.shift()
console.log(element) //a 删除数组第一个元素，返回被删除的元素
console.log(arr) //['b']
var element2= arr.shift()
console.log(element2) //b 再删一个
console.log(arr) //[]
var element3= arr.shift()
console.log(element3) //undefined 无法操作空数组
console.log(arr) //[]
6、unshift
定义：在数组头部添加元素，并返回数组长度
语法：array.unshift(item1,item2,...,itemX)
示例：
//unshift 示例
var arr = ['a','b']
var length = arr.unshift('c','d')
console.log(length) //4 返回数组的长度
console.log(arr) //['c','d','a',b']
7、concat
定义：连接多个元素或者数组，组成一个新数组，并返回新数组
语法：array.concat(item1,item2,...,itemX,arr1,arr2,...,arrX)
示例：
//concat 示例
var arr = ['a','b']
var arr2= arr.concat('c','d',[1,2],['e','f'])
console.log(arr2) //["a", "b", "c", "d", 1, 2, "e", "f"] 组成一个新数组
console.log(arr) //['a',b'] 不改变原数组
8、reverse
定义：将数组反转
语法：array.reverse()
示例：
//reverse 示例
var arr = ['a', 'b', 'c', 'd']
arr.reverse()
console.log(arr) //['d','c','b','a']
9、indexOf
定义：在数组中从左往右查找某元素的位置，可以接收2个参数，第一个参数表示要查找的元素，第二个参数表示查找的起始位置，没有找到的话返回-1
语法：array.indexOf(item,start)
示例：
//indexOf 示例
var arr = ['a', 'b', 'c', 'd', 'b']
var index = arr.indexOf('a',2)
console.log(index) //-1 从2的位置开始往右查找，找不到a这个元素
var index2 = arr.indexOf('b',2)
console.log(index2) //4 从2的位置开始往右查找，第一个出现b元素是在位置4
var index3 = arr.indexOf('a')
console.log(index3) //0 不传第二个参数默认从0开始查找，找到a的位置为0
10、lastIndexOf
定义：在数组中从右往左查找某元素的位置，可以接收2个参数，第一个参数表示要查找的元素，第二个参数表示查找的起始位置，没有找到的话返回-1
语法：array.lastIndexOf(item,start)
示例：
//lastIndexOf 示例
var arr = ['a', 'b', 'c', 'd', 'b']
var index = arr.lastIndexOf('a',2)
console.log(index) //0 从2的位置开始往左查找，找到a的位置为0
var index2 = arr.lastIndexOf('b',2)
console.log(index2) //1 从2的位置开始往左查找，第一个出现b元素是在位置1
var index3 = arr.lastIndexOf('a')
console.log(index3) //0 不传第二个参数默认从数组末尾开始查找，找到a的位置为0
11、join
定义：将数组中的每个元素通过分隔符连接起来，并返回字符串，只接收分隔符这一个参数，没传的话默认用逗号分隔
语法：array.join('分隔符')
示例：
//join 示例
var arr = ['a', 'b', 'c', 'd']
var string= arr.join('-')
console.log(string) // a-b-c-d
var string2= arr.join()
console.log(string2) // a,b,c,d 没有传分隔符默认用逗号分隔
var string3= arr.join('')
console.log(string3) // abcd 使用空格分隔
var arr2 = string3.split('') //注意是split,不是slice也不是splice,这里是字符串方法
console.log(arr2) //['a', 'b', 'c', 'd'] 把字符串分割成字符串数组
以下是高阶方法：
12、map
定义：接收一个回调函数作为参数，对数组里面的每个元素进行处理，处理后的数据组成一个新数组，并返回。
语法：array.map(function(item, index, array){})
示例：
//map 示例
var arr = [1, 2, 3, 4, 5]
var arr2 = arr.map((item, index, array) => {
console.log(item) //数组中的元素
console.log(index) //元素索引
console.log(array) //数组自身
return item * item
})
console.log(arr2) //[1,4,9,16,25]
var arr3 = arr.map(String); //调用自带的String方法可以把元素转换为字符串
console.log(arr3) // ['1', '2', '3', '4', '5']
13、reduce
定义：接收一个函数（这个函数必须接收2个参数）作为参数，将数组中的前两个元素作用在这个函数中，然后将函数返回的结果和第三个元素做累积计算，以此类推
语法：array.reduce(function(x,y){})
示例：
//reduce 示例
var arr = [1, 2, 3, 4, 5]
var sum= arr.reduce((x,y) => {
return x+y //x=1,y=2,求和后返回3
}) //x=3,y=3,求和后返回6
//x=6,y=4,求和后返回10
//x=10,y=5,求和后返回15
console.log(sum) //15 最终返回数组所有元素的和
14、sort
定义：对数组中的所有元素进行排序，可以接收一个函数来定义排序规则
语法：array.sort(function(x,y){})
示例：
//sort 示例
var arr = ['B','C','A']
arr.sort() // ['A','B','C] 排序正常
var arr2 = ['B','a','C']
arr2.sort() //['B','C','a'] 字符串根据ASCII码排序，小写字母a的ASCII码在大写字母之后
var arr3 = [5,10,20,1]
arr3.sort() //[1,10,20,5]默认把元素先转换为String再排序，'1'的ASCII码比'5'小
//所以不要使用sort默认排序！！要给sort传一个函数自定义排序规则
arr3.sort((x, y) => {
if (x < y) {
return -1 //把小的数排前面
}
if (x > y) {
return 1
}
return 0
})
console.log(arr3) //[1,5,10,20]
//也可以倒序
arr3.sort((x, y) => {
if (x < y) {
return 1 //把小的数排后面
}
if (x > y) {
return -1
}
return 0
})
console.log(arr3) //[20,10,5,1]
15、some
定义：接收一个函数作为条件，遍历数组中是否有元素满足这个条件，如果有，返回true，并停止遍历，如果没有元素符合条件则返回false
语法：array.some(function(item,index,array){})
示例：
//some 示例
var arr = [1, 20, 5, 10]
var value = arr.some((item, index, array) => {
console.log(item) //第一次是1，第二次是20，因为20已经大于10了，后面的数没有再继续遍历
console.log(index)
console.log(array)
return item > 10
})
console.log(value) //true
16、every
定义：接收一个函数作为条件，遍历数组中是否所有元素都满足这个条件，如果是，返回true，如果有一个不满足就返回false，并结束遍历
语法：array.every(function(item,index,array){})
示例：
//every 示例
var arr = [1, 20, 5, 10]
var value = arr.every((item, index, array) => {
console.log(item) //第一次是1，不满足条件，返回false，结束遍历
console.log(index)
console.log(array)
return item > 10
})
console.log(value) //false
17、filter
定义：接收一个函数作为条件，遍历数组中所有元素，满足条件的元素组成一个新数组，并返回新数组
语法：array.filter(function(item,index,array){})
示例：
//filter 示例
var arr = [1, 20, 5, 10]
var arr2= arr.filter((item, index, array) => {
console.log(item)
console.log(index)
console.log(array)
return item >= 10
})
console.log(arr2) //[20,10]
18、find
定义：接收一个函数作为条件，查找数组中满足这个条件的第一个元素，并返回这个元素，结束查找
语法：array.find(function(item,index,array){})
示例：
//find 示例
var arr = [1, 20, 5, 10]
var value= arr.find((item, index, array) => {
console.log(item)
console.log(index)
console.log(array)
return item >= 10
})
console.log(value) //20 10也符合条件，但是找到第一个以后，就结束查找了
19、findIndex
定义：接收一个函数作为条件，查找数组中满足这个条件的第一个元素，并返回这个元素的索引，结束查找
语法：array.findIndex(function(item,index,array){})
示例：
//findIndex 示例
var arr = [1, 20, 5, 10]
var value= arr.findIndex((item, index, array) => {
console.log(item)
console.log(index)
console.log(array)
return item >= 10
})
console.log(value) //1 10也符合条件，但是找到第一个以后，就结束查找了
20、forEach
定义：接收一个函数作为参数，将数组中的每个元素进行处理，并返回
语法：array.forEach(function(item,index,array){})
示例：
//forEach 示例
var arr = [1, 20, 5, 10]
var sum = 0
arr.forEach((item, index, array) => {
console.log(item)
console.log(index)
console.log(array)
sum = sum+item
})
console.log(sum) //36
以上就是js数组的所有方法啦，有遗漏的话欢迎大家评论区补充哈~
如果有帮助到你，可以点击喜欢哈（笔芯）