Array 类型方法大合集

数组是JavaScript中最常用的类型之一，JavaScript封装了很多原生的操作数组的方法，掌握它们可以提高我们的开发效率

数组检测

instanceof方法

arr instanceof Array 返回一个布尔值，在一个网页包含多个框架(页面包含子页面)的时候会出现问题，没有使用过多个框架，不太清楚

Array.isArray()方法

这是ES5新增的检测数组的方法
Array.isArray(arr) 也是返回一个布尔值

转换方法

Array.prototype.toString 返回一个字符串

const arr = ['red', 'blue', 'green']
console.log(arr.toString()) // "red,blue,green"

Array.prototype.valueOf 返回 Array 对象的原始值

const arr = ['red', 'blue', 'green']
console.log(arr.valueOf()) // ['red', 'blue', 'green']

Array.prototype.toLocaleString 返回一个字符串表示数组中的元素,和toString类似，不过每个元素都会调用自己的toLocaleString进行转换

const arr = [122, new Date(), "foo"];
console.log(arr.toLocaleString()) // "122,2017/7/5 下午9:02:05,foo"

Array.prototype.join 将数组（或一个类数组对象）的所有元素连接到一个字符串中，不会改变原数组

const arr = ['red', 'blue', 'green']
console.log(arr.join('|')) // "red|blue|green"

栈方法

Array.prototype.push 将一个或多个元素添加到数组的末尾，并返回数组的新长度

const arr = ['red', 'blue', 'green']
arr.push('white')
console.log(arr) // ["red", "blue", "green", "white"]

Array.prototype.pop 删除数组中最后一个元素，并返回该元素的值。此方法会更改原数组

const arr = ['red', 'blue', 'green']
const item = arr.pop()
console.log(item) // "green"
console.log(arr.length) // 2

队列方法

Array.prototype.shift 删除数组中第一个元素，并返回该元素的值。此方法会更改原数组

const arr = ['red', 'blue', 'green']
const item = arr.shift()
console.log(item) // “red”
console.log(arr.length) // 2

Array.prototype.unshift 将一个或多个元素添加到数组的开头，并返回新数组的长度

const arr = ['red', 'blue']
const count = arr.unshift('green')
console.log(count) // 3
console.log(arr) // ["green", "red", "blue"]

重排序方法

Array.prototype.reverse 将数组中元素的位置颠倒

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

Array.prototype.sort 在适当的位置对数组的元素进行排序，并返回数组

使用该方法会调用每个数组项的toString()转型方法，然后比较字符串，所以在进行数字排序的时候需要额外处理

const arr = [0, 1, 5, 10, 15, 5]
arr.sort((n1, n2) => n1 > n2 ? 1 : -1) // 升序，降序改变符号即可
console.log(arr) // [0, 1, 5, 5, 10, 15]

操作方法

Array.prototype.concat 用于合并两个或多个数组,此方法不会更改现有数组，而是返回一个新数组

const arr = ['red', 'blue', 'green']
const arr1 = ['white', 'black']
const newArr = arr.concat(arr1)
console.log(arr) // ["red", "blue", "green"]
console.log(newArr) // ["red", "blue", "green", "white", "black"]

//还可以使用ES6扩展运算符
console.log([...arr, arr1])

Array.prototype.slice 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象, 原数组不会修改

const arr = ['red', 'blue', 'green', 'white']
const arr1 = arr.slice(1) // 为一个参数的时候，返回从这个位置开始一直到末尾的所有项
const arr2 = arr.slice(1, 3)
console.log(arr1) // ["blue", "green", "white"]
console.log(arr2) // ["blue", "green"]

Array.prototype.splice通过删除现有元素和/或添加新元素来更改一个数组的内容

• 删除： 指定两个参数，要删除的第一项位置和要删除的项数

  const arr = ['red', 'blue', 'green', 'white']
  // 从第1个位置(起始位置为0)开始,删除两项
  arr.splice(1, 2)
  console.log(arr) // ["red", "white"]

• 插入： 可以向制定位置插入任意数量的项，最少三个参数，起始位置、0(要删除的项)和要插入的项(可以为多个)

  const arr = ['red', 'blue', 'green', 'white']
  // 从第二个位置开始插入两项
  arr.splice(2, 0, 'black', 'orange')
  console.log(arr) // ["red", "blue", "black", "orange", "green", "white"]

