学习VUE第六天课程（Array数组操作（变异更新、替换）——下篇）

Array数组操作（变异更新、替换）

大纲

（1）数组操作补充
（2）ASCII码值
（3）JS限制-数组操作限制
（4）JS限制-对象操作限制

• Vue 包含一组观察数组的变异更新与替换的方法，它们将会触发视图更新。
• 在正式介绍前，先回顾下原生JS数组操作。
  变异方法 (mutation method)，顾名思义，会改变原始数组。
  非变异 (non-mutating method) 方法，则不会改变原始数组。

JS数组操作

• ①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。

• ②末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。

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

• ④开头删除-shift，会改变原始数组，返回被删除的数组元素

• ⑤添加、删除、替换-splice，会改变原始数组

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

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

返回空；如果要插入多个项，可以再传入第四、第五…任意多个项
替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项
3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。

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

• ⑥排序-sort，会改变原始数组，返回排序后的数组

排序位置22为什么在3的前面？
解析：排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。

字符串和数字大小对比

小结
（1）纯字符串比较，转换成ASCII码再进行比较；
（2）纯数字和数字字符串相比较，则将字符串数字隐式转换成数字再进行比较；
（3）纯数字和非数字字符串比较，都返回false；

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

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

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

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

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

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

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

案例展示1（筛选）：点击按钮实现筛选功能

案例展示2：排序

（不想改变原数组，想通过数组副本来实现过滤和排序显示时，可以使用计算属性返回数组副本。）


案例解析：
Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素（key属性标识检测）。
替换的数组里，含有相同元素的项不会被重新渲染，因此可以大胆利用新数组替换旧数组，不必担心性能问题。

JS限制-数组操作

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
①利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
②修改数组的长度时，例如：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 的别名。

如有疑问或者问题请留言联系小编！！！！！

感谢来访！！！！