前端面試題（附答案）

時間 2019-11-30

標籤端面試題答案简体版

原文原文鏈接

一、使用至少兩種方法，實現以下佈局（box垂直居中於父元素，寬高不固定）？

第一種：css

<style> .container { display: table; } .inner { display: table-cell; vertical-align:middle; text-align:center; } </style>
<div class="container">
  <div class="inner">
  you own content
  </div>
</div>
複製代碼

第二種：html

<style> .container { position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
<div class="container">
  <div class="inner">
    your own content
  </div>
</div>
複製代碼

第三種：前端

<style> .container{ text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; } </style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>
複製代碼

二、px、em、rem有什麼區別？

px 表示「絕對尺寸」（並不是真正的絕對），實際上就是css中定義的像素（此像素與設備的物理像素有必定的區別，後續詳細說明見文末說明1），利用 px 設置字體大小及元素寬高等比較穩定和精確。
em表示相對尺寸，其相對於當前對象內文本的 font-size（若是當前對象內文本的 font-size 計量單位也是em，則當前對象內文本的 font-size 的參考對象爲父元素文本 font-size）。
rem 也表示相對尺寸，其參考對象爲根元素<html> 的 font-size，所以只須要肯定這一個 font-size。

三、position有幾種取值，每種取值相對於誰來進行定位？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

四、JavaScript的數據類型有哪些？

七種數據類型：Undefined、Null、Boolean、Number、String、Symbol、Object

五、用new運算符建立一個實例時，經歷了哪些步驟？

例子🌰：java

function create() {
    // 建立一個空的對象
    let obj = new Object()
    // 得到構造函數
    let Con = [].shift.call(arguments)
    // 連接到原型
    obj.__proto__ = Con.prototype
    // 綁定 this，執行構造函數
    let result = Con.apply(obj, arguments)
    // 確保 new 出來的是個對象
    return typeof result === 'object' ? result : obj
}
複製代碼

建立一個新對象
將構造函數的做用域賦給新對象（所以this就指向了這個新對象）
執行構造函數中的代碼（爲這個新對象添加屬性）
返回新對象

六、下面這段代碼返回值是什麼？

var scope = 'global scope';
function checkScope() {
    var scope = 'local scope';
    function f() {
        return scope;
    }
    return f;
}
checkScope()(); // local scope
複製代碼

七、用什麼方法能夠得到對象的類？寫出代碼

Object.prototype.toString.call(對象)
typeof: typeof 對象或者 typeof(對象)

八、call()、apply()、bind()方法的做用是什麼？何時會使用到這些方法？他們之間的區別是什麼？

javaScript權威指南上的解釋是： call() 、apply()能夠看做是某個對象的方法，經過調用方法的形式來間接調用函數。bind() 就是將某個函數綁定到某個對象上。node

關於call() 和 apply() 在犀牛書上的解釋可能比較生澀難懂，個人理解就是，它們的做用是：讓函數在某個指定的對象下執行。正則表達式

var obj = {x: 1}

function foo() {console.log(this.x)}

foo.call(obj) // 打印結果：1
複製代碼

call() 和apply()的第一個參數相同，就是指定的對象。這個對象就是該函數的執行上下文。後端

call()和apply()的區別就在於，二者之間的參數。數組

call()在第一個參數以後的後續全部參數就是傳入該函數的值。apply() 只有兩個參數，第一個是對象，第二個是數組，這個數組就是該函數的參數。promise

var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.call(obj, 1, 2, 3) // 打印結果：2;
複製代碼

var obj = {};
 
function foo(a, b, c) {
  console.log(b);
}
 
foo.apply(obj, [1, 2, 3]) // 打印結果：2;
複製代碼

bind() 方法和前二者不一樣在於： bind() 方法會返回執行上下文被改變的函數而不會當即執行，而前二者是直接執行該函數。他的參數和call()相同。瀏覽器

這三個方法的做用都是改變函數的執行上下文！

九、利用正則表達式，寫一個字符串轉換成駝峯的方法。

function stringToCamelCase(str){
    var reg=/-(\w)/g; //子項()表示子項
    return str.replace(reg,function($0, $1){ 
        // $0表明正則總體，replace（）方法中的第二個參數如果回調函數，那麼這個回調函數中的參數就是匹配成功後的結果
        // 若回調函數中有多個參數時，第一個參數表明整個正則匹配結果，第二個參數表明第一個子項
        alert($0); // -b
        alert($1); // b
        return $1.toUpperCase();
    });
}
複製代碼

十、以下代碼，控制檯會輸出什麼內容？

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success');
    }, 1000);
})

