前端JavaScript、JQuery、Vue、React开发所需要数组方法看这篇博客就可以了

1. arr.push() 和 arr.pop() （数组末尾操作）

在数组的末尾添加一个或多个元素，返回值是数组长度。原数组被改变。

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

在数组的末尾删除一个元素，返回值是被删除的那个元素。原数组被改变。

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

2. arr.unshift() 和 arr.shift() （数组头部操作）

在数组的头部添加一个或多个元素，返回值是数组长度。原数组被改变。

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

在数组的头部删除一个元素，返回值是被删除的那个元素。原数组被改变。

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

3. arr.join()

数组转字符串，join()方法接收一个参数，数组元素分隔符，默认参数是逗号。返回值就是数组转成的字符串，原数组不改变。

let arr = [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr) // [1, 2, 3]

let arr = [1, 2, 3]
console.log(arr.join(':')) // 1:2:3
console.log(arr) // [1, 2, 3]

4. arr.sort()

数组元素排序，默认是按照字符编码排序，原数组被改变。

let arr = [1, 100, 4, 30]
console.log(arr.sort()) // [1, 100, 30, 4]
console.log(arr) // [1, 100, 30, 4]

升序排序

let arr = [1, 100, 4, 30]
// 数字升序函数
function sortAsc(a, b) {
  return a - b
}
console.log(arr.sort(sortAsc)) // [1, 4, 30, 100]
console.log(arr) // [1, 4, 30, 100]

降序排序

let arr = [1, 100, 4, 30]
// 数字升序函数
function sortDesc(a, b) {
  return b - a
}
console.log(arr.sort(sortDesc)) // [100, 30, 4, 1]
console.log(arr) // [100, 30, 4, 1]

5. arr.concat()

用于两个或两个以上数组的拼接，返回值是新数组。原数组不改变。

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

6. arr.slice(start, end)

用于数组截取，返回值就是截取元素组成的新数组。原数组不改变。
参数start可选，可以是负数，负数就是从数组倒着来数。-1是数组最后一个元素，-2是数组倒数第二个元素。
参数end可选，没有end参数，就是到数组末尾。arr.slice(1,5)就是从数组arr第1个元素到第5个元素，不包括第5个元素。

let arr = [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr.slice(1)) // [2, 3, 4, 5, 6, 7, 8]
console.log(arr.slice(-2)) // [7, 8]
console.log(arr.slice(2, 3)) // [3]
console.log(arr.slice()) // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8]

7.arr.splice()

let arr = ['张三', '李四', '王二', '麻子']
console.log(arr.splice(1, 2)) // ['李四', '王二']
console.log(arr) // ['张三', '麻子']

解析：索引1的位置获取2个元素，返回值是获取出来的元素组成的数组，原数组剩下未被获取的元素，原数组被改变。

let arr = ['张三', '李四', '王二', '麻子']
console.log(arr.splice(1, 0, '小明')) // []
console.log(arr) // ['张三', '小明', '李四', '王二', '麻子']

解析：索引1的位置获取0个元素，然后在索引1的位置添加元素’小明’，也可以添加多个元素

let arr = ['张三', '李四', '王二', '麻子']
console.log(arr.splice(1, 2, '小明')) // ['李四', '王二']
console.log(arr) // ['张三', '小明', '麻子']

解析：索引1的位置获取2个元素，然后在索引1的位置添加元素’小明’，也可以添加多个元素

let arr = ['张三', '李四', '王二', '麻子']
console.log(arr.splice(0, arr.length)) // ['张三', '李四', '王二', '麻子']
console.log(arr) // []

解析：索引0的位置获取数组长度个元素，返回值就是整个数组，原数组就变成空数组了。

8. arr.indexOf(item,start) 和 arr.lastIndexOf(item,start)

参数item，查找的元素，必须的
参数start,从start索引开始查找，可选的

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

解析：从数组中，从索引值0开始往后查找3，首次出现3的索引值，返回值是查找项索引值。原数组不改变。

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

解析：从数组中，从索引值3开始往后查找3，首次出现3的索引值，返回值是查找项索引值。

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

解析：从数组中，从索引值arr.length-1开始从后往前查4，首次出现4的索引值，返回值是查找项索引值。原数组不改变。

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

解析：从数组中，从索引值4开始从后往前查4，首次出现4的索引值，返回值是查找项索引值。

9. arr.reverse()

函数的作用是数组反转，返回值是反转后的数组，改变原数组

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

10. arr.forEach(function(item,index,arr){})

参数item，必须，当前元素值
参数index，可选，当前元素在数组中的索引值
参数arr，可选，当前元素所在数组
此循环遍历方法没有返回值

let arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, arr) {
  console.log(item) // 循环分别打印1 2 3 4 5
  console.log(index) // 循环分别打印0 1 2 3 4
  console.log(arr) // 循环每次打印[1, 2, 3, 4, 5]
})
arr.forEach((item, index, arr) => {
  console.log(item) // 循环分别打印1 2 3 4 5
  console.log(index) // 循环分别打印0 1 2 3 4
  console.log(arr) // 循环每次打印[1, 2, 3, 4, 5]
})