• 替换： 三个参数，起始位置，要删除的项和要插入的项

  const arr = ['red', 'blue', 'green', 'white']
  // 从第二个位置开始，删除两项，插入两项
  arr.splice(2, 2, 'black', 'orange')
  console.log(arr) // ["red", "blue", "black", "orange"]

位置方法

Array.prototype.indexOf 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

const arr = ['red', 'blue', 'blue', 'green', 'white']
console.log(arr.indexOf('blue'))

// 在使用操作的时候，每次比较的时候都会使用全等，意味着当元素为对象的时候， 直接使用这个方法不能查找出来
const color = {name: 'red'}
const arr = [{name: 'red'}]
console.log(arr.indexOf(color)) // -1

Array.prototype.lastIndexOf 和indexOf功能类似，只是从数组的后面向前查找

迭代方法

迭代方法可接收两个参数：一个函数和运行该函数的作用域对象(可选，一般不用)，回调函数可接受三个参数：数组项的值、该项在数组中的位置和数组对象本身，一般在使用第一个参数就可以解决大部分问题

Array.prototype.forEach 对数组的每个元素执行一次提供的函数

const numbers = [2, 6, 5, 8]
numbers.forEach((num, index, array) => {
  console.log(num * 2)
}) // 4 12 10 16

Array.prototype.map 对数组的每个元素执行一次提供的函数，返回每次函数调用的结果组成的数组。与forEach类似，不同的是会返回新的数组

const numbers = [2, 6, 5, 8]
const result = numbers.map(num => num * 2)
console.log(result) // [4, 12, 10, 16]

Array.prototype.every 对数组中的每一项运行给定函数，如果该函数对每一项都返回true， 则返回true

const numbers = [3, 6, 5, 8]
const result = numbers.every(num => num > 2)
console.log(result) // true

const numbers = [2, 6, 5, 8]
const result = numbers.every(num => num > 2)
console.log(result) // false

Array.prototype.some 对数组中的每一项运行给定函数，如果该函数对任意一项返回true，则返回true

const numbers = [3, 6, 5, 8]
const result = numbers.some(num => num > 6)
console.log(result) // true

Array.prototype.filter 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

const numbers = [3, 6, 5, 8]
const result = numbers.filter(num => num > 5)
console.log(result) // [6, 8]

归并方法

这类方法会迭代数组的所有项，然后构建一个最终值返回。接收两个参数，一个函数和一个可选的最为归并基础的初始值，函数可接收四个参数:前一个值，当前值，项的索引和数组对象

Array.prototype.reduce 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值，

const numbers = [3, 6, 5, 8]
// 求和
const result = numbers.reduce((pre, cur) => pre + cur)
console.log(result) // 22

Array.prototype.reduceRight 和reduce类似，只是方向相反，从右边往左

ES6新增方法

Array.from 可将数组的对象和可遍历的对象转换成真正的数组

类数组常见的是NodeList和argumens

const divs = document.querySelectorAll('div')
console.log(Array.from(divs)) // [div, div, div]

// 当然还可以使用扩展运算符来转换
console.log([...divs]) // [div, div, div]

可遍历对象，即部署了Iterator接口，包括字符串，set，map等

const string = 'string'
console.log(Array.from(string)) //  ["s", "t", "r", "i", "n", "g"]

// 或者
console.log([...string]) //  ["s", "t", "r", "i", "n", "g"]

Array.of方法用于将一组值，转换为数组

console.log(Array.of(1,2,3)) // [1, 2, 3]

Array.prototype.copyWithin 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它

接受三个参数：

• target（必需）：从该位置开始替换数据。
• start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

  const arr = [1, 2, 3, 4, 5]
  // 复制从第三个位置开始一直到末尾的项，然后放在位置1
  console.log(arr.copyWithin(1, 3)) // [1, 4, 5, 4, 5]

Array.prototype.find 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined

和迭代方法可接受的参数一致

const arr = [1, 2, 3, 4]
console.log(arr.find(n => n > 2)) // 3

Array.prototype.findIndex 与find方法类似，方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1

Array.prototype.fill 法使用给定值，填充一个数组

可接受三个参数，第二个和第三个参数，用于指定填充的起始位置和结束位置

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

// 在第二个位置填入
console.log(arr.fill(2, 2, 3)) // [1, 2, 2, 4]

Array.prototype.includes 方法用来判断一个数组是否包含一个指定的值，如果是返回true，没有返回false

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

Array.prototype.entries、keys和 values这三个方法用于遍历数组，都返回一个遍历器对象

可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

// 不使用for...of的话,key(),value()类似
const letter = ['a', 'b', 'c'];
const entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']