JavaScript 数组操作方法

时间：2023-03-08 16:37:52

这些数组的操作方法会改变原来的数组。在使用 Vue 或者 Angular 等框架的时候会非常实用，使用这些方法修改数组会触发视图的更新。

Array.prototype.push

该方法可以在数组末尾添加元素，接受一个或者多个元素作为参数。该方法返回数组新的长度。

使用方式为：array.push(item1, item2, ...)

添加单个元素到数组末尾：

var arr = [1, 2, 3]

var a = arr.push(4) // arr = [1, 2, 3, 4], a = 4

添加多个元素到数组末尾：

var arr = [1, 2, 3]

var a = arr.push(4, 5) // arr = [1, 2, 3, 4, 5], a = 5

将另外一个数组里的每一个元素依次添加到原数组末尾：

// 使用 Function.prototype.apply 方法

var arr = [1, 2, 3]

var a = [].push.apply(arr, [4, 5]) // arr = [1, 2, 3, 4, 5], a = 5

// 使用 ES2015 Spread Operator

var b = arr.push(...[6, 7]) // arr = [1, 2, 3, 4, 5, 6, 7], b = 7

Array.prototype.unshift

该方法可以在数组开头添加元素，接受一个或者多个元素作为参数。该方法返回数组新的长度。

使用方式为：array.unshift(item1, item2, ...)

添加单个元素到数组开头：

var arr = [1, 2, 3]

var a = arr.unshift(0) // arr = [0, 1, 2, 3], a = 4

添加多个元素到数组开头：

var arr = [1, 2, 3]

var a = arr.unshift(4, 5) // arr = [4, 5, 1, 2, 3], a = 5

将另外一个数组里的每一个元素依次添加到原数组开头：

// 使用 Function.prototype.apply 方法

var arr = [1, 2, 3]

var a = [].unshift.apply(arr, [4, 5]) // arr = [4, 5, 1, 2, 3], a = 5

// 使用 ES2015 Spread Operator

var b = arr.unshift(...[6, 7]) // arr = [6, 7, 4, 5, 1, 2, 3], b = 7

Array.prototype.shift

该方法删除数组的第一个元素，没有参数，并返回被删除的元素：

var arr = [1, 2, 3]

var a = arr.shift() // arr = [2, 3], a = 1

如果数组已经为空，则数组不会有任何变化，返回值为 undefined。

Array.prototype.pop

该方法删除数组的最后一个元素，没有参数，并返回被删除的元素：

var arr = [1, 2, 3]

var a = arr.pop() // arr = [1, 2], a = 3

如果数组已经为空，则数组不会有任何变化，返回值为 undefined。

上面两个方法一次只能删除一个元素。

Array.prototype.splice

该方法可以在数组指定位置删除零个或多个元素，并用参数列表中声明的一个或多个值来替换那些被删除的元素。该方法返回被删除的元素组成的新数组，如果没有删除元素则返回一个空数组。

使用方式为：array.splice(start, deleteCount, item1, item2, ...)

  • 参数 start 表示指定的位置，从 0 开始
  • 参数 deleteCount 表示删除元素的个数，为 0 表示不删除，该参数是可选的，如果不传，则 deleteCount = array.length - start
  • 参数 item1, item2, ... 表示将要添加的元素

在指定位置删除一个元素：

var arr = [1, 2, 3, 4, 5]

var a = arr.splice(2, 1) // arr = [1, 2, 4, 5], a = [3]

在指定位置删除多个元素：

var arr = [1, 2, 3, 4, 5]

var a = arr.splice(2, 2) // arr = [1, 2, 5], a = [3, 4]

删除指定位置后面所有的元素，不传第二个参数：

var arr = [1, 2, 3, 4, 5]

var a = arr.splice(2) // arr = [1, 2], a = [3, 4, 5]

清空数组：

var arr = [1, 2, 3, 4, 5]

var a = arr.splice(0) // arr = [], a = [1, 2, 3, 4, 5]

在指定位置添加一个或者多个元素，第二个参数为 0：

var arr = [1, 2, 3]

var a = arr.splice(2, 0, 4, 5) // arr = [1, 2, 4, 5, 3], a = []

在指定位置删除一个或者多个元素并添加一个或者多个元素：

var arr = [1, 2, 6, 7, 5]

var a = arr.splice(2, 2, 3, 4) // arr = [1, 2, 3, 4, 5], a = [6, 7]

上面例子等同于修改数组中 arr[2] 和 arr[3] 的值。

将另外一个数组里的每一个元素依次插入到原数组的指定位置：

var arr = [1, 2, 5]

var arr2 = [3, 4]

// 使用 ES2015 Spread Operator

arr.splice(2, 0, ...arr2) // arr = [1, 2, 3, 4, 5]

// 使用 Function.prototype.apply 方法

;[].splice.apply(arr, [2, 0].concat(arr2)) // arr = [1, 2, 3, 4, 3, 4, 5]

Array.prototype.reverse

该方法颠倒数组中元素的顺序，没有参数，并返回原数组的引用：

var arr = [1, 2, 3]

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

Array.prototype.sort

该方法对数组进行排序，并返回原数组的引用。

按字符顺序进行排序：

var arr = [10, 5, 50, 15, 1, 25]

var a = arr.sort() // arr = [1, 10, 15, 25, 5, 50], a === arr

按数字从小到大进行排序：

var arr = [10, 5, 50, 15, 1, 25]

arr.sort((a, b) => a - b) // arr = [1, 5, 10, 15, 25, 50]

按数字从大到小进行排序：

var arr = [10, 5, 50, 15, 1, 25]

arr.sort((a, b) => b - a) // arr = [50, 25, 15, 10, 5, 1]

相关文章