11. arr.map(function(item,index,arr){})

参数item，必须，当前元素值
参数index，可选，当前元素在数组中的索引值
参数arr，可选，当前元素所在数组

let arr = [1, 2, 3, 4, 5]
let m = arr.map(function (item, index, arr) {
  //console.log(item)
  return item * 2
})
console.log(m) // [2, 4, 6, 8, 10]

let n = arr.map((item, index, arr) => {
  //console.log(item)
  return item * 2
})
console.log(n) // [2, 4, 6, 8, 10]

12. arr.filter(function(item,index,arr){})

参数item，必须，当前元素值
参数index，可选，当前元素在数组中的索引值
参数arr，可选，当前元素所在数组

let arr = [1, 2, 3, 4, 5]
let n = arr.filter(function (item, index, arr) {
  console.log(item)
  return item > 3
})
console.log(n) // [4, 5]

let m = arr.filter((item, index, arr) => {
  console.log(item)
  return item > 3
})
console.log(m) // [4, 5]

解析：返回符合条件的元素，形成新数组

13. arr.some(function(item,index,arr){})

参数item，必须，当前元素值
参数index，可选，当前元素在数组中的索引值
参数arr，可选，当前元素所在数组

let arr = [1, 2, 3, 4, 5]
let f = arr.some(function (item, index, arr) {
  console.log(item)  // 1
  return item >= 1
})
console.log(f) // true

解析：用于检测数组中的元素是否有满足指定条件

14. arr.every(function(item,index,arr){})

参数item，必须，当前元素值
参数index，可选，当前元素在数组中的索引值
参数arr，可选，当前元素所在数组

let arr = [1, 2, 3, 4, 5]
let f = arr.every(function (item, index, arr) {
  console.log(item)
  return item >= 1
})
console.log(f) // true

解析：用于检测数组中的元素是否全部都满足指定条件

15. array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数total，必须，计算后的返回值
参数currentValue，必须，当前元素
参数currentIndex，可选，当前元素的索引
参数arr，可选，当前元素所属数组
参数initialValue，可选，传递给函数的初始值

let arr = [1, 2, 3]
let res = arr.reduce(function (total, item, index, arr) {
  return (total += item)
}, 10)
console.log(res) // 16

解析：把初始值10赋值给total，再每一项累加，结果是16

let arr = [1, 2, 3, 4, 2, 3]
let res = arr.reduce((total, item) => {
  if (total.includes(item)) {
    return total
  } else {
    return total.concat(item)
  }
}, [])
console.log(res) // [1, 2, 3, 4]

解析：达到数组去重的目的

let arr = [
  [1, 2],
  [3, 4],
  [5, 6],
]
let res = arr.reduce((total, item) => {
  console.log(item)
  return total.concat(item)
}, [])
console.log(res) // [1, 2, 3, 4, 5, 6]

解析：二维数组降维成一维数组

let arr = ['王', '李', '王', '李', '赵', '王']
let num = arr.reduce((total, current) => {
  if (current in total) {
    total[current]++
  } else {
    total[current] = 1
  }
  return total
}, {})
console.log(num) // {王: 3, 李: 2, 赵: 1}

解析：统计数组元素出现次数

15. array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

与arr.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前

16. Array.from()

ES6数组新增方法，注意浏览器兼容

类数组对象转换为真正数组

let user = {
  0: 'buddha',
  1: 18,
  2: '男',
  3: ['篮球', '足球'],
  length: 4,
}
console.log(Array.from(user)) // ['buddha', 18, '男', Array(2)]

解析：该数组对象具有length属性，该数组对象属性名必须为数值型或字符串型数字

将Set结构数据转换为数组

let num = [1, 2, 3, 2, 1]
let set = new Set(num)
console.log(set) // Set(3) {1, 2, 3}
console.log(Array.from(set)) // [1, 2, 3]

解析：数据是数组类型转set类型再转数组，可以达到去重的效果

let num = [1, 2, 3]
let set = new Set(num)
console.log(Array.from(set, item => item + 1)) // [2, 3, 4]

