Vue第四天笔记整理

数组的方法 filter,find,some,every,forEach,map,reduce
-filter:过滤，原数组不变，返回一个新数组，把过滤后返回true的每一项放新数组中
var ary=[1,2,3,5,4];
var a= ary.filter((item,index)=>{
return item >3
})
console.log(a);
- find：查找 ，原数组不改变，返回找到的第一项
var b= ary.find((item,index)=>{
return item > 3
})
console.log(b);
- some：查找，原数组不变，只要是找到符合条件的，就返回true，都找不到返回false
var c= ary.some((item,index)=>{
return item >6
})
console.log©;
- every :查找，原数组不变，只要是有一项不符合条件的，就返回false，都符合条件才会返回true
var d= ary.every((item,index)=>{
return item >0
})
- forEach :循环数组的，不支持return，没有返回值，直接循环出value和索引key（index）值
遇到基本类型原数组不变
遇到引用类型原数组变
var ary2=[{n:2},{n:3},{n:4}]
ary2.forEach((item,index)=>{
item.n*=2;
})
console.log(ary2);
- map :映射 , 原数组不变，return什么就映射什么
var e= ary.map((item,index)=>{
return ul.innerHTML+=<li>${item}</li> //es6中的模板字符串
})
console.log(e);
- reduce:用来迭代一个数组，并且把它累积到一个值中，一般用于求和，原数组不变
有4个参数：prev(上一个)，next(下一个)，index(索引)，arr(原数组)
每次retrun的值会作为下一次的prev

        var f= ary.reduce((prev,next,index,arr)=>{
        //prev 1 + next 2 =3
        //prev 3 + next 3 =6
        //prev 6 + next 5 =11
        //prev 11 +next 4 =15
        return prev+next
        })
        console.log(f);
          var ary=[[1,2],[3,5,4],[7,8,9]];
 
    **//多维数组变成一维数组 ：数组的扁平化**

   var l= ary.reduce((p,n)=>{
       //[1,2] [3,4,5] =[1,2,3,4,5]
       //[1,2,3,4,5] [7,8,9] =[1,2,3,4,5,7,8,9]
       return p.concat(n);
    })
  console.log(l);

computed ：计算属性
作用： 根据依赖的属性进行缓存，依赖的属性不变，它就不变
两部分组成：get 和set ，不能只写set ，get可以简写
默认调用get方法，get方法必须有retrun
不支持异步操作
使用场景：根据某个值得改变，做一些事情
a:{
get(){ 当获取a的时候，a被影响了吗？
return this.a
},
set(val){ 当给a赋值的时候，影响了msg
if(val.length <6){
this.msg=‘不能小于6位’
}
if(val.length >8){
this.msg=‘不能大于8位’
}
}
}
}
- watch: 侦听器
作用：监听数据的变化，去做某些事情
当数据变化时是异步操作或者开销较大的操作时使用watch
遇到对象和数组，进行深度侦听
和计算属性很相似，一般在使用的时候，能用计算属性操作的事情，就不用watch
写法1：watch:{ a(newval,oldval){}}
写法2：vm.$watch(‘a’,function(newval,oldval){},{deep: true})
使用场景：当有异步操作的计算的时候，或者想有一个中间过渡显示的时候（例如加载中）

        区别：案例 ，根据输入的值，计算msg的错误信息提示，watch加异步操作
        用computed做一个全选的案例，对比和methods的区别(方法调用需要触发才能生效，初始的时候拿不到值)

        深度监听：
        watch:{
            a:{
                handler(newval,oldval){
            },
            deep: true
            }

    区分使用：监听多个用computed,监听一个用watch/computed，异步操作的用watch