vue学习笔记 数组中的响应式方法

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;
}