数组的一些相关方法汇总

108 阅读5分钟

1.join (原数组不受影响)

该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串

示例:

let arr = [1,2,3,4,5]
let str = arr.join('-')
console.log(str)//1-2-3-4-5

2.数组的增删(直接改变原数组)

push

该方法可以在数组的最后面,添加一个或者多个元素

示例:

let arr = [1,2,3,4,5]
arr.push(6)
console.log(arr)//[1,2,3,4,5,6]

pop

该方法可以在数组的最后面,删除一个元素

示例:

let arr = [1,2,3,4,5]
arr.pop()
console.log(arr)//[1,2,3,4]

shift

该方法可以在数组的最前面,删除一个元素

示例:

let arr = [1,2,3,4,5]
arr.shift()
console.log(arr)//[2, 3, 4, 5]

unshift

该方法可以在数组的最前面,添加一个或者几个元素

示例:

let arr = [1,2,3,4,5]
arr.unshift(0)
console.log(arr)//[0, 1, 2, 3, 4, 5]

3.reverse 翻转数组

示例:

let arr = [1,2,3,4,5]
arr.reverse()
console.log(arr)//[5,4,3,2,1]

4.concat

该方法可以把两个数组里的元素拼接成一个新的数组

返回值: 返回拼接后的新数组

示例:

let arr1 = [1,2,3],arr2 =[4,5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]

5.slice截取

该方法可以从数组中截取指定的字段,返回出来,;从start下标开始截取,一直到end结束,不包括end

返回值: 返回截取出来的字段

示例:

let arr = [1,2,3,4,5]
let newArr = arr.slice(0,3)
console.log(newArr)//[1, 2, 3]

6.splice删除或替换

该方法有多个参数 start(开始的下标),deletedCount(删除的数量),item(插入的元素)

示例:

let arr = [1,2,3,4,5]
arr.splice(3,1)
console.log(arr)//[1, 2, 3, 5]

7. sort排序

示例:

let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort((a,b)=>{
	return a-b;//从小到大排序
	return b-a;//从大到小排序
})

8. set去重

示例:

let arr = [1,1,2,3,3,4,5,5,6,7,8,8,9];
//可以使用Array.form将伪数组转为数组
let newArr = Array.from(new Set(arr))
console.log(newArr)//[1, 2, 3, 4, 5, 6, 7, 8, 9]
//也可以用扩展运算符(...)将伪数组转化为真数组
let arr1 = [...new Set(arr)]
console.log(arr1)//[1, 2, 3, 4, 5, 6, 7, 8, 9]
})

9.Array.of()

该方法用于将一组值,转换为数组

示例:

let arr = Array.of(1,2,3,4,5)
console.log(arr)//[1, 2, 3, 4, 5]

10.flat数组扁平化

示例:

let arr =[[[1]]].flat(Infinity)
console.log(arr)//[1]

11.查找元素在数组中出现的位置

indexOf 该方法用来查找元素在数组中第一次出现的位置

示例:

let arr =[1,2,3,4,5]
console.log(arr.indexOf(4))//3

lastIndexOf 该方法用来查找元素在数组中最后一次出现的位置

示例:

let arr =[1,2,3,4,5]
console.log(arr.lastIndexOf(4))//3

12 find

返回数组中满足提供的测试函数的第一个元素的值,若没有满足测试函数的元素,则返回undefined

示例:

 let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
  let result = arr.find(item => item.name==='li')
  console.log(result);//返回第一个符合的元素{name:'li',age:10}

13 include

JavaScript数组include()方法检查给定数组是否包含指定的元素。如果数组包含元素,则返回true,否则返回false

示例:

let arr=["AngularJS","Node.js","JQuery"]  
let result=arr.includes("AngularJS");  
console.log(result)//true

14 遍历数组方法

forEach

使用频率较高,实际上性能比普通for循环弱

参数

item 必需。当前元素 index 可选。当前元素的案引值. arr 可选。当前元素所厘的数组对象

示例:

let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
  arr.forEach(item=>{
     console.log(item)
  })

map

该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

参数

item 必需。当前元素 index 可选。当前元素的案引值. arr 可选。当前元素所厘的数组对象

示例:

let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
  arr.map(item=>{
     console.log(item)
  })

filter

有返回值, 过滤出符合条件的元素,不会改变原来数组

参数

item 必需。当前元素 index 可选。当前元素的案引值. arr 可选。当前元素所厘的数组对象

示例:

let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
let newArr = arr.filter(item=>{
    return item.age>13
 })

some

判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

参数

item 必需。当前元素 index 可选。当前元素的案引值. arr 可选。当前元素所厘的数组对象

示例:

let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
  let newArr = arr.some(item=>{
     return item.age>13
  })
  console.log(newArr)//true

every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

参数

item 必需。当前元素 index 可选。当前元素的案引值. arr 可选。当前元素所厘的数组对象

示例:

let arr = [
    { name: 'chen', age: 18 },
    { name: 'li', age: 10 },
    { name: 'li', age: 13 },
    { name: 'huang', age: 44 },
    { name: 'zhou', age: 100 },
  ]
 let newArr = arr.every(item=>{
     return item.age>13
  })
  console.log(newArr)//false

reduce

接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
第二个参数作为第一次调用的a的值

示例:

let reduceArr = [0,1,2,3,4]
let reduceResult = reduceArr.reduce((a, b)=>{ return a + b; })
console.log(reduceResult); // 10

欢迎补充和指正