数组方法
约 743 字大约 2 分钟
2026-02-26
数组方法可以先按“是否修改原数组”来分类，再学习 ES5/ES6 的新增能力，这样在写业务代码时更容易判断副作用。
会修改原数组的方法
push / pop
const arr = ['a', 'b']
arr.push('c') // 尾部追加，返回新长度
console.log(arr) // ['a', 'b', 'c']
const removed = arr.pop() // 删除尾部，返回删除项
console.log(removed) // 'c'
console.log(arr) // ['a', 'b']unshift / shift
const arr = [2, 3]
arr.unshift(0, 1) // 头部插入
console.log(arr) // [0, 1, 2, 3]
const first = arr.shift() // 删除头部
console.log(first) // 0
console.log(arr) // [1, 2, 3]reverse
const arr = [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]splice
const arr = ['a', 'b', 'c', 'd']
// 从索引 1 开始删除 2 项，并插入新元素
const deleted = arr.splice(1, 2, 'x', 'y')
console.log(deleted) // ['b', 'c']
console.log(arr) // ['a', 'x', 'y', 'd']sort
const nums = [27, 49, 5, 7]
nums.sort((a, b) => a - b) // 升序
console.log(nums) // [5, 7, 27, 49]注
sort() 默认按字符串比较，所以数字排序一定要传比较函数。
fill
const arr = [1, 2, 3, 4]
arr.fill(9, 1, 3) // 左闭右开，填充索引 [1, 3)
console.log(arr) // [1, 9, 9, 4]copyWithin
const arr = [1, 2, 3, 4, 5]
arr.copyWithin(0, 3) // 把从 3 开始的内容复制到 0 开始
console.log(arr) // [4, 5, 3, 4, 5]不会修改原数组的方法
concat
const a = ['a', 'b']
const b = ['c', 'd']
const c = a.concat(b)
console.log(c) // ['a', 'b', 'c', 'd']
console.log(a) // ['a', 'b']slice
const arr = ['a', 'b', 'c', 'd']
console.log(arr.slice(1, 3)) // ['b', 'c']
console.log(arr.slice(-2)) // ['c', 'd']join / toString
const arr = ['a', 'b', 'c']
console.log(arr.join('-')) // a-b-c
console.log(arr.toString()) // a,b,csplit（字符串方法，常与数组配合）
const str = 'a-b-c-d'
const arr = str.split('-', 3)
console.log(arr) // ['a', 'b', 'c']ES5 新增常用方法
forEach
const arr = [1, 2, 3]
arr.forEach((item, index) => {
console.log(item, index)
})filter
const arr = [1, 2, 3, 4, 5]
const evens = arr.filter((n) => n % 2 === 0)
console.log(evens) // [2, 4]
console.log(arr) // 原数组不变map
const arr = [1, 2, 3]
const doubled = arr.map((n) => n * 2)
console.log(doubled) // [2, 4, 6]indexOf / lastIndexOf
const arr = ['a', 'b', 'a', 'c']
console.log(arr.indexOf('a')) // 0
console.log(arr.lastIndexOf('a')) // 2
console.log(arr.indexOf('x')) // -1Array.isArray
console.log(Array.isArray([])) // true
console.log(Array.isArray({})) // falseES6 新增常用方法
Array.of
console.log(Array.of()) // []
console.log(Array.of(3)) // [3]
console.log(Array.of(3, 4, 5)) // [3, 4, 5]Array.from
const arrayLike = { 0: 'x', 1: 'y', length: 2 }
const arr = Array.from(arrayLike, (item) => item.toUpperCase())
console.log(arr) // ['X', 'Y']keys / values / entries
const arr = ['a', 'b', 'c']
console.log([...arr.keys()]) // [0, 1, 2]
console.log([...arr.values()]) // ['a', 'b', 'c']
console.log([...arr.entries()]) // [[0, 'a'], [1, 'b'], [2, 'c']]find / findIndex
const arr = [1, 2, 3, 4]
console.log(arr.find((n) => n > 2)) // 3
console.log(arr.findIndex((n) => n > 2)) // 2includes
const arr = [1, 2, 3, NaN]
console.log(arr.includes(2)) // true
console.log(arr.includes(NaN)) // true补充：手写简化版 forEach / map / filter
展开查看
Array.prototype.myForEach = function myForEach(fn, thisArg) {
for (let i = 0; i < this.length; i += 1) {
fn.call(thisArg, this[i], i, this)
}
}
Array.prototype.myMap = function myMap(fn, thisArg) {
const result = []
for (let i = 0; i < this.length; i += 1) {
result.push(fn.call(thisArg, this[i], i, this))
}
return result
}
Array.prototype.myFilter = function myFilter(fn, thisArg) {
const result = []
for (let i = 0; i < this.length; i += 1) {
if (fn.call(thisArg, this[i], i, this)) {
result.push(this[i])
}
}
return result
}