Javascript数组方法大全

搜罗了目前 Javascript 数组所有的方法，迷失道路的小伙伴可以直接查看页面右边的目录

数组创建

const arr1 = [1, 2, 3]; // [1, 2, 3]
const arr2 = Array(); // []
const arr3 = Array(2); // [undefined, undefined]
const arr4 = Array(1,2,3);  // [1, 2, 3]

Array.from: 将一个对象转化成数组

/*
 *  第一个参数：被转化的数组
 *  第二个参数：对每个元素进行处理，将处理后的结果放入返回的数组（类似于map）
 *  第三个参数：用来绑定this
 */

// 当参数为一个Object类型时，需要有length属性，用来指定数组长度，默认为0
Array.from({ 2: '2', a: 'a', 0: '0', length: 4})  // ['0', undefined, 2: undefined]
Array.from({ 2: '2', a: 'a', 0: '0', length: 2})  // ['0', undefined]
Array.from({ 2: '2', a: 'a', 0: '0', length: 2}, v => v || '')   // ['0', '']
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']

Array.isArray: 判断传递的值是否是一个 Array 类型

Array.isArray([1,2,3])  // true
Array.isArray({a: 'a'}) // false
Array.isArray('hello')  // false
Array.isArray(Array(3)) // true
Array.isArray(null)     // false

Array.of: 把所有的参数放到一个数组中返回

const arr1 = Array.of(1, 2, 3); // [1, 2, 3]
const arr1 = Array.of();        // []

Array.apply: 创建空数组

/*
 *  第一个参数：用来绑定this
 *  第二个参数：数组参数(参考Array.from的第一个参数)
 */

Array.apply(null, {1:'1', length: 2}) // [undefined, '1']

