js 数组方法大全（示例+解析）

今天突然想要好好整理一下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数组的所有方法啦，有遗漏的话欢迎大家评论区补充哈~
如果有帮助到你，可以点击喜欢哈（笔芯）