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

---

theme: channing-cyan

highlight: a11y-dark

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

前言

接续 探究|vue源码中重写的7个数组方法(一)

本文主要分为三点，①是 Array.shift() ，②是 Array.unshift() ，③是 Array.splice()。

可改变数组自身的方法

1.Array.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。

上一篇了解到，删除数组中的最后一个元素，可以使用 pop(),那么删除数组中的第一个元素选用 shift(),可能是最合适的。它的返回值是从数组中删除的元素，如果数组为空则返回 undefined 。

例如这样使用：

js // 删除数组中的第一个元素 let list = ['hello', 'word'], list2 = [] list.shift() list2.shift() console.log(list,list2) // ['word'] []

当数组为空时，依然使用 shift() 删除元素，并不会报错，此时它的返回值是 undefined,这或许告诉我们，可以放心大胆的使用 shift() 去删除第一个元素，并不需要担心当数组为空时会报错。

我们使用 splice(0,1),也可以实现删除数组的第一个元素。

2.Array.unshift()

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

在特定的需要实现总是在数组开头添加元素的，使用 unshift() 是一个正确的选择，特别是需要在添加后立刻知道原数组的新长度的时候。例如在添加后告诉用户数组此时的长度的场景，使用 unshift() 将是特别合适的。

unshift() 的使用方式可以这样写：

js // 声明一个数组，并写入两个元素 let list = ['hello', 'word'] // 往数组 list 的开头添加一个元素，并获取改变后的数组的长度 const length= list.unshift('new') console.log(length,list) // 3 ['new', 'hello', 'word']

需要注意的是使用 unshift() 写入多个元素的场景。因为一次调用 unshift() 添加多个元素和多次调用 unshift() 依次添加元素所获得最终结果可能是不同的，这种不同主要体现在排序上。例如下面这样：

```js let list = [],list2 = [] // 一次调用 unshift() 同时添加多个元素 list.unshift('new1','new2')

// 多次调用 unshift() 添加元素 list2.unshift('new1') list2.unshift('new2')

console.log(list) // ['new1', 'new2'] console.log(list2) // ['new2', 'new1'] ```

3.Array.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

它的语法是

js Array.splice(start[, deleteCount[, item1[, item2[, ...]]]] )

解释一下这种语法表示，据我所知这种语法表示在多种编程语言种通用，例如 java 也有。有时 [,] 会让人看不懂。 例如这种 [,] 表示，[] 的作用是将可选内容括起来,因为此时 “,” 也是可选的所以也要括起来，实际的使用并不会有这个中括号的存在。实际使用种应该是这样的：

几种场景使用示例：

① 删除元素

删除指定数量的元素 js let list = ['hello','word'], list2 = ['hello','word'] // 从索引为0开始，删除2个元素。第一个参数 start 表示要开始删除的元素的下表，第二个参数 deleteCount 表示要删除的元素数量。 list.splice(0,2) console.log(list) // []

删除指定位置之后的元素和删除全部元素

```js let list = ['hello','word','test','new'], list2 = ['hello','word','test','new'] // 从索引为1开始，删除之后的全部元素 list.splice(1) console.log(list) // ['hello']

// 删除数组的全部元素 list2.splice(0) console.log(list2) // [] ```

② 替换元素

let list = ['hello','word','new'] // 实现替换索引为 1 的元素 list.splice(1,1,'WORD') console.log(list) // ['hello', 'WORD', 'new']

③添加元素

let list = ['hello', 'word', 'test', 'new'], list2 = ['hello', 'word', 'test', 'new'] // 在索引1 位置上插入元素 ‘add’ list.splice(1, 0, 'add') console.log(list) // ['hello', 'add', 'word', 'test', 'new']

splice 把crud 中的增删改都实现了呀，真是个多功能的方法。