const promise2 = promise1.then(() => {
    throw new Error('error~~~');
});

console.log('promise1', promise1);
console.log('promise2', promise2);

setTimeout(() => {
    console.log('promise1', promise1);
    console.log('promise2', promise2);
}, 2000);
複製代碼

promise1 Promise {} promise2 Promise {} promise1 Promise {: "success"} Promise {: Error: error~~~at promise1.then (:8:11)}

十一、CommonJS、AMD、CMD的區別？

CommonJS

CommonJS 是以在瀏覽器環境以外構建 JavaScript 生態系統爲目標而產生的項目，好比在服務器和桌面環境中，Node.JS遵循CommonJS的規範 CommonJS 規範是爲了解決 JavaScript 的做用域問題而定義的模塊形式，可使每一個模塊它自身的命名空間中執行。該規範的主要內容是，模塊必須經過 module.exports 導出對外的變量或接口，經過 require() 來導入其餘模塊的輸出到當前模塊做用域中。

var clock = require('clock');
clock.start();
複製代碼

CommonJS 是同步加載模塊

AMD

基於CommonJS規範的nodeJS出來之後，服務端的模塊概念已經造成，很天然地，你們就想要客戶端模塊。並且最好二者可以兼容，一個模塊不用修改，在服務器和瀏覽器均可以運行。可是，因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。若是將上面的代碼運行在客戶端瀏覽器，就會報錯。

上面的require方法是同步的。這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。

所以，瀏覽器端的模塊，不能採用"同步加載"，只能採用"異步加載"。這就是AMD規範誕生的背景。

CommonJS是主要爲了JS在後端的表現制定的，他是不適合前端的，AMD出現了，它就主要爲前端JS的表現制定規範。

AMD是Asynchronous Module Definition的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。 AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：

require([module], callback);

require(['clock'],function(clock){
  clock.start();
});
複製代碼

requireJs就是AMD規範的實現

CMD

CMD (Common Module Definition), 是seajs推崇的規範，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});
複製代碼

AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，而不是加載的時機或者方式不一樣，兩者皆爲異步加載模塊。

AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載；而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊

十二、MVC、MVP、MVVM的區別？

MVC：

View接受用戶的交互請求
View將請求轉交給Controller
Controller操做Model進行數據更新
數據更新以後，Model通知View數據變化
View顯示更新以後的數據

MVP：

各部分之間的通訊，都是雙向的。
View 與 Model 不發生聯繫，都經過 Presenter 傳遞。
View 很是薄，不部署任何業務邏輯，稱爲被動視圖，Presenter 很是厚，全部邏輯都部署在那裏。

MVVM：

各部分之間的通訊，都是雙向的。
View 與 Model 不發生聯繫，都經過 ViewModel 傳遞。
View 很是薄，不部署任何業務邏輯，稱爲 ViewModel 很是厚，全部邏輯都部署在那裏。

惟一的區別是，它採用雙向數據綁定，(data-binding) ： View 的變更。自動反映在 ViewModel, 反之亦然。 Angular 和 Ember 都採用這種模式

1三、簡述v-if和v-show的區別？

v-if 是銷燬刪除節點、而且渲染時不會渲染 v-show是顯示隱藏節點、至關於display:none

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。