探究|vue源码中重写的7个数组方法（一）

---

theme: channing-cyan

highlight: a11y-dark

探究|vue源码中重写的7个数组方法

前言

tip：我写探究系列的目的是为了能更合理和更优雅。

vue2 中数组的数据劫持是通过重写 7 个可改变数组自身的方法实现的，那么这些方法都是谁？都有啥特性？日常开发中的可能应用场景是啥，应该如何使用这些数组方法？我们深入仔细的了解它们，是为了更好的利用他们，在对应的场景选择更合适的操作数组方法，而不是能实现就行，这也许就是优雅之路？

我们说数组的方法，那么什么是数组？先了解一下

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。

数组是一种列表对象，我们可以通过以下方式声明一个数组：

js let list = [] console.dir(list) // Array(0) let list2 = new Array() console.dir(list2) // Array(0)

或者在声明的同时初始化赋值也是被允许的。

7 个可改变数组自身的方法

1. 它们是谁

如上图所示，它们分别是 push()，pop()，shift()，unshift()，splice()，sort()，reverse()。

他们的共同点一是都是数组的方法，二是都是能改变数组自身的。

了解他们的目的是为了更好的利用他们。

2.Array.pop()

pop 方法从一个数组中删除并返回最后一个元素。

也就是说当我们想要对数组做删除操作，且是删除最后一个元素的时候，我们应该首先 Array.pop()，而不是 Aarry.splice(list.length - 1, 1) 或别的方法对吗？如果你还希望返回被删除的元素，那么更应该首选它。

需要注意的是，当数组为空的时候，使用它删除最后一个元素会返回 undefined。我们记住这些特性，并合理利用，有时会产生惊喜。比如我使用 Array.pop() 去删除数组，我并不需要提前判断该数组是否为空，因为并不会报错，最多只是返回一个 undefined ，而我们需要明确此时被返回 undefined 是合理和正确的。undefined 是一个正儿八经的数据类型也是值。相反有时我们还可以利用 Array.pop() 是否返回一个 undefined 来判断一个数组是否为空数组，有时可能会省去一些麻烦。

例如说我需要实现总是删除最后一个元素，并且告知删除到数组为空时，提示一下或做些特殊处理。此时就可以 Array.pop() 以及它在数组为空时返回 undefined 的特点。

3.Array.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

这就说当我们希望实现往数组添加元素，且是往数组末尾添加元素的时候，我们应该可以首选 push()。就像下面这样：

js let list = ['hello', 'word'] const length = list.push('test') console.log(length,list) // 3 ['hello', 'word', 'test']

我们可以注意的是 push() 的返回值，它会返回被操作的数组的新的长度，所以如果我们希望知道该数组被改变之后的新的长度，出了我们熟悉的 Array.length 还可以是 push() 的返回值。

例如我们需要实现向数组末尾添加元素，且当数组长度大于等于 3 时，就立刻通知用户或做某些逻辑处理，此时就可以利用 push() 的返回值，当然也可以使用别的。

Array.prototype.push.apply 可以实现合并两个数组，且是将第二个数组合并到第一个数组。它的用法是

js let list = ['hello', 'word'], list2 = ['test'] // 会将第二个数组合并到第一个数组，不改变第二个数组。 Array.prototype.push.apply(list,list2) console.log(list,list2) // ['hello', 'word', 'test'] ['test']

合并数组的方法很多，可能更被喜欢的是 es6 的更简洁的语法，例如合理的利用拓展符 ...。

而 push.apply 如果有优势可能就是 兼容性比较好吧，es6 毕竟是 6。有些同学可能会说我们有 babel，兼容性已经几乎不是问题，然后也只是几乎。几乎之外的那万分之一，有时就是那么的重要，这种重要性主要是体现在非工程化的前端项目，以及一些特殊设备上。