探究|vue源码中重写的7个数组方法（二）
前言
本文主要分为三点，①是 Array.shift() ，②是 Array.unshift() ，③是 Array.splice()。
可改变数组自身的方法
1.Array.shift()
shift() 方法从数组中删除第一个元素，并返回该元素的值。
上一篇了解到，删除数组中的最后一个元素，可以使用 pop(),那么删除数组中的第一个元素选用 shift(),可能是最合适的。它的返回值是从数组中删除的元素，如果数组为空则返回 undefined 。
例如这样使用：
// 删除数组中的第一个元素
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() 的使用方式可以这样写：
// 声明一个数组，并写入两个元素
let list = ['hello', 'word']
// 往数组 list 的开头添加一个元素，并获取改变后的数组的长度
const length= list.unshift('new')
console.log(length,list) // 3 ['new', 'hello', 'word']
需要注意的是使用 unshift() 写入多个元素的场景。因为一次调用 unshift() 添加多个元素和多次调用 unshift() 依次添加元素所获得最终结果可能是不同的，这种不同主要体现在排序上。例如下面这样：
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() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
它的语法是
Array.splice(start[, deleteCount[, item1[, item2[, ...]]]] )
解释一下这种语法表示，据我所知这种语法表示在多种编程语言种通用，例如 java 也有。有时 [,] 会让人看不懂。 例如这种 [,] 表示，[] 的作用是将可选内容括起来,因为此时 “,” 也是可选的所以也要括起来，实际的使用并不会有这个中括号的存在。实际使用种应该是这样的：
几种场景使用示例：
① 删除元素
删除指定数量的元素
let list = ['hello','word'], list2 = ['hello','word']
// 从索引为0开始，删除2个元素。第一个参数 start 表示要开始删除的元素的下表，第二个参数 deleteCount 表示要删除的元素数量。
list.splice(0,2)
console.log(list) // []
删除指定位置之后的元素和删除全部元素
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 中的增删改都实现了呀，真是个多功能的方法。
