前端常见的面试手写代码

web 前端工程师在面试时，常常会被要去现场手写/机写代码。涉及的内容包括常用的排序算法、查找算法；JavaScript 语言中常用的几种编程技巧，例如函数防抖、节流、深拷贝、浅拷贝等。

数组与对象的深拷贝

深拷贝与浅拷贝的区别在于复制成员的层数，浅拷贝是对输入数组/对象的简单遍历，而没有考虑到输入的数组/对象成员的类型，当它是对象或数组时，单层的便利可以无法复制深层的组成成员，因此需要进行深拷贝，知道遍历的成员再无子成员，类似于二叉树的遍历到叶子节点。

数组

// a array deepCopy demo
var res = [];
function deepCopy(arr) {
  arr.forEach( ele => {
    if(Array.isArray(ele)) {
      deepCopy(ele);
    }else {
      res.push(ele);
    }
  });
  return res;
}

var demoArr = [1,2,3,[3,4,5,[5,6,7]],9];
console.log(deepCopy(demoArr));
// [1, 2, 3, 3, 4, 5, 5, 6, 7, 9]

简单的递归算法，判断当前子节点是不是数组，如果是数组调用自身，对子节点再次进行遍历；如果不是，直接存入结果数组res中。

类似的还有对一个对象的深拷贝：

// a object deepCopy demo
var res = {};

function objDeepCopy (obj) {
  for(var ele in obj ) {
    if(typeof ele === 'object') objDeepCopy(ele);
    else {
      res[ele] = obj[ele];
    }
  }
  return res;
}

var demoObj = {
  name: 'fejavu',
  age: 23,
  hobby: {
    hobby1: 'book',
    hobby2: 'movie'
  }
};

console.log(objDeepCopy(demoObj));
/*
[object Object] {
  age: 23,
  hobby: [object Object] {
    hobby1: "book",
    hobby2: "movie"
  },
  name: "fejavu"
}
*/

判断子节点是不是对象，是则调用自身进行深层遍历，否则直接存入结果对象中。

JavaScript 有许多奇技淫巧，或者说是语言本身的语法糖。在日常的对 JSON 数据的处理中，就涉及到类似把数组/对象拍平（深拷贝），因此深拷贝可以说是已经集成在语言的常用函数本身：

var demoObj = {
  name: 'fejavu',
  age: 23,
  hobby: {
    hobby1: 'book',
    hobby2: 'movie'
  }
};
var demoArr = [1,2,3,[3,4,5,[5,6,7]],9];

console.log(JSON.parse(JSON.stringify(demoObj)));
console.log(JSON.parse(JSON.stringify(demoArr)));

实现一个instanceOf函数

主要思路是检验需校验的原型是否在实例的原型链上，如果是则返回true，否则返回false。

function instanceOf(instan, proto) {
  let _instanProto = instan.__proto__;
  
  if(_instanProto && _instanProto === proto.prototype) {
    return true;
  }else {
    return instanceOf(_instanProto, proto);
  }
  
  return false;
}

let arr = 'new Array()';
console.log(instanceOf(arr, Object));  // true