前端面試題及答案 - JS篇

這篇文章並非最全的前端面試題（沒有最全，只有更全），只是針對本身面試過程當中遇到的一些難題、容易忽略的題作一個簡單的筆記，方便後面有面試須要的小夥伴們借鑑，後續內容會不定時更新，有錯誤之處但願你們不吝指出。

一、JS延遲加載的方式有哪些？

• defer和async
• 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
• 按需異步載入js

二、前端跨域解決方案詳情

三、如何實現淺拷貝和深拷貝

1. 淺拷貝：

• 直接經過=賦值

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

1. 深拷貝

• 簡單的經過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

四、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([]);
})

五、js中使用new操做符具體作了哪些事情？

let obj = new Base();

建立了一個空對象obj;

let obj = {};

空對象obj的__proto__屬性指向構造函數Base的prototype屬性；

obj.__proto__ = Base.prototype;

執行構造函數，將Base的this指向obj;

Base.call(obj);

• 前端面試題及答案 - 瀏覽器篇
• 前端面試題及答案 - HTML篇
• 前端面試題及答案 - CSS篇
• 前端面試題及答案 - 性能優化篇