web 前端开发工程师，面试题详解（二）

1、浅拷贝和深拷贝

浅拷贝：浅拷贝只是拷贝一层，更深层次级别的只拷贝引用（或者说地址）。es6中应用浅拷贝的是Object.assign(target,source1,souce2)，浅拷贝改变深层次的属性值，原对象也会改变；

深拷贝：深拷贝拷贝多层，每一级别的数据都会拷贝；深拷贝改变深层次的属性值，原对象不会改变；

var obj = {
    id:'1',
    name:'andy',
    msg:{
        age:18
    },
    color:['pink','red']
};

var o={};

function deepCopy(newobj,oldobj){
   for(var k in oldobj){
      // 1.获取属性值 oldobj[k]
      var item=oldobj[k];
      // 2.判断这个值是否是数组
      if(item instanceof Array){
         newobj[k]=[];
         deepCopy(newobj[k],item);
      }else if(item instanceof Object){
        // 3.判断这个值是不是对象
         newobj[k]={};
         deepCopy(newobj[k],item);
      }else{
        // 4.简单数据类型
        newobj[k]=item;
      }

   }
}

deepCopy(o,obj);
console.log(o);
o.msg.age='20';
console.log(obj);

2、this指向

(1)普通函数 this 指向 window;

(2)对象的方法 this 指向对象；

(3)构造函数 this 指向 new 实例对象；原型对象的 this 指向的也是 new 实例对象；

(4)绑定事件函数 this 指向的是函数的调用者；

var btn = document.querySelector('button');
btn.onclick = function (){
  console.log(this);      // btn 这个按钮对象
}

(5)定时器函数 this 指向 window;

setTimeout(function(){
  console.log(this);
},1000)

(6)立即执行函数 this 指向 window;

总结： 普通函数：指向调用者；

            箭头函数：箭头函数没有 this ,指向函数定义位置上下文的 this;

var obj={
  age: 20,
  say:()=>{
   console.log(this);   // window
   console.log(this.age);  // undefined
  }

}

3、async 特点：

1. await 只能放到 async 函数中；
2. 相比 generator 语义化更强；
3. await 后面可以是 promise 对象，也可以是数字、字符串、布尔；
4. async 函数返回是一个 promise 对象；
5. 只要 await 语句后面 promise 状态变更 reject，那么整个 async 函数会中断执行；

4、如何解决 async 函数中抛出错误，影响后续代码的问题：

1. try{  } catch(error){}    
2. promise 本身catch((error)=>{})

5、flat 方法：

      出自 es10 ，将多维数组转化为低位数组；

flat：

const arr = [1,2,3,4,[5,6]];
console.log(arr.flat());  // 转为低位数组

const arr = [1,2,3,4,[5,6,[7,8]]];
console.log(arr.flat());   // [1,2,3,4,5,6,[7,8]]
console.log(arr.flat(2));  // [1,2,3,4,5,6,7,8]

arr.flat(2); 参数为深度，三维数组转化成一维数组，深度为2

flatMap：

const arr = [1,2,3];
const result=arr.flatMap((item)=>[item * 10]);
console.log(result);    // [10,20,30] 相当于 flat 和 Map

6、Object.fromEntries()（es10）和Object.entries()：

Object.fromEntries([

  ['name' , '张三']，

  ['study' , 'java , php，前端']

]);       // {name:'张三', study:'java,php，前端'}     将二维数组转换为对象


Object.entries({name:'张三'})  // [['name','张三']]  将对象转换成二维数组

7、渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

8、Javascript 的事件代理，ul中的无数个li添加点击事件

“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。   e.target.tagName值

   var ul = document.querySelector("ul");
   ul.onclick = function (e) {
  e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
  var target = e.target || e.srcElement;
  console.log(target.tagName);
  if (target.tagName.toLowerCase() === "li") {
    var li = this.querySelectorAll("li");
    index = Array.prototype.indexOf.call(li, target);
    //console.log(target.innerHTML);
  }
}