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

妖狐艹你老母 2023-06-08 03:09 23阅读 0赞

***今天小编写一下Array数组操作（变异更新、替换）***  
**来个v-for和key小补充，方便了解接下来的课程**

## 循环指令v-for补充: ##

*  使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
 *  我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;
 *  最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性;
 *  **原因：**
 *  因为Virtual DOM 使用Diff算法实现的原因

## 循环指令key属性补充: ##

**Vue和React框架用遍历指令时的key值不建议用index**

*  （1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以
 *  （2）如果有删除插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值不仅不会优化还会影响性能
 *  （3）index作为:key值，有可能导致第一次执行循环体初始化失败，正确的做法是尽量使用理想的 key 值－每项都有的唯一 id  
    **今天的内容小编分为四个部分,分别是：**  
    （1）数组操作补充  
    （2）ASCII码值  
    （3）JS限制-数组操作限制  
    （4）JS限制-对象操作限制

# 前言 #

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

## JS数组操作 ##

*  ①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。  
    **如下代码例子：**

//变异方法 (mutation method)
    		var new_array = [11, 22, 33, 44, 55, 66];
    		//push数组末尾添加---返回值变异后的数组长度
    		var new_array_push = new_array.push(999);
    		console.log(new_array_push);
    		console.log(new_array)

**如下图片例子：**  
![在这里插入图片描述][20191015190417482.png]

*  ②末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。  
    **如下代码例子：**

var new_array1 = [11, 22, 33, 44, 55, 66];
    		//pop数组末尾删除---返回值值为被删除的数组元素
    		var new_array_pop = new_array1.pop();
    		console.log(new_array_pop);
    		console.log(new_array1)

**如下图片例子：**  
![在这里插入图片描述][20191015190630530.png]

*  ③开头添加-unshift，会改变原始数组，返回更新后新数组长度  
    **如下代码例子：**

var new_array2 = [11, 22, 33, 44, 55, 66];
    		//unshift数组开头添加---返回值变异后的数组长度
    		var new_array_unshift = new_array2.unshift(999);
    		console.log(new_array_unshift);
    		console.log(new_array2)

**如下图片例子：**  
![在这里插入图片描述][20191015190737727.png]

*  ④开头删除-shift，会改变原始数组，返回被删除的数组元素  
    **如下代码例子：**

var new_array3 = [11, 22, 33, 44, 55, 66];
    		//shift数组开头删除---返回值值为被删除的数组元素
    		var new_array_shift = new_array3.shift();
    		var new_array_shift = new_array3.shift();
    		console.log(new_array_shift);
    		console.log(new_array3)

**如下图片例子：**  
![在这里插入图片描述][20191015190855288.png]

*  ⑤添加、删除、替换-splice，会改变原始数组
    
     *  1、删除：删除(任意个数)—参数1：开始的索引；参数2：删除的长度

**如下代码例子：**

var new_array4 = [11, 22, 33, 44, 55, 66];
    		//删除splice(start,length)--返回值为被删除的数组元素
    		var new_array_splice = new_array4.splice(1, 3);
    		//1、删除：删除(任意个数)---参数1：开始的索引；参数2：删除的长度
    		console.log(new_array_splice);
    		//返回被删除的数组元素
    		console.log(new_array4)

**如下图片例子：**  
返回被删除的数组元素  
![在这里插入图片描述][20191015191041565.png]

*  2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项  
    **如下代码例子：**

var new_array5 = [11, 22, 33, 44, 55, 66];
    		//添加splice(start,0,newInfo)--返回值为空数组
    		var new_array_splice = new_array5.splice(1, 0, 333, 4444);
    		//2、添加(任意个数): 插入起始位置、0（要删除的项数）和要插入的项。
    		console.log(new_array_splice);
    		//返回空；如果要插入多个项，可以再传入第四、第五....任意多个项
    		console.log(new_array5)

**如下图片例子：**  
返回空；如果要插入多个项，可以再传入第四、第五…任意多个项  
![在这里插入图片描述][20191015191235163.png]  
\*\*替换：替换(任意个数)：即删除和插入数量相等项数的综合应用，可以指向指定位置插入任意数量的项，且同时删除任意数量的项  
\*\*

*  3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。  
    **如下代码例子：**

