Vue里的数组方法（响应式和非响应式）

目录

 一、响应式

1.push()    ：添加

2.splice ()  ：删除和插入

3.pop ()  ：删除末尾

4.shift () ：删除开头

5.unshift ()   ：添加开头

6.sort ()    ：排序

7.reverse ()   ：反转

二、非响应式

---

 一、响应式

1.push()    ：添加

解释：该方法是在数组最后添加数据 假设数组为array

this.array.push("a") ==> 在数组array的最后添加一个a

this.array.push("a","b","c")==>在数组array的最后添加上三个元素，a，b，c

2.splice ()  ：删除和插入

解释： 该方法可以实现删除和插入元素，有三个参数，例子： this.array.splice(1,0,‘f’)

• 第一个参数为：从第几个开始？

• 第二个参数为：删除几个？

• 第三个参数为：插入什么参数？

1.删除元素：第二个参数传入，代表着你要删除几个元素？如果没有传入的话，就删除后面所有的元素

this.array.splice(1,2) //从第一个参数开始，删除俩个参数！
 
this.array.splice(1)//从一个参数开始，删除后面所有的参数！

2.替换元素：第二个参数表示我们要替换几个元素，后面是用于替换他们的元素

this.array.splice(1,1,‘a’) 从第一个参数开始将下一个元素替换成a；

this.array.splice(1,3,‘a’,‘b’,‘c’)从第一个参数开始将下面的三个元素替换成a,b,c

3.插入元素：第二个元素传入0，后面写要插入的元素就可以了

this.array.splice(1,0,‘a’) //在第一个参数后面插入a

this.array.splice(1,0,‘a’,‘b’,‘c’) //在第一个参数后面插入a,b,c

3.pop ()  ：删除末尾

解释 : 该方法，删除数组最后一个元素；

this.array.pop();

4.shift () ：删除开头

解释: 该方法，删除数组第一个元素

this.array.shift();

5.unshift ()   ：添加开头

解释:该方法在数组最前面添加元素，

this.array.unshift(‘加油哟’)  //在数组前面添加一个元素：加油哟

this.array.unshift(‘a’,‘b’,‘c’) //在数组前面添加三个元素：a，b，c

6.sort ()    ：排序

解释: 该方法是对数组进行排序的

sort()方法对数组进行原地排序，因此调用该方法后数组会被修改，而不是返回一个新的排好序的数组。

this.array.sort();  //根据第一位数的顺序，从小到大排序：“字母”、“数字”

//字母
const array = ['banana', 'apple', 'pear', 'orange'];
console.log(array.sort()); // ['apple', 'banana', 'orange', 'pear']

//数字
const array = [30, 1, 5, 4];
console.log(array.sort()); //[1,30,4,5]

//数字从小到大排序
const array = [35, 23, 45, 12, 2];
array.sort((a, b) => a - b);
console.log(array); // [2, 12, 23, 35, 45]

/**
    传递了一个回调函数(a,b)=>a-b，表示按照升序排序。
    如果想要按照降序排序，则可以使用(a,b)=>b-a 
*/

正常排序是如此，那么随机排序怎么写呢？

this.array.sort(()=>Math.random()-.5) //就可以实现随机排序了

/**
    该箭头函数用于比较两个元素的大小，使用了Math.random()生成一个随机数，
    该函数的返回结果为一个随机的正数或负数，使得数组中的元素随机排序。该函数
    对于所有元素的比较都会产生一个随机数，因此每次对数组排序的结果都不同。
*/

7.reverse ()   ：反转

解释: 该方法是对数组进行反转的

this.array.reverse(); //将数组里的值的顺序反过来

二、非响应式

起因：

在使用vue实习中，通过数组的索引改变了数组中的值，测试时发现，更改成功了，但是视图无响应。

原因：

通过索引值修改数组元素,不是响应式方法

 // 以下代码，虽然可以正确更改索引为0的那一项，但是视图上并不会相应改变
 this.person[0]='adda';