前端扫盲,希望早日恢复视力

css度量单位rem，em，vh，vw，px

单位	解释
em	相对单位，基准点是父节点字体的大小，如果自身定义了font-size按自身来计算(浏览器默认字体是16px)，整个页面内1em不是一个固定的值
rem	相对单位，可理解为“root em”，相对根节点html的字体大小来计算，CSS3新增属性
vh	视窗高度，1vh等于视窗高度的1%
vw	视窗宽度，1vw等于视窗宽度的1%
px	绝对单位，页面按精确像素展示

css控制居中

    <div class="parent">
        <button class="child">
                123
        </button>
    </div>

display:flex

        .parent{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border:1px solid red
        }

absolute+transform

        .child{
             position: absolute; 
             top: 50%;
             left: 50%; 
             transform: translate(-50%,-50%); 
        } 

js new发生了什么？

• 1.创建新对象
• 2.将this指向这个对象
• 3.执行代码 将__proto__指向了prototype

js精度问题

先拿出小数部分，乘为整数，然后除以m即可

乘法

function add(num1, num2){
  let r1, r2, m;
  try{
    r1 = num1.toString().split('.')[1].length
  }catch(e){
    r1 = 0
  }
  try{
    r2 = num2.toString().split('.')[1].length
  }catch(e){
    r2 = 0
  }
  m = Math.pow(10, Math.max(r1, r2))
  return (num1 * m + num2 * m) / m
}

vue生命周期

• 创建之前
• 挂载之前
• 更新之前
• 更新之后
• 销毁之前
• 销毁完成
• keep-alive缓存功能

给一个数组。找出出现次数最多的三个数

       arr=[1,1,1,1,1,2,2,2,2,2,3,3,3,4,5,6,7,7,7,7,7,7,7,7,7,7,7,8]
       var map=new Map()
       arr.forEach(element => {
          if(map.has(element)){
              var val=map.get(element)
              map.set(element,val+1)
          }else{
              map.set(element,1)
          }
       });
       var newarr=Array.from(map)
       newarr.sort(function(a,b){
           return b[1]-a[1]
       })
       var ans=[]
       for(var i=0;i<3;i++){
            ans.push(newarr[i][0])
       }
       console.log(ans);

压平数组，如何将多维数组变成一维

concat结合apply

let arr=[[1,2],[3,4,5],[6]]
console.log([].concat.apply([],arr))

es6:flat()

        let arr=[[1,2],[3,4,5],[6]].flat(Infinity)
        console.log(arr);

二叉树的层序遍历

var levelOrder = function (root) {
  const arr = []
  function loop(node, h) {
      if (!node) return
      if (!arr[h]) arr[h] = []
      arr[h].push(node.val)
      loop(node.left,  h + 1)
      loop(node.right, h + 1)
  }
  loop(root, 0)
  return arr
}

display与visibility的区别

两者都是隐藏

• 1.display隐藏后，div不会占用位置
• 2.visibility隐藏后，div还会占用位置

HTTP1.0与HTTP2.0

HTTP1.0利用文本与服务器交互，而HTTP2.0的基本协议单位为二进制帧流，每帧都有自己的类型旨在实现不同功能，然后HTTP1.0将继续存在，因此HTTP2.0的二进制帧流需映射到HTTP1.0上以实现向下兼容

HTTP/HTTPS的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

• 1.https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用
• 2.http是超文本传输协议，信息是铭文传输，https则是具有安全性的ssl/tls加密传输协议
• 3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443
• 4.http的连接很简单，是无状态的；https协议是由ssl/tls+http协议构建的可进行加密传输，身份认证的网络协议，比http协议安全

手写一个promise.all

        mypromise.all=function(arr){
            return new Promise((resolve,reject)=>{
                if(!Array.isArray(arr)){
                    throw new TypeError('must be arr')
                }
                var len=arr.length
                var resolvenum=0
                var result=[]
                for(var i=0;i<len;i++){
                    arr[i].then((data)=>{
                        resolvenum++
                        result.push(data)
                        if(resolvenum==len){
                            return resolve(result)
                        }
                    }).catch((error)=>{
                        return reject(error)
                    })
                }
            })
        }

写一个深拷贝

        function copy(obj){
            var newobj={}
            for(var i in obj){
                if(typeof obj[i]=="object")
                    newobj[i]=copy(obj[i])
                else
                    newobj[i]=obj[i]
            }
            return newobj
        }