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