var new_array6 = [11, 22, 33, 44, 55, 66];
    		console.log('以下是splice替换');
    		//替换splice(start,length,newInfo)--返回值为被替换的数组
    		var new_array_splice = new_array6.splice(0, 3, 999, 888, 777);
    		//3、指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。
    		console.log(new_array_splice);
    		//返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等
    		console.log(new_array6)

**如下图片例子：**  
返回被替换掉的数组元素；注意：插入的项数是不必与删除的项数相等  
![在这里插入图片描述][20191015191832305.png]

*  ⑥排序-sort，会改变原始数组，返回排序后的数组  
    **如下代码例子：**

var new_array7 = [11, 33, 55, 22, 444, 666];
    		var new_sort = new_array7.sort()
    		//返回值为排序后的数组
    		console.log(new_sort)

**如下图片例子：**

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

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

**小结**

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

# ASCII码值 #

**拓展：**

*  （1）charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
 *  语法：stringObject.charCodeAt(index)
 *  字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。
 *  **如下代码例子：**

var str = 'hello vue'
    		console.log(str.charCodeAt(6))
    		//字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。
    		var str1 = '你看啥看'
    		console.log(str1.charCodeAt(1))
    		console.log(str1.charCodeAt(2))

**如下图片例子：**  
![在这里插入图片描述][20191015192326398.png]

*  （2）charAt() 方法可返回指定位置的字符。
 *  **如下代码例子：**

var str_charat = '你看啥看'
    		//①场景：获取字符串“你看啥看”的你，需要转数组再获取
    		var str_array = str_charat.split("").join()
    		console.log(str_array[2])
    		// ②现在可以直接用charAt() 方法可返回指定位置的字符
    		console.log(str_charat.charAt(2))

**如下图片例子：**  
①场景：获取字符串“你看啥看”的你，需要转数组再获取  
![在这里插入图片描述][20191015192650398.png]  
②现在可以直接用charAt() 方法可返回指定位置的字符  
![在这里插入图片描述][20191015192656325.png]  
**小结：**

*  1、charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
 *  2、charAt() 方法可返回指定位置的字符。
 *  3、方法 charCodeAt() 与 charAt()  
    方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。
 *  **⑦翻转-reverse，会改变原始数组，返回翻转后的数组**

var new_array7 = [11, 22, 33, 44, 55, 66];
    		console.log('以下是reverse数组反转');
    		var new_reverse = new_array7.reverse()
    		//返回值为被翻转后的数组
    		console.log(new_reverse)

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

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

var arr_repeat = ['A','B','A','D','C','D','E','F']
    		var arr_filter = arr_repeat.filter(function(element,index,self){
    			return self.indexOf(element) == index
    		})
    		console.log(arr_repeat)
    		console.log(arr_filter)

**如下图片例子：**  
![在这里插入图片描述][20191015193114729.png]

*  **⑨拼接-concat，不会改变原始数组，返回拼接后的新数组**  
    **如下代码例子：**

var arr_concat1 = ['A','B','C','D']
    		var arr_concat2 = arr_concat1.concat(['E','F','G'])
    		console.log(arr_concat1)
    		console.log(arr_concat2)

**如下图片例子：** ![在这里插入图片描述][20191015193300861.png]

*  **⑩截取-slice:包含开头索引不含结尾索引，返回截取的数组元素**  
    **如下代码例子：**

var arr_slice1 = ['A','B','C','D']
    		var arr_slice2 = arr_slice1.slice(1,2)
    		console.log(arr_slice1)
    		console.log(arr_slice2)

**如下图片例子：**  
![在这里插入图片描述][20191015193404525.png]

## 案例展示1（筛选）： ##

**点击按钮实现筛选功能**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

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

**（不想改变原数组，想通过数组副本来实现过滤和排序显示时，可以使用计算属性返回数组副本。）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]  
**案例解析：**

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

## 由于 JavaScript 的限制，Vue 不能检测以下变动的数组： ##

*  ①利用索引直接设置一个项时，例如：vm.items\[indexOfItem\] = newValue
 *  ②修改数组的长度时，例如：vm.items.length = newLength  
    **利用索引直接设置，无法响应**  
    为了解决第一类问题，有两种方式都可以实现和 vm.items\[indexOfItem\] = newValue 相同的效果，同时也将触发状态更新：  
    ![在这里插入图片描述][20191015193727795.png]

## 方法1：set方法 ##

**语法结构：Vue.set(vm.items, indexOfItem, newValue)**  
也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。  
![在这里插入图片描述][20191015193807915.png]

