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数组的所有方法啦,有遗漏的话欢迎大家评论区补充哈~
如果有帮助到你,可以点击喜欢哈(笔芯)

你可能感兴趣的:(js 数组方法大全(示例+解析))