面试1

1. 清除浮动
   方法1：:after方法

   :after{
    content: ".";
    clean：both;
   display:block;
   height: 0px;
   }

   方法2：父元素设置overflow:hidden

   .f{
       overflow:hidden;
       
   }

   方法3：添加空div标签clean:both

   .clean-both{
       clean:both;
   }

2. div垂直和水平居中
   方法1 使用absolute+transform

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

   方法2 inline-block+text-align

   .parent{
       text-align:center;
       display:table-cell;
       vertical-align:middle;
   }
   .child{
       display:inline-block;
   }

   方法3 flex

   .parent{
       display:flex;
       justify-content:center;
       align-items:center;
   }

3. DOM操作
   获取子元素并插入

   <ul>
   <li>1</li>
   <li>3</li>
   </ul>

   代码如下：

   var li=document.createElement("li");
   var textNode=document.createTextNode("2");
   li.appendChild(textNode);
   var ul=document.getElementsByTagName("ul");
   ul.insertBefore(li,ul.childNodes[1]);

4. 数组去重
   遍历，将数组的值添加到一个对象的属性名里，并给属性赋值，对象不能添加相同属性名，以这个为依据可以实现数组去重，然后用Object.keys(对象)返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组。

    let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b'];
       const unique = arr => {
           var obj = {}
           arr.forEach(value => {
               obj[value] = 0;//这步新添加一个属性，并赋值，如果不赋值的话，属性会添加不上去
           })
           return Object.keys(obj);//`Object.keys(对象)`返回这个对象可枚举属性组成的数组，这个数组就是去重后的数组
       }
       console.log(unique(a));//["1", "2", "3", "NaN", "undefined", "null", "a", "b"]
   
   作者：OBKoro1
   链接：https://juejin.im/post/5aad40e4f265da237f1e12ed
   来源：掘金
   著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

   es6

   let unique= [...new Set(array)];
   //es6 Set数据结构类似于数组，成员值是唯一的，有重复的值会自动去重。
   //Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个

5. 提高页面加载速度

• 减少dom操作
• 部署前，图片压缩，代码压缩
• 优化js代码结构，减少冗余代码
• 减少http请求，合理设置 HTTP缓存
• 使用内容分发cdn加速
• 静态资源缓存
• 图片延迟加载

6. 作用域问题

   function F(){
       var arr=[],i;
       for(i=0;i<3;i++){
           arr[i]=function(){
               return i;
           };
       }
       return arr ;
   }
   结果都为3;闭包问题
   方法为
   function F(){
       function binder(x){
           return function(){
               return x;
           };
       }
       var arr =[],i;
       for(i=0;i<3;i++){
           arr[i]=binder(i);
       }
       return arr;
   }

7. vue数据监控

• 使用watch监控
• 使用计算属性
• 过渡器