vue中实现变异数组和非变异数组的方法

Posted 2023-03-01

参考技术A

在阅读vue官网的时候，偶然间看到了一个观察数组变异的方法，变异方法？Are you kidding me? ...什么东西？guide就给了这么一堆东西：
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
*
1.push( )
*
2.pop( )
*
3.unshift( )
*
4.shift( )
*
5.splice()
*
6.sort()
*
7.reverse()

看完这里才恍然大悟，其实数组变异方法都是javascript操作数组的方法，那么接下来就一一解释这些方法是干嘛用的
push（）往数组最后面添加一个元素，成功返回当前数组的长度
pop（）删除数组的最后一个元素，成功返回删除元素的值
shift（）删除数组的第一个元素，返回该元素。
unshift（）在数组的开头添加一个或者多个元素，返回原数组的长度，改变原来的数组
splice（）有三个参数，第一个是删除index位置的元素（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）
splice(index，num，5)表示从index下标位置开始向后截取num个元素，截取的这些元素组成一个新数组返回，并且从index位置开始，插入后面的所有参数。（插入到原数组里去）
sort（）使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse（） 将数组倒序，成功返回倒序后的数组

既然有变异方法那么也自然有非变异方法（操作数组不改变原数组的）
filter（）、concat（）和 slice（）
他们不会改变原始数组，他们只会生成一个新的数组
slice（）将原数组copy
slice（startindex，endindex）从startindex下标开始向后截取到endindex位置（不包含）的元素，截取的这些元素组成新的数组返回，原数组不变
concat（）将一个或多个数组组合到原数组中，组成新的数组返回
与push的区别
filter（）可以对数组元素进行过滤

逆战