js数组的深入

1、数组中的哪些方法是响应式的？

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

1）push方法  ==> 响应式
 this.letters.push('F');

2）pop (删除数组中的最后一个元素) ==> 响应式
 this.letters.pop();
 
3）shift() 删除数组中的第一个元素
 this.letters.shift();

4）unshift() : 在数组的最前面添加一个元素
 
5）splice()的作用：删除元素、插入元素、替换元素
删除元素时：splice(start,num) 表示从start开始，删除num个元素。如果不传值，表示删除后面的所有元素
替换元素：splice(start,num,’a','b','c'): 第二个参数表示要替换几个元素，后面的 ‘a','b'表示要替换的元素
插入元素：splice(1,0，'x','y','z') : 第二个参数传入0，表示在第一个元素后面插入‘x','Y','z'

6）sort():对数组进行排序

7）reverse()：反转数组
this.letters.reverse();

8）注意通过索引值来修改数组的元素，不是响应式的
//this.letters[0] = "aaa";
//可以通过以下两种方式解决
this.letters.splice(0,1,"aaa");
Vue.set(this.letters,0,"aaa");

2、JavaScript高阶函数的使用

1）循环的三种方式
for(let i=0;i<this.books.length;i++){
}

for(let i in this.books){
  // i 是数组中元素的索引
}

for(let item of this.books){
 // item 是数组中的元素
}

2）filter的使用
// filter的回调函数有一个要求：必须返回一个boolean值
// 当返回值为true时，函数内部会自动将这次回调的n加入到新的数组中
// 当返回值为false时，函数内部会过滤掉这次的n
// 回调函数的参数 n: 遍历过程中，每次遍历到的元素
let newNums = nums.filter(function (n) {
  return n<100;
})
console.log(newNums);

3）map的使用
// 对数组中的所有元素做某个操作，然后放到新的元素中
let newNum2 = newNums.map(function (n) {
  return n*2;
})
console.log(newNum2);

4）reduce的使用
//作用：对数组中的所有内容进行汇总
//reduce(参数一,参数二) 参数一：函数 参数二：初始值
let total = newNum2.reduce(function (preValue,n) {
  return preValue+n;
},0)
console.log(total);

//第一次：preValue:0  n:20
//第二次：preValue:20  n:40
//第三次：preValue:60  n:60
//第四次：preValue:120  n:80