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

梦里梦外; 2023-06-07 15:29 43阅读 0赞

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

## 大纲 ##

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

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

### JS数组操作 ###

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

![在这里插入图片描述][20191015170724139.png]

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

![在这里插入图片描述][20191015170811565.png]

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

![在这里插入图片描述][20191015170921532.png]

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

![在这里插入图片描述][20191015170938320.png]

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

1、删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度  
![在这里插入图片描述][2019101517095537.png]  
**返回被删除的数组元素**  
2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。  
![在这里插入图片描述][20191015171021137.png]  
**返回空；如果要插入多个项，可以再传入第四、第五…任意多个项**  
**替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项**  
3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。  
![在这里插入图片描述][20191015171120855.png]  
**返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等**

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

![在这里插入图片描述][2019101517115034.png]  
**排序位置22为什么在3的前面？  
解析：排序时按照ASCII码进行排序，先看首个字符的ASCII码值，按照码值进行排序。**

# 字符串和数字大小对比 #

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

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

![在这里插入图片描述][20191015172141523.png]  
**以上即为数组变异更新，接下来结合Vue看下效果。**

**案例展示：（使用数组变异更新方法会改变原始数组）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
**之前的方法会改变原始数组，有些方法则不会改变。  
变异方法 (mutation method)，顾名思义，会改变原始数组。  
相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。**

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

![在这里插入图片描述][20191015172310917.png]

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

![在这里插入图片描述][2019101517233679.png]

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

![在这里插入图片描述][20191015172355152.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

## 案例展示2：排序 ##

**（不想改变原数组，想通过数组副本来实现过滤和排序显示时，可以使用计算属性返回数组副本。）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
**案例解析：  
Vue在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化的复用DOM元素（key属性标识检测）。  
替换的数组里，含有相同元素的项不会被重新渲染，因此可以大胆利用新数组替换旧数组，不必担心性能问题。**

## JS限制-数组操作 ##

**由于 JavaScript 的限制，Vue 不能检测以下变动的数组：**  
①利用索引直接设置一个项时，例如：vm.items\[indexOfItem\] = newValue  
②修改数组的长度时，例如：vm.items.length = newLength  
**利用索引直接设置，无法响应**  
![在这里插入图片描述][201910151729323.png]

##### 方法1：set方法 #####

**语法结构：Vue.set(vm.items, indexOfItem, newValue)**  
![在这里插入图片描述][20191015172955582.png]

##### 方法2：splice替换 #####

**语法结构：vm.items.splice(indexOfItem, number, newValue)**  
![在这里插入图片描述][20191015173020131.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

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

![在这里插入图片描述][20191015173101761.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**此外还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。**

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

### 感谢来访！！！！ ###

[20191015170724139.png]: /images/20230601/6c6e1b7322aa4eea9dd9173be5ddbf7a.png
[20191015170811565.png]: /images/20230601/0875ef5ae3e84a47850b08d012901c83.png
[20191015170921532.png]: /images/20230601/3b95d66091f843ab9c8cb3148fc653a5.png
[20191015170938320.png]: /images/20230601/7aff38b08735434196b4183c0d4ec0fc.png
[2019101517095537.png]: /images/20230601/702210078cda486986ed2e4be1142d05.png
[20191015171021137.png]: /images/20230601/04d22b76fee14956aba5f8c88779b84b.png
[20191015171120855.png]: /images/20230601/8df5bd2772774c4bb75d1f19c22eb165.png
[2019101517115034.png]: /images/20230601/87c0d1a82ce04af1a4c4f922e62ad7a4.png
[20191015172141523.png]: /images/20230601/1a7275015383497aa2f51ac7200dac0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230601/1c1389c3348543ba8b51816d84744e61.png
[20191015172310917.png]: /images/20230601/d28f8b5fe66c444fa09f83c48e0c4311.png
[2019101517233679.png]: /images/20230601/69a9e053ea39473984c83ebe40f62d55.png
[20191015172355152.png]: /images/20230601/c55aeaab95c24770a6dc287bd058ccae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230601/b6062c0253454378a31bf48ac073ae30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230601/eac70ca8e5be4a19a1745d9293628fde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230601/da563f8a2c9849cfb5839d3225088657.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230601/a2a42ee621e34c62b0f339f3854c12d5.png
[201910151729323.png]: /images/20230601/d5830190f888445c8e0832c205cabc25.png
[20191015172955582.png]: /images/20230601/80857f024b344adfb0c8be1143b89456.png
[20191015173020131.png]: /images/20230601/608ff41f4c27485fa9aa90d80871c2b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230601/3ade287d745a43bb965166d701c80f09.png
[20191015173101761.png]: /images/20230601/18c627e5e39b4af28860b9659ec3f351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230601/b351c7a25c134597be47565a19fe970f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230601/f8d64cbca353400497c7d7397aed4602.png