前端面试题 - 掘金

重写数组的reduce方法

Array.prototype.myReduce = function (fn, initValue) {
  var arr = this,
      len = arr.length,
      args = arguments[2] || window, // 这里在原始的reduce方法上新增的一个参数 
      作用是可以改变回调内部的this指向，不传的话默认指向window。
      item;
  for(var i = 0; i < len; i++) {
    item = arr[i];
    initValue = fn.apply(args, [initValue, item, i, arr]);
  }
  return initValue;
}

对象的深拷贝

var person = {
  name: 'jerome',
  age: 22,
  hobby: ['rap', 'game', 'travel'],
  preference: {
    accent: 'British accent'
  }
}

function deepClone (origin, target) {
  var tar = target || {},
      toStr = {}.toString,
      type = '[object Array]';
  
  for(var key in origin) {
    if(origin.hasOwnProperty(key)){
      if(typeof origin[key] === 'object' && origin[key] !== 'null'){
        tar[key] = toStr.call(origin[key]) === type ? [] : {};
        deepClone(origin[key], tar[key]);
      }else{
        tar[key] = origin[key];
      }
    }
  }

  return tar;
}

var person1 = deepClone(person);
person1.preference.accent = 'American accent';
console.log(person1, person);

异步 promise

const promise = new Promise((resolve, reject) => {
  console.log(1);  
  resolve();  
  console.log(2);
})
promise.then(() => {  
  console.log(3);
})
console.log(4);
// 1 2 4 3

Promise的executor函数，在new创建promise实例时会被立即调用，所以 1 和 2 依次打印，然后resolve()将Promise的状态由pending ->Fulfilled，之后会调用成功的回调函数。.then执行成功的回调函数，会被放到微任务的事件队列中，等待主线程空闲后在执行。然后打印 4，主线程空闲，将微任务队列中的任务推进主线程中执行，所以最后打印 3。

const promise = new Promise((resolve, reject) => {
  console.log(1);  
  resolve();  
  setTimeout(() => {
    console.log(2);  
  });
})
.then(() => {
  console.log(3);
})
console.log(4);
// 1 4 3 2

这里的和上述情况差不多，就是一个计时器 2 最后打印的区别。因为JS 异步代码中，分为宏任务与微任务，他们分别有自己的任务队列，这里就存在一个优先级的问题，当主线程空闲时间，会先检查微任务队列，然后再走宏任务队列。而计时器就属于宏任务，所以最后打印。

for in 与 for of 的区别

for in 遍历的是索引（键名），for of 遍历的是值

for in 可以遍历对象，且可遍历自身及原型上可枚举的属性

for of 只能遍历具有迭代器接口的数据，如果想遍历对象可以使用Object.keys()将对象的键名生成一个数组

for in不会遍历空数组，稀松数组会跳过空位。

结构赋值

// 一条解构与一个条打印语句 打印出12121234
const obj = {  
  a: {    
    b: 1,    
    c: 2,    
    d: { 
      e: 1, 
      f: 2, 
      g: [1, 2, 3, 4]
    }  
  }
};

const {b, c, d: {e, f, g: [h, i, j, k]}} = obj.a
console.log(b, c, e, f, h, i, j, k);