vue学习笔记 数组中的响应式方法
在数组中常用的响应式方法:
1、push方法
从数组的最后添加元素,可以是一个元素也可以是多个元素。
例子:
array.push("elem1");
array.push("elem1", "elem2", "elem3", "elem4");
2、pop方法
删除数组的最后一个元素。
例子:
array.pop();
3、unshift方法
从数组的前面添加元素,可以是一个或多个。
例子:
array.unshift(elem1);
array.unshift(elem1, elem2, elem3, elem4);
4、shift方法
删除数组的第一个元素
例子:
array.shift();
5、splice方法
能传入三个参数(最后一个参数是可变参数),splice(start, length, elems)
删除元素作用:
start参数为从哪里开始删除,length为删除多少个元素(length可以省略,省略则变成将后面的元素全部删除),elems参数省略。
例子:
array = [1, 2, 3, 4, 5];
// 从index为1的位置开始删除,删除两个元素
array.splice(1, 2); // array = [1, 4, 5]
array = [1, 2, 3, 4, 5];
// 从index为1的位置开始删除,删除后面的全部元素
array.splice(1); // array = [1]
替换元素作用:
start参数为从哪里开始替换,length为替换多少个元素,elems参数为替换后的元素。
例子:
array = [1, 2, 3, 4, 5];
// 从index为1的地方开始替换两个元素,替换为7和8
array.splice(1, 2, 7, 8); //array = [1, 7, 8, 4, 5]
添加元素作用:
start参数为从那个添加,length固定为0,elems参数为需要在start位置后面添加的元素。
例子:
array = [1, 2, 3, 4, 5];
// 从index为1的地方开始添加两个元素 7和8
array.splice(1, 0, 7, 8); //array = [1, 7, 8, 2, 3, 4, 5]
6、sort方法
对数组进行排序
例子:
array = [1, 7, 8, 2, 3, 4, 5];
array.sort(); // array = [1, 2, 3, 4, 5, 7, 8]
7、reverse方法
对数组内的元素进行倒序
例子:
array = [1, 7, 8, 2, 3, 4, 5];
array.reverse(); // array = [5, 4, 3, 2, 8, 7, 1]
注意点:非响应式的数组修改
通过下标直接修改数组的某一个值不是响应式的,虽然数组已经发生改变。但是显示的值不会改变。
例子:
array[1] = 23;
// 虽然数组发生了变化,但是不是响应式的,所以显示的还是原来的数组内容
解决方法:
1、可以使用splice方法的替换元素的功能进行代替:
要替换的下标start, 替换的长度固定length为1,替换的元素elem
array.splice(1, 1, 23); // 即可完成替换
2、vue自带的set方法
Vue.set(要修改的数组,索引值,修改后的值);
Vue.set(array, 1, 23);
补充问题:
为什么前面的splice方法中的elems参数,既可以传入一个参数又可以传入多个参数:
方法在定义时使用了可变参数。
例子:
// 会在控制台打印出201
console.log(sums(1, 2, 3, 44, 5, 66, 80));
function sum(...sums){
// sums即为可变参数,被存储到一个sums数组当中
// sums作为一个数组进行调用
let result = 0;
for (let i = 0; i < sums.length; i++){
result += sums[i];
}
return result;
}