这篇文章并不是最全的前端面试题(没有最全,只有更全),只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记,方便后面有面试需要的小伙伴们借鉴,后续内容会不定时更新,有错误之处希望大家不吝指出。
1、JS延迟加载的方式有哪些?
- defer和async
- 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
- 按需异步载入js
2、前端跨域解决方案详情
3、如何实现浅拷贝和深拷贝
- 浅拷贝:
- 直接通过=赋值
let data = {n: 1};
let cloneData = data;
cloneData.n = 2;
console.log(data.n) // 2
- 如果obj对象有多个层级,可以通过Object.assign()
let data = {name: {firstName: 'lsh'}};
let cloneData = Object.assign({}, data);
cloneData.name.firstName = 'lx';
console.log(data.name.firstName) // lx
- 深拷贝
- 简单的通过JSON.parse(JSON.stringify(data))
- 通过lodash.js
let cloneData = lodash.cloneDeep(data);
- 如果obj对象只有一级,可以用Object.assign();
let data = {name: 'lsh'};
let cloneData = Object.assign({}, data);
cloneData.name = 'lx';
console.log(data.name); // lsh
- 递归
function cloneDeep(data) {
if (!data || typeof data != "object") {
return data;
}
let obj = data.constructor === Array ? [] : {};
for (let i in data) {
obj[i] = typeof data[i] === 'object' ? cloneDeep(data[i]) : data[i]
}
return obj;
}
- 通过Object.create()方法
let data = {n: 1};
let cloneData = Object.create(data);
console.log(cloneData); // {}
console.log(cloneData.n); // 1
console.log(cloneData.__proto__); // {n: 1}
- 通过$.extend()方法
let data = {t: 1};
let cloneData = $.extend(true, {}, data, {t: 2});
cloneData.t = 3;
console.log(data.t) // 1
4、AMD、CMD、CommonJS之间区别
CommonJS:同步加载。必须等clock.js加载完成后才能调用start();
const clock = reqiure('clock');
clock.start();
AMD(require.js):异步加载模块 => 依赖前置,提前执行。先定义依赖,加载完成后在回调函数中执行。
require(['clock', 'lodash'], function(clock, lodash)) {
clock.start();
lodash.uniq();
}
CMD(sea.js):异步加载模块 => 依赖就近,延迟执行。
define(function(reqiure, exports, module) {
var clock = require('clock');
clock.start();
var lodash = require('lodash');
lodash.uniq([]);
})
5、js中使用new操作符具体做了哪些事情?
let obj = new Base();
创建了一个空对象obj;
let obj = {};
空对象obj的__proto__属性指向构造函数Base的prototype属性;
obj.__proto__ = Base.prototype;
执行构造函数,将Base的this指向obj;
Base.call(obj);