Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

本题难度：⭐

答：

一、操作方法

数组基本操作可以归纳为增、删、改、查，需要留意的是哪些方法会改变原数组，哪些方法不会。

增

增添方法有下面四种，前三种会改变原数组，第四种不会改变原数组。

push()
unshift()
splice()
concat()

push

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法会改变原数组。

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

unshift

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。此方法会改变原数组。

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

splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

传入三个参数，分别是开始位置下标、0（要删除的元素数量）、插入的元素。

const arr = [1, 2, 3]
const changed = arr.splice(0, 0, 4)
console.log(changed) // []
console.log(arr)     // [4, 1, 2, 3]

当然也可以插入多个元素

const arr = [1, 2, 3]
const changed = arr.splice(0, 0, 4, 5, 6)
console.log(changed) // []
console.log(arr)     // [4, 5, 6, 1, 2, 3]

concat

concat() 方法用于合并两个或多个数组，返回一个新数组。此方法不会改变原数组。

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

删

删除方法有下面四种，前三种会改变原数组，第四种不会改变原数组。

pop()
shift()
splice()
slice()

pop

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会改变原数组。

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

shift

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法会改变原数组。

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

splice

传入两个参数，分别是开始位置下标、要删除的元素数量。此方法会改变原数组。

const arr = [1, 2, 3]
const changed = arr.splice(0, 1)
console.log(changed) // [1]
console.log(arr) // [2, 3]

删除多个元素

const arr = [1, 2, 3]
const changed = arr.splice(0, 3)
console.log(changed) // [1, 2, 3]
console.log(arr) // []

slice

slice() 方法用于创建一个包含原有数组中一个或多个元素的新数组。此方法不会改变原数组。

返回的新数组由参数begin 和 end 决定（包括 begin，不包括end）。

const arr = [1, 2, 3, 4]
const arr1 = arr.slice(1)  // 只传入一个参数，end 默认为 arr.length
console.log(arr1) // [2, 3, 4]
console.log(arr) // [1, 2, 3, 4]

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

改

splice

传入三个参数，分别是开始位置下标、要删除的元素数量、要插入的任意多个元素。此方法会改变原数组。

const arr = [1, 2, 3]
const changed = arr.splice(0, 1, 4)
console.log(changed) // [1]
console.log(arr) // [4, 2, 3]

查

即查找元素，返回元素坐标或者元素值。查找方法都不改变原数组。

indexOf()
includes()
find()

indexOf

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1。

const arr = [1, 2, 3, 4, 3]
arr.indexOf(3)   // 2  有重复元素，就返回找到的第一个索引
arr.indexOf(100) // -1

includes

includes() 方法用来判断一个数组是否包含一个指定的值，如果包含返回 true，否则返回 false。

const arr = [1, 2, 3, 4, 3]
arr.includes(2)   // true
arr.includes(100) // false

find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

数组中的元素为引用类型，改变找到的元素，原数组会跟着改变。

const arr = [
  {
    name: 'lin',
    age: 18
  },
  {
    name: 'liu',
    age: 25
  }
]

const found = arr.find(item => item.name === 'lin')
console.log(found)
found.age = 20   // 改变找到的元素，原数组会跟着改变
console.log(arr)
arr.find(item => item.name === 'xxx') // undefined

findIndex

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const arr = [
  {
    name: 'lin',
    age: 18
  },
  {
    name: 'liu',
    age: 25
  }
]

arr.findIndex(item => item.name === 'lin')  // 0
arr.findIndex(item => item.name === 'xxx')  // -1

二、遍历方法

常用来遍历（迭代）数组的方法有如下，这些方法都不改变原数组。

forEach()
filter()
map()
some()
every()

forEach

forEach() 方法对数组的每个元素执行一次给定的函数。返回 undefined

const arr = ['a', 'b', 'c']
const res = arr.forEach((item, index, arr) => { // res 值为 undefined
  // do something
})

filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。用来过滤数组元素。

const arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
const res = arr.filter((item, index, array) => item > 2)
console.log(res) // [3, 4, 5, 4, 3]

map

map() 方法对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

const arr = [1, 2, 3]
const res = arr.map((item, index, array) => item * 2)
console.log(res) // [2, 4, 6]

some

some() 方法对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true。

const arr = [1, 2, 3]
const res = arr.some((item, index, array) => item > 2)
console.log(res) // true

every

every() 方法对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true。

const arr = [1, 2, 3]
const res = arr.every((item, index, array) => item > 2)
console.log(res) // false

三、排序方法

数组有两个方法可以用来对元素重新排序，这两个方法都会改变原数组。

sort()
reverse()

sort

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

const arr = [1, 30, 4, 21, 100000]
const arr1 = arr.sort()
console.log(arr)  // [1, 100000, 21, 30, 4]
console.log(arr1) // [1, 100000, 21, 30, 4]

sort 方法接收一个比较函数，用于判断哪个值应该排在前面。

比较函数格式如下：

function compare(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1
  }
  if (a > b ) {
    return 1
  }
  // a must be equal to b
  return 0
}

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数会将数组升序排列

function compareNumbers(a, b) {
  return a - b
}

直接把比较函数当作参数传入 sort 方法中就行，

const numbers = [4, 2, 5, 1, 3]
numbers.sort(function (a, b) {
  return a - b
})
console.log(numbers) // [1, 2, 3, 4, 5]

也可以写成箭头函数：
const numbers = [4, 2, 5, 1, 3]
numbers.sort((a, b) => a - b)
console.log(numbers) // [1, 2, 3, 4, 5]

对象可以按照某个属性排序：

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
]

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
})

// sort by name
items.sort(function (a, b) {
  const nameA = a.name.toUpperCase() // ignore upper and lowercase
  const nameB = b.name.toUpperCase() // ignore upper and lowercase
  if (nameA < nameB) {
    return -1
  }
  if (nameA > nameB) {
    return 1
  }

  // names must be equal
  return 0
})

reverse

反转数组元素，返回反转后的数组，会改变原数组。

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

四、其他方法

join

join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

const arr = [1, 2, 3, 4]
arr.join()     // 1,2,3,4
arr.join('|')  // 1|2|3|4

const arr1 = [1]
arr.join()  // 1

Array.isArray

Array.isArray() 用于判断变量是否为 Array

Array.isArray([1, 2, 3]) // true
Array.isArray({foo: 123}) // false

flat

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const arr1 = [1, 2, [3, 4]]
arr1.flat() // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]]
arr2.flat() // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]]
arr3.flat(2) // [1, 2, 3, 4, 5, 6]

// 使用 Infinity，可展开任意深度的嵌套数组
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

toString

toString() 返回一个字符串，表示指定的数组及其元素。

const arr = [1, 2, 'a', '1a']

console.log(arr.toString()) // '1,2,a,1a'

reduce

用法太多了，又是一个单独的问题，后面问题整理。

结尾

如果我的文章对你有帮助，你的👍就是对我的最大支持^_^

我是阿林，输出洞见技术，再会！

「前端每日一问（11）」JS 如何精准地判断数据类型？

「前端每日一问（13）」说一下数组 reduce 方法的一些用法

「前端每日一问（12）」JavaScript 中数组常用方法有哪些？

一、操作方法

增

push

unshift

splice

concat

删

pop

shift

splice

slice

改

splice

查

indexOf

includes

find

findIndex

二、遍历方法

forEach

filter

map

some

every

三、排序方法

sort

reverse

四、其他方法

join

Array.isArray

flat

toString

reduce