Array.apply(null, {length: 2} 与 Array(2) 的区别:

• Array(2) 只有 length，没有索引和元素，所以不能用 map

const arr1 = Array.apply(null, {length: 2}) // [undefined, undefined]
const arr2 = Array(2) // [empty x 2]

1 in arr1 // true
1 in arr2 // false

arr1.map(v => 1) // [1, 1]
arr2.map(v => 1) // [empty x 2]

concat: 合并多个数组并返回一个新数组(原有数组不变)

const arr1 = [1, 2]
const arr2 = ['a', 'b']
const arr3 = ['hello']

const arr4 = arr1.concat(arr2, arr3)  // [1, 2, 'a', 'b', 'hello']

copyWithin: 从数组的指定位置拷贝元素到另一个指定位置

/*
 *  第一个参数：复制的目标位置
 *  第二个参数：复制的开始位置(闭区间)
 *  第三个参数：复制的结束位置(开区间)
 */

const arr = [1,2,3,4,5,6]
arr.copyWithin(4, 1, 3) // [1,2,3,4,2,3]

entries: 返回一个数组的迭代对象(Iterator)

const arr = [1,2,3]
const it = arr.entries()
console.log(it.next())  // {value: [0,1], done: false}
console.log(it.next())  // {value: [1,2], done: false}
console.log(it.next())  // {value: [2,3], done: false}
console.log(it.next())  // {value: undefined, done: true}

every: 对数组中所有的元素进行检查，返回布尔值

some: 和every类似，every是需要所有元素都满足条件，而some只要有满足的就会返回true

const arr = [1,2,3]
arr.every(v => { console.log(v); return v < 10}) // 1 2 3 true
arr.every(v => { console.log(v); return v < 2})  // 1 2 false
arr.some(v => { console.log(v); return v < 2})  // 1 true

fill: 用一个固定值替换数组中的元素

/*
 *  第一个参数：填充的值
 *  第二个参数：填充的开始位置(闭区间)
 *  第三个参数：填充的结束位置(开区间)
 */

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

filter: 创建一个新数组，返回原数组中满足条件的所有元素

const arr1 = [
  { age: 10, name: '10'},
  { age: 23, name: '23'},
  { age: 16, name: '16'},
  { age: 11, name: '11'},
  { age: 37, name: '37'}
]
arr1.filter(v => v.age < 18)

// 输出
/* [
 *   { age: 10, name: '10'},
 *   { age: 16, name: '16'},
 *   { age: 11, name: '11'}
 * ]
 */

find: 返回数组中第一个满足条件的元素

findIndex: 返回数组中第一个满足条件的元素的索引值

const arr1 = [
  { age: 10, name: '10'},
  { age: 23, name: '23'},
  { age: 16, name: '16'},
  { age: 11, name: '11'},
  { age: 37, name: '37'}
]
arr1.find(v => v.age > 18)  // { age: 23, name: '23'}

flat: 创建一个新数组，扁平化原嵌套数组，参数为扁平的层数，该方法会移除空项

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

flatMap: 和 map 相近，但是会将返回结果压平一层

const arr1 = [1,2,3]
arr1.map(v => [v * 2])    // [[2], [4], [6]]
arr1.flatMap(v => [v * 2]) // [2, 4, 6]

forEach: 遍历数组中的每一个元素

const arr1 = [1,2,3]
arr1.forEach(v => console.log(v))  // 1,2,3

includes: 判断一个数组中是否包含一个元素

const obj = {id: 2, value: '2'}
const arr = [
  obj,
  'hello',
  {id: 1, value: '1'}
]

arr.includes({id: 1, value: '1'}) // false
arr.includes(obj) // true
arr.includes('hello') // true

indexOf: 找到满足条件的元素的索引值，第一个参数是开始寻找的位置

lastIndexOf: 寻找顺序与indexOf相反

findIndex 的能力比 indexOf 更强，findIndex 相当于一个 for 循环，可以进行逻辑处理和判断，而 indexOf 能力较弱

const arr1 = ['a', 'b', 'c','b']
arr1.indexOf('b') // 1
arr1.lastIndexOf('b') // 3

join: 将元素连接成一个字符串，并用分隔符分割（第一个参数），元素会执行 toString

const arr = [1, 'b', {c: 2}, [3,4]]
arr.join(' & ') // "1 & b & [object Object] & 3,4"

keys: 和 entries 类似，但是返回的为 索引，而不再是 key/value

values: 和 entries 类似，但是返回的为 值，而不再是 key/value

const arr = [1,2,3]
const it = arr.keys()
console.log(it.next())  // {value: 0, done: false}
console.log(it.next())  // {value: 1, done: false}
console.log(it.next())  // {value: 2, done: false}
console.log(it.next())  // {value: undefined, done: true}

map: 返回一个新数组，数组中的元素为原数组经过处理后的值

const arr1 = [{id:1}, {id:2}, {id: 3}]
arr1.map(v => v.id) // [1, 2, 3]

pop: 删除原数组的最后一个元素

push: 在原数组的末尾添加一个元素

shift: 删除原数组的第一个元素

unshift: 在原数组开头添加一个元素

const arr = [1,2,3]
arr.pop()       // 3; arr: [1,2]
arr.shift()     // 1; arr: [2]
arr.push(3)     // 2; arr: [2,3]
arr.unshift(4)  // 2; arr: [4,2,3]

reduce: 接受一个累加器，数组中的每个值开始缩减，最终计算为一个值

reduceRight: 功能和reduce一样，只是是从末尾向前做累加

const arr = [1,2,3]
function getSum(total, currentValue, currentIndex, arr) {
  return total + currentValue;
}
arr.reduce(getSum, 10)  // 16; arr: [1,2,3]

reverse: 颠倒原数组中元素的顺序

const arr = [1,2,3]
arr.reverse() // [3,2,1]

slice: 提取数组中的子串到新数组

splice: 删除原数组中的子串

const arr = [1,2,3,4,5]
arr.slice(2,4)  // [3,4]; arr: [1,2,3,4,5]
arr.splice(1,2) // [2,3]; arr: [1,4,5]

sort

const asc = (a,b) => a - b
const des = (a,b) => b - a
const arr = [3,1,4,2,7]
arr.sort(asc) // [1, 2, 3, 4, 7]
arr.sort(des) // [7, 4, 3, 2, 1]