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

今天小编写一下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数组操作（变异更新、替换）今天就说这么多，有问题留言小编，嘿嘿…