2019年7月份总结

七月底了，总结一下这个学的新东西吧。
这个月学的比较散，所以就顺便写写，想什么些什么。
一、为什么vue3.0要用proxy（vue2.0中Object.defineProperty 有什么缺陷？）
顺着我上次写，vue2.0采用的是Object.defineProperty这个方法来实现数据响应式，而vue3.0用的是proxy来实现的。为什么要做这种改变呢？
1、 Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；只能通过（push，pop，shift，unshift，splice，sort，reverse）这几种方式来监测。
2、Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。
3、Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

二、函数的防抖与节流
防抖：函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行。
这个其实理解起来也不难，但是一点都不生动。之前公众号–前端大全上看到过一篇介绍防抖和节流的文章，这里面讲的就很生动。里面模拟了一个场景：公交车司机到达一个站的时候，会打开车门（执行代码），然后人陆续排队刷卡上车，只有等到最后一个人刷完卡以后，并且等到最后一个人过几秒到最后站稳以后，司机才会关门继续开车。也就是说，每当一个人刷完卡，司机都会刷新他的等待时间，只有在规定时间内没人上车了，司机才会开车。
理解了防抖这个概念以后，其实代码就很容易写，设个setTiimeout，每次点击的时候clearTimeout然后在设置setTimeout就可以了。

节流：函数在某段时间内最多执行一次。
举个例子以三秒为一个周期，在这个三秒内最多只执行一次。
实现方法分为两种，一种是时间戳实现，一种是定时器实现。
时间戳：

function jieliu(func,waitTime){
      let startTime=Date.now();
      return (function(){
        let nowTime=Date.now();
        let str='大家好我是节流';
        if(nowTime-startTime>=waitTime){
          func(str)
          startTime=Date.now();
        }
      })
    }
    function log(str){
      console.log(str);
    }
    window.addEventListener('scroll',jieliu(log,5000))

定时器实现：

function jieliu(func,waitTime){
      let time=null;
      return (function(){
        let str='大家好我是节流';
        if(!time){
          time=setTimeout((()=>{
            func(str);
            time=null;
          }),waitTime)
        }
      })
    }
    function log(str){
      console.log(str);
    }
    window.addEventListener('scroll',jieliu(log,5000))

道理都差不多，而且不难理解，就不解释了。

3、我所知道div实现垂直居中的5个方式
1、利用flex布局的属性justify-content和align-items来实现
2、也是利用flex布局，父元素｛display:flex｝子元素｛margin:auto｝
3、div.parent{position:relative}
div.child{position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%)}
这个我认为很巧妙，不需要知道自身的大小就可以实现
4、如果知道本身大小，纯定位或者定位+margin
5、新扩展的一种,利用表格属性
div.parent{dispaly:table}
div.child{display:table-cell;vertical-align:middle;text-align:center;}

4、比较opacity: 0、visibility: hidden、display: none的区别
display:none(不占空间，可以点击)
visibility:hidden(占空间，不能点击)
opacity:0(占空间，可以点击)

5、数组的push方法是根据length去添加的。
所以只需要给对象一个length属性，对象也可以使用数组的push方法
并且只要一个对象的 length 属性为数字，同时splice属性为函数时， 对象的函数输出结果就会变成 伪数组。大家可以自己去试试。

6、将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组
如将 arr=[[1,6,5,8,1,5],5,85,9,[3,5,7,5]];变为一个升序，且不重复的数组
Array.from(new Set(arr.toString().split(",").sort((a,b)=>{ return a-b})))
这是我学习后想到最简单方法了。

7、箭头函数与普通函数的区别
1、普通的函数，this指向调用他的那个对象。箭头函数指向他所处的对象。
2、箭头函数不能用来构造函数，不能用new。因为他没有自己的this。
3、箭头函数不能调用apply，bind，call方法。
4、箭头函数没有argument对象。
基本上都是this所引起的区别。

8、如何使a==1&&a==2&&a==3成立。
只需要记住很关键的一点就可以了，‘’==‘’会进行隐式转换，只需要重写valueOf或者toString方法就可以了。当两个方法同时存在的时候，优先执行valueOf方法，有兴趣的可以自己试试看。

let a={
      value:1,
      valueOf:function(){
        console.log(a.value)
        return a.value++;
      },
      toString:function(){console.log(a.value)
        return a.value+=2;}
    };
    console.log(a==1&&a==2&&a==3)

因为会优先执行valueOf方法，所以toString的a.value+=2并不会起作用。

9、用typeof，instanceof，Object.prototype.toString.call判断变量类型的区别
typeof：只能判断常见的基础类型（number.string,undefined,boolean,symbol）,判断null的时候返回的Object,值得一提的是很多人不知道用typeof判断symbol类型的变量时，返回的也是symbol。

instanceof：返回只能是true或者false。用法:let a={}; console.log(a instanceof Object)
但是instanceof只能用来判断引用类型的数据，如果用来判断基本数据类型返回的都是false，如

let a=1,b='ss';
console.log(a instanceof Number);//false
console.log(b instanceof String);//false

返回的都是false；
并且当判断function的时候：

let fun=function(){};
console.log(fun instanceof Object);//true
console.log(fun instanceof Function);//true

所以一般不推荐使用instanceof来判断数据类型

Object.prototype.toString.call()
这个方法可以直接获取变量内部的class属性，可以判断"Arguments", “Array”, “Boolean”, “Date”, “Error”, “Function”, “JSON”, “Math”, “Number”, “Object”, “RegExp”, "String"类型的数据。
但是弊端就是有些地方的toString方法容易被重写，而且据说这个方法性能不好，这个有待研究，可能是以讹传讹。

好了以上就是7月份的总结了。
我们的目标是星辰大海！