Array 变异更新替换

原生JS数组操作

变异方法 (mutation method)，顾名思义，会改变原始数组。
非变异 (non-mutating method) 方法，则不会改变原始数组。
下面我们先来看一下变异方法
push（末尾添加），会改变原始数组，返回值为数组更新后的新数组长度。

pop|（末尾删除），会改变原始数组，返回值为被删除的数组元素

unshift（开头添加），会改变原始数组，返回更新后新数组长度

shift（开头删除），会改变原始数组，返回被删除的数组元素

splice（添加、删除、替换） 会改变原数组

删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度

注意：该方法返回被删除的数组元素
添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。

注意：返回空；如果要插入多个项，可以再传入第四、第五…任意多个项

替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项
指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。

返回被替换掉的数组元素；注意：插入的项数是可以不必与删除的项数相等

**sort（排序）会改变原始数组，返回排序后的数组

相信大家一定发现了一个问题 *排序位置22为什么会在3的前面呢？
数组排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。
我们还要注意
（1）纯字符串比较，转换成ASCII码再进行比较；
（2）纯数字和数字字符串相比较，则将字符串数字隐式转换成数字再进行比较；
（3）纯数字和非数字字符串比较，都返回false；

⑦翻转-reverse，会改变原始数组，返回翻转后的数组

以上即为数组变异更新，接下来结合Vue看下效果。

案例展示：（使用数组变异更新方法会改变原始数组）

之前的方法会改变原始数组，有些方法则不会改变。
变异方法 (mutation method)，顾名思义，会改变原始数组。
相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。

⑧筛选-filter，不会改变原始数组，返回筛选后的新数组

⑨拼接-concat，不会改变原始数组，返回拼接后的新数组

⑩截取-slice:包含开头索引不含结尾索引，返回截取的数组元素

JS限制-数组操作

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.修改数组的长度时，例如：vm.items.length = newLength

利用索引直接设置，无法响应

解决办法

方法1：set方法
语法结构：Vue.set(vm.items, indexOfItem, newValue)

方法2：splice替换
语法结构：vm.items.splice(indexOfItem, number, newValue)

限制2：修改数组的长度时，例如：vm.items.length = newLength

对象属性改动时，vue可以实时监听检测，实现响应式。但是注意：由于 JS的限制，Vue 不能检测对象属性的添加或删除。

使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

此外还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。

完！！！！