解析：Array.from(）可以有第二个参数，类似数组map方法，用来对每个元素进行处理

将字符串转换为数组

let name = 'buddha'
console.log(Array.from(name)) // ['b', 'u', 'd', 'd', 'h', 'a']

数组生成一个一模一样的数组

let num = [1, 2, 3]
let num1 = Array.from(num)
console.log(num1) // [1, 2, 3]
console.log(num === num1) // false

17. Array.of()

将一组值转换为数组，参数不分数据类型，参数为空返回空数组

console.log(Array.of(1, 2, 3)) // [1, 2, 3]
console.log(Array.of('buddha')) // ['buddha']
console.log(Array.of('buddha', 18, '男')) // ['buddha', 18, '男']
console.log(Array.of(undefined)) // [undefined]
console.log(Array.of()) // []

18. arr.find(function(currentValue, index, arr),thisValue)

find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined

let arr = []
console.log(arr.find(item => item > 1)) // undefined

let arr = [1, 2, 3, 4, 5]
let num = arr.find(item => item > 1)
console.log(num)  // 2

let arr = [
  {
    id: 1,
    name: '张三',
  },
  {
    id: 1,
    name: '李四',
  },
  {
    id: 2,
    name: '王二',
  },
]
let obj = arr.find(item => item.id === 1)
console.log(obj) // {id: 1, name: '张三'}

let arr = [
  {
    id: 1,
    name: '张三',
  },
  {
    id: 1,
    name: '李四',
  },
  {
    id: 2,
    name: '王二',
  },
]
let obj = arr.find(item => item.id === 1)
console.log(obj) // {id: 1, name: '张三'}
obj.name = '小明'
console.log(obj) // {id: 1, name: '小明'}
console.log(arr) // [{id: 1, name: '小明'}, {id: 1, name: '李四'}, {id: 2, name: '王二'}]

解析：find()方法只是在数组中找出来而已，改变其内容，原数组内容也会改变

19. arr.findIndex(function(currentValue, index, arr),thisValue)

findIndex和find差不多，不过默认返回的是索引，如果没有符合条件的元素返回 -1

20. arr.fill(value, start, end)

value：必需。填充的值。
start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

let arr = [1, 2, 3, 4, 5, 6]
arr.fill(0) // [0, 0, 0, 0, 0, 0]
arr.fill(0, 1) // [1, 0, 0, 0, 0, 0]
arr.fill(0, 1, 2) // [1, 0, 3, 4, 5, 6]
arr.fill(0, -1) // [1, 2, 3, 4, 5, 0]
arr.fill(0, 1, -1) // [1, 0, 0, 0, 0, 6]

21. 遍历数组方法 keys()、values()、entries()

这三个方法都是返回一个遍历器对象，可用for…of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

let arr = ['a', 'b', 'c', 'd']
for (let i of arr.keys()) {
  console.log(i) // 0 1 2 3
}

let arr = ['a', 'b', 'c', 'd']
for (let i of arr.values()) {
  console.log(i) // a b c d
}

let arr = ['a', 'b', 'c', 'd']
for (let i of arr.entries()) {
  console.log(i) // [0, 'a'] [1, 'b'] [2, 'c'] [3, 'd']
}

let arr = ['a', 'b', 'c', 'd']
for (let [index, item] of arr.entries()) {
  console.log(index + ':' + item) // 0:a 1:b 2:c 3:d
}

22. arr.includes(searchElement , fromIndex)

判断一个数组是否包含一个指定的值，如果是返回 true，否则false

参数searchElement，必须，需要查找的元素
参数fromIndex，可选，在数组中从该索引处开始查找

let arr = ['a', 'b', 'c', 'd']
console.log(arr.includes('c')) // true
console.log(arr.includes('d', 2)) // true
console.log(arr.includes('d', 5)) // false

23. arr.flat(depth)

按照指定深度递归遍历数组，将所有元素与遍历到的子数组元素合并为新数组返回。默认值为1，当传入Infinity，相当于无线递归下去

let arr = [1, 2, [3, 4], [5, [6, 7]], 8]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8]

24. Array.isArray()

判断是否为数组

let arr = [1, 2]
console.log(Array.isArray(arr)) // true

let user = {}
console.log(Array.isArray(user)) // false

25. arr.copyWithin()

在当前数组内部，将指定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组

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

扩展运算符(…)

let person = { name: 'buddha', age: 18 }
let someone = { ...person }
console.log(someone) // {name: 'buddha', age: 18}

let person = ['buddha', 18, 180]
let someone = { ...person }
console.log(someone) // {0: 'buddha', 1: 18, 2: 180}

解析：可迭代对象变成一个参数序列

let person = 'hello'
let someone = { ...person }
console.log(someone) // {0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o'}

let person = 'hello'
let someone = [...person]
console.log(someone) // ['h', 'e', 'l', 'l', 'o']

let name = { name: 'buddha' }
let age = { age: 18 }
let someone = { ...name, ...age }
console.log(someone) // {name: 'buddha', age: 18}

解析： 可以合并多个数组或对象

解构赋值

let [a, b, c] = ['china', 'guangdong', 'guangzhou']
console.log(a) // china
console.log(b) // guangdong
console.log(c) //guangzhou

let { name, age, height } = { name: 'buddha', age: 18, height: 180 }
console.log(name) // buddha
console.log(age) // 18
console.log(height) // 180

解析：数组解构赋值变量名可以随意取，而对象解构赋值要用对象的属性名

小结：前端开发中，处理数组业务逻辑，用上面这些JavaScript方法基本够用了