JavaScript常用数组API总结

旺仔牛奶真难喝
73 阅读8分钟

作为前端开发人员，数组是最常接触的数据类型之一，对JavaScript数组API的熟悉程度往往能最大化我们的效率，本文总结了JavaScript中较为常用的数组API，方便自己和大家进行查阅。

创建数组的三种方式

  1. 字面量 var array = []

创建数组最简单的方式就是使用数组字面量。这里需要注意，数组字面量中的值可以是常量，也可以是变量。例如以下这种表达也是合法的。

var a = 2; var b = [a, a+1, a+2, a+3];

  1. 利用扩展操作符 var a = [1, 2, 3]; var b = [0, ...a, 4];

在ES6之后，可以使用扩展操作符...在一个数组字面量中包含另一个数组的元素。在实际应用中，扩展操作符是创建数组副本的一种便捷方式。（如果数组元素是简单数据类型，属于深拷贝）

  1. 利用构造函数 var arr = new Array();

其中Array()是可以传入参数的，不传入参数的情况下默认生成一个空数组；只有一个参数的情况下会创建一个指定长度的数组；当然，也可以传入两个或多个数组元素，或传入一个非数值元素，但是一般不常用，这里不做介绍。

  1. 工厂方法 Array.of()

Array.of()传入的参数为数组元素，可以使用其参数值（无论多少个）作为数组元素来创建并返回新数组

Array.from()

该工厂方法为ES6新增，这个方法接收一个可迭代队对象或类数组对象作为其第一个参数，并且返回包含该对象元素的新数组。（可用于创建副本）

读写、增删改数组元素

  1. [ ]操作符。这个所有人都耳熟能详，不做讨论。
  2. push()——在数组末尾添加一个元素
  3. unshift()——在数组开头添加一个元素
  4. pop()——不传入参数，删除数组最后一个元素并返回该元素
  5. shift()——不传入参数，删除数组第一个元素并返回该元素
  6. delete()——删除数组元素，类似于给该元素赋undefined（不修改length属性）
  7. splice()——插入或删除数组元素。

数组的迭代

  1. for/of循环 按照索引值升序依次返回数组的元素

for(let letter of letters)

如果想获得数组的索引，可以使用entries()方法

for(let [index, letter] of letters.entries())

  1. forEach() 用于自身迭代的函数式方法，数组中的每个元素都会调用一次该函数。forEach()会按顺序迭代数组，而且会将索引作为第二个参数传给函数。

注意：forEach()会感受稀疏数组，会自动过滤没有的数组元素，这个有时候能对我们的开发效率带来了极大的提升

  1. map() 与forEach()类似，map()也能感知稀疏数组，调用它的数组里的每一个元素分别传给我们指定的函数。与forEach()不同的是，map()返回一个新数组，新数组的元素为我们指定函数的返回值。

  2. filter() fiter()返回一个数组，该数组包含调用它的数组的子数组。传给这个方法的函数是一个断言函数（即返回true或false的函数），新数组的元素为满足这个断言函数的所有子元素。

let a = [5, 4, ,3, 2, 1]
a.filter(x => x < 3)     // =>[2, 1]

  1. find()与findIndex() 与filter()类似，但是会在找到第一个满足条件的元素时停止迭代，并返回这个元素。而findIndex()，顾名思义，返回该元素的索引值。

  2. every()与some() 两个函数均是数组的断言方法，它们都会调用我们传入的断言函数，最后返回true或者false。every()类似于数学上的任意，some()类似于数学上的存在，并且两个函数都知道自己应该在什么时候停止迭代。（例如，every()会在遍历到第一个不满足条件的元素时停止迭代并返回false()，some()会在遍历到第一个满足条件的元素时停止迭代并且返回true。）

  3. reduce()与reduceRight() reduce()最大的一个特点是归并，它接收两个参数，第一个参数是执行归并操作的函数（这个归并函数的任务就是把两个值归并或组合为一个值并返回这个值）。第二个参数是可选的，是传给归并函数的初始值，默认为数组的第一个元素。

let a = [1, 2, 3, 4, 5]
a.reduce((x, y) => x+y, 0)    // => 15；所有值之和
a.reduce((x, y) => x*y, 1)    // => 120；所有值之积

reduceRight()与reduce类似，只不过是从右往左进行归并。（可用于求幂操作）

其他数组方法

  1. 打平 flat() 在ES2019中，flat()方法用于创建并返回一个新数组，这个新数组包含与它调用flat()的数组相同的元素，只不过其中任何本身也是数组的元素会被“打平”填充到返回的数组中。

