2020-08-28

2020面试题总结

一、优化

  1.性能优化

  答案：https://www.cnblogs.com/lanxiansen/p/10972802.html

  2.seo优化

  答案：https://www.cnblogs.com/mengbing/p/10796327.html

 3.webpack 打包优化

答案：https://www.jianshu.com/p/e4c1a9c40a2e

二、vue面试题

1.v-if和v-show的区别

https://www.cnblogs.com/dengyao-blogs/p/11378228.html

2.谈一谈vue生命周期

官网上说的很清楚，略过。

3.vue生成的页面和html生成的页面有什么区别？

4.谈一谈vue事件监听

https://www.cnblogs.com/mrsdong/p/12144375.html

5. vue双向绑定的原理

6.vue路由守卫

7.vue组件封装（如何去封装一个组件）

三、其他问题

1.谈一谈你对前端工程化的理解。

2.es6你用过哪些特性。

3.谈一谈你对promise的了解。

4.webpack 如何消除打印日志。

drop_console: true

5.用过可视化吗？谈谈你对可视化的了解。（echarts和d3还有动画问的比较多）

6.知道节流和防抖吗？

函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

7. forEach 和 map区别是什么？

8. 聊一聊Set和Map结构

四、笔试题

1.css垂直居中的几种方法

2.position的值有几种？有什么区别。

3.盒模型。

4.post 和 get 区别

5. cookie,localStorage,SessionStorage的区别。

6.谈谈你对事件发生顺序的理解？

https://blog.csdn.net/moguzhale/article/details/53503044

非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡。

7.类组件和函数组件的区别(react)

8.封装一个deepclone函数

//深浅拷贝
function deepClone(obj) {
    // 代码写这里
    var _toString = Object.prototype.toString;
    
        var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
        };
        
    let str =  map[_toString.call(obj)];
    let arr = [];
    let o = {};
    if(str === 'array'){
      for(var i of obj){
        arr.push(deepClone(obj[i]));
      }
      return arr;

    }else if(str === 'object'){
       for(var i in obj){
           o[i] = deepClone(obj[i]);
       }
       return o;
    }else{
       return obj
    }
}
// let result1 = deepClone('qiu')
// console.log(result1);

function A() {
    this.a = a;
}

var a = {
    name: 'qiu',
    birth: new Date(),
    pattern: /qiu/gim,
    container: document.body,
    hobbys: ['book', new Date(), /aaa/gim, 111]
};

var c = new A();
var b = deepClone(c);
console.log(c.a === b.a);
console.log(c, b);

 

9.实现一个函数，可以将数组转化为树状数据结构，要求程序员具有侦查错误输入的能力。

//树状结构
const list = [
    {
        "id":19,
        "patentId":0,
    },
    {
        "id":18,
        "parentId":16,
    },
    {
        "id":17,
        "parentId":16,
    },
    {
        "id":16,
        "parentId":0,
    }
];
function convert(arr,parentKey,currentId,rootValue){
   let tree = {
       id:rootValue,
       children:[],
   };
   let newTree = [];
   if(!Array.isArray(list)){
       return newTree;
   }
   let mapTree = {};
   arr.forEach(item=>{
       if(item.children){
           delete item.children;
       }
       mapTree[item.id] = item;
      
   })  
   arr.forEach(item=>{  
    let parent = mapTree[item.parentId];
    console.log(parent)
    if(parent){
     (parent.children || (parent.children = [])).push(item);
    }else{
     newTree.push(item);
    }
   
})  
   tree.id = rootValue;
   tree.children.push(newTree);
   return tree
}
 
let result = convert(list,'parentId','id',0);
console.log(result);

10.使用vue 或 react实现一个Tab组件，考虑扩展性。

11.谈谈你对状态管理的理解。（vuex和 redux）

12.hook有没有听说过，用来做什么？