## 方法2：splice替换 ##

**语法结构：vm.items.splice(indexOfItem, number, newValue)**  
![在这里插入图片描述][20191015193840320.png]  
**限制2：修改数组的长度时，例如：vm.items.length = newLength**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]

*  对象属性改动时，vue可以实时监听检测，实现响应式。但是注意：由于 JS的限制，**Vue 不能检测对象属性的添加或删除**。
 *  对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。  
    ![在这里插入图片描述][20191015194051130.png]
 *  使用 Vue.set(object, key, value) 方法向**嵌套对象添加响应式属性**
 *  此外还可以使用 vm.$set 实例方法，它只是**全局 Vue.set 的别名**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

## 要点 ##

**【非变异方法】**

*  filter筛选操作—返回值为被筛选后的新数组，注意：并没有改变原始数据，而是生成了新数组。  
    ![在这里插入图片描述][2019101519432149.png]  
    concat拼接—返回值为被拼接后的新数组  
    slice截取—返回值为被截取的数组元素（包头不包尾）  
    **【变异方法】**
 *  push数组末尾添加—返回值**变异后的数组长度**
 *  pop数组末尾删除—返回值**为被删除的数组元素**
 *  unshift数组开头添加—返回值**变异后的数组长度**
 *  shift数组开头删除—返回值**为被删除的数组元素**
 *  splice删除、添加、替换
 *  删除splice(start,length)–返回值**为被删除的数组元素**
 *  添加splice(start,0,newInfo)–返回值**为空数组**
 *  **替换splice(start,length,newInfo)–返回值为被替换的数组元素，注意：删除的数组元素个数必须与新添加的数组元素个数相等。**
 *  sort数组排序—返回值**为排序后的数组**
 *  reverse数组反转—返回值**为被翻转后的数组**

**\[字符串数组索引操作\]**

*  —indexOf从头到尾
 *  —lastIndexOf从尾到头  
    **注意：如果字符串；里没有该子元素，则返回-1，如果有则返回该元素在字符串数组里的下标。**

关于array数组操作（变异更新、替换）今天就说这么多，有问题留言小编，嘿嘿…

[20191015190417482.png]: /images/20230601/d72d2b5c5587409e86bc03195da793e9.png
[20191015190630530.png]: /images/20230601/3041874242284a98b6a33286b05684bd.png
[20191015190737727.png]: /images/20230601/70459bc1273f43e5a8232381e9ac3385.png
[20191015190855288.png]: /images/20230601/7c21197fe1154eecb615309de6c478a1.png
[20191015191041565.png]: /images/20230601/8e77c24477c24c62b3193b188eed328e.png
[20191015191235163.png]: /images/20230601/48125f5993aa44a89a98a850cc5bbe85.png
[20191015191832305.png]: /images/20230601/a58080dda5e84a1f8f800e51bd795b87.png
[20191015192032195.png]: /images/20230601/42f7f5e8257a435292915ab5e5cb0b60.png
[20191015192326398.png]: /images/20230601/076bd7ebbf684bd4bd2d61525b4c4582.png
[20191015192650398.png]: /images/20230601/1118546efeca4cd3afa6b27f9fdd7e35.png
[20191015192656325.png]: /images/20230601/b6da76a263b04d4f8f28d97c8ebccdf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230601/d5a111310607480b8d70ddb3975e7424.png
[20191015193114729.png]: /images/20230601/d197ef093e85448db4a602122c0357a6.png
[20191015193300861.png]: /images/20230601/9ea77d5975a847799ca75461c286d202.png
[20191015193404525.png]: /images/20230601/aaf3be066fec446188cb2e9235125537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230601/64a325db8c664cdd914aaf192e7ecdf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230601/11fbb926e35046da96b902fd9e17e1cd.png
[20191015193727795.png]: /images/20230601/0fc2a35d72594ad9917892e182f0b135.png
[20191015193807915.png]: /images/20230601/2afd3d656c334cdb97749f930309ea11.png
[20191015193840320.png]: /images/20230601/ebf1d580f3d146c48a67bb893932e08d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230601/708e5bc67f9242fdab3ee9071adeb188.png
[20191015194051130.png]: /images/20230601/a5568fe8f16846aab3a74b441393fb08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230601/ad2e9051afe64f739b9bc8afc45e6116.png
[2019101519432149.png]: /images/20230601/59a99239abd146a3b38dd300ac5b9b5b.png