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

今天小编写一下Array数组操作（变异更新、替换）来个v-for和key小补充，方便了解接下来的课程循环指令v-for补充:使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;最...

裴嘉靖

39929人浏览 · 2019-10-15 19:51:31

裴嘉靖 · 2019-10-15 19:51:31 发布

今天小编写一下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)

如下图片例子：
在这里插入图片描述

②末尾删除-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)

如下图片例子：
在这里插入图片描述

③开头添加-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)

如下图片例子：
在这里插入图片描述

④开头删除-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)

如下图片例子：
在这里插入图片描述

⑤添加、删除、替换-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)

如下图片例子：
返回被删除的数组元素
在这里插入图片描述

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)

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

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)

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

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

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

如下图片例子：

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

字符串和数字大小对比

小结

（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))

如下图片例子：
在这里插入图片描述

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

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

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

小结：

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看下效果。

案例展示：（使用数组变异更新方法会改变原始数组）
之前的方法会改变原始数组，有些方法则不会改变。
变异方法 (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)

如下图片例子：
在这里插入图片描述

⑨拼接-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)

如下图片例子： 在这里插入图片描述

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

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

如下图片例子：
在这里插入图片描述

案例展示1（筛选）：

点击按钮实现筛选功能
在这里插入图片描述

案例展示2：排序

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

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

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

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

方法1：set方法

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

方法2：splice替换

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

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

要点

【非变异方法】

filter筛选操作—返回值为被筛选后的新数组，注意：并没有改变原始数据，而是生成了新数组。

concat拼接—返回值为被拼接后的新数组
slice截取—返回值为被截取的数组元素（包头不包尾）
【变异方法】
push数组末尾添加—返回值变异后的数组长度
pop数组末尾删除—返回值为被删除的数组元素
unshift数组开头添加—返回值变异后的数组长度
shift数组开头删除—返回值为被删除的数组元素
splice删除、添加、替换
删除splice(start,length)–返回值为被删除的数组元素
添加splice(start,0,newInfo)–返回值为空数组
替换splice(start,length,newInfo)–返回值为被替换的数组元素，注意：删除的数组元素个数必须与新添加的数组元素个数相等。
sort数组排序—返回值为排序后的数组
reverse数组反转—返回值为被翻转后的数组

[字符串数组索引操作]

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

裴嘉靖

@peijiajing

已为社区贡献4条内容