不传参调用时，flat()会打平一级嵌套，如果想打平更多层级，需要给flat()传一个数值参数。 let a = [1, [2, [3, [4]]]] a.flat(1) // => [1, 2, [3, [4]]] a.flat(2) // => [1, 2, 3, [4]] a.flat(3) // => [1, 2, 3, 4] a.flat(4) // => [1, 2, 3, 4]

  1. concat() 添加数组 concat()方法创建并返回一个新数组，新数组包含调用concat()方法的数组的元素，以及传给concat()的参数。如果这些参数中有数组，则拼接的时它们的元素而非数组本身。但是值得注意的是，concat()不会递归打平数组的数组，而且concat()并不会修改调用它的数组，而是创建一个数组的副本。

  2. 切片操作 slice()、splice()、fill()、copyWithin() slice()接收两个参数，分别用于指定要返回切片的起始和终止位置（包含起始位置的元素，不包含终止位置的元素）。slice()不会修改调用它的数组。

splice()是一个对数组进行插入和删除的通用方法，而且会修改调用它的数组。splice()可以接收四个参数，第一个参数指定插入或者删除操作的起点位置，第二个参数指定要从数组中删除（切割出来）的元素个数。如果省略第二个参数，从起点元素开始的所有数组元素都会被删除。splice()返回被删除元素的数组。 splice()的前两个参数指定要删除哪些元素，后面还可以跟任意多个参数，表示要在第一个参数指定的位置插入到数组中的元素。

let a = [1, 2, 3, 4, 5, 6, 7, 8]
a.splice(4)     // => [5, 6, 7, 8]，此时 a = [1, 2, 3, 4]
a.splice(1, 2)  // => [2, 3]，此时 a = [1, 4]
a.splice(1, 1)  // => [4]，此时 a = [1]
let b = [1, 2, 3, 4, 5]
b.splice(2, 0 , 'a', 'b')  // => []，此时 b = [1, 2, 'a', 'b', 3, 4, 5]

fill()方法将数组的元素或切片设置为指定的值，它会修改调用它的数组，也会返回修改后的数组。fill()的第一个参数是要把数组元素设置成的值，可选的第二个参数指定起始索引，如果省略则从索引0开始填充。可选的第三个参数指定终止索引，到这个索引为止（但不包含），如果省略则从起始索引一直填充到数组末尾。

let a = new Array(5)
a.fill(0)   // => [0, 0, 0, 0, 0]
a.fill(9, 1)   // => [0, 9, 9, 9, 9]
a.fill(8, 2, -1)  // => [0, 9, 8, 8, 9]

copyWithin()把数组切片复制到数组中的新位置，它会就地修改数组并返回修改后的数组，但不会改变数组的长度。第一个参数指定要把第一个元素复制到的目的索引，第二个参数指定要复制的第一个元素的索引，如果省略第二个参数，则默认为0.第三个参数指定要复制的元素切片的终止索引，如果省略则使用数组的长度。

let a = [1, 2, 3, 4, 5]
a.copyWithin(1)    // => [1, 1, 2, 3, 4]：把数组元素复制到索引1及之后
a.copyWithin(2, 3, 5)    // => [1, 1, 3, 4, 4]
a.copyWithin(0, -2)    // => [4, 4, 3, 4, 4]
  1. 索引方法 indexOf()、lastIndexOf()、includes() indexOf()与lastIndexOf()使用===操作符来比较它们的参数和数组元素，从数组中搜索并返回第一个（或者最后一个）找到的元素的索引，如果没有找到则返回-1。

includes()不会告诉你该元素的索引值，只会告诉你是否存在这个元素，返回一个布尔值。

  1. 排序方法 sort()、reverse() sort()不传参调用时，默认按字母升序对数组元素排序（必要的话会存在隐式转换），会直接修改原数组；如果要执行非字母顺序的排序，需要传入一个比较函数。例如
array.sort((a, b) => a - b)   //从小到大进行排序
array.sort((a, b) => b - a)   //从大到小进行排序

reverse()用于对数组反序，会直接修改原数组。

  1. 数组转化为字符串 join()、toString() join()方法把数组的所有元素转换为字符串，然后把它们拼接起来并返回结果字符串。join()可以接收参数，默认采用逗号隔开。
let a = [1, 2, 3]
a.join()     // => "1,2,3"
a.join(" ")  // => "1 2 3"
a.join("")   // => "123"
let b = new Array(10)
b.join("-")  // => "---------"：包含9个连字符的字符串

toString()方法与join()不带参数的方法类似。

avatar
文章
阅读
粉丝