前端面試遇到的問題

最近一場面試，發現了本身不少的問題，爲此作個總結。很是感謝這次的面試。嘿嘿!

1、閉包中的問題

下列代碼存在幾個變量沒有被回收？

var i = 0;
var i = 1;
var add = function () {
    var i = 3;
    return function () {
        i++;
        console.log(i);
    }
}();
add();

答案是3個。第一個：全局變量i；第二個：函數變量add；第三個：局部變量i；

首先先分析前兩行代碼

var i = 0;
var i = 1;

這兩行代碼，先用var聲明一個變量i而後賦值，接着再次使用var聲明同一個變量順帶賦值。畢竟var是能夠從新聲明同一個變量的。
在這裏有個知識點須要瞭解。全局變量只有在頁面關閉的時候纔會銷燬。
因此以上兩行代碼運行後，只有一個變量沒有被銷燬。

接下來看一下這個

function test() {
    var i = 5;
    console.log(i);
}
test();

分析：首先定義了一個函數test，裏面有個變量x，賦值3，而後打印。很簡單。接着運行這個函數，即是函數式編程思想的體現。
這裏的知識點是:函數裏面的局部變量，當函數運行後，裏面的變量會被銷燬。

接下來再看看這個

var test = function() {
    var x = 3;
    return function () {
        x++;
        console.log(x);
    }
}();
test();//4
test();//5

分析：在這裏使用了閉包。結合這篇完全搞懂JavaScript的閉包、防抖跟節流，應該便可以完全理解傳說中的閉包了。
這裏的知識點就是：使用閉包後，函數裏面的局部變量在函數運行後，不會被銷燬。暫時存放在全局變量中。
因此以上的變量x在test運行後不會被銷燬。

再看看這個

var test = function() {
    var x = 3;
    return function () {
        x++;
        console.log(x);
    }
}
test()();//4
test()();//4

這個要跟上個區分一下，這裏雖然使用了閉包，但並無暫存到全局變量裏，因此沒有發揮出閉包的做用。

2、如何檢測一個數組

一、最簡單，ES5提供了一個方法。

var a = [];
console.log(Array.isArray(a));//true

二、instanceof

var a = [];
console.log(a instanceof Array);//true

只不過這裏有個弊端：必需要在同一個全局執行環境，所以ES5新增了Array.isArray()方法。
三、Object.prototype.toString.call()方法

var a = [];
console.log(Object.prototype.toString.call(a));//[object Array]

拓展一下：
JavaScript中的基本數據類型：Number，String，Boolean，Undefined，Null，Object(數組，日期等)，Symbol。

var a = 123;
var b = "123";
var c = false;
var d = undefined;
var e = null;
var f = [];
var g = Symbol();
function h() { };
var j;

console.log(typeof a);//"number"
console.log(typeof b);//"string"
console.log(typeof c);//"boolean"
console.log(typeof d);//"undefined"
console.log(typeof e);//"object"
console.log(typeof f);//"object"  使用typeof檢測數組是有問題的
console.log(typeof g);//"symbol"
console.log(typeof h);//"function"
console.log(typeof j);//"undefined"

3、CSS中的BFC規範

BFC全稱：block formmating context，直譯爲」塊級格式化上下文」。我仍是第一次聽到這個。
既然不知道，那隻好本身去搜索一下嘍。
BFC規範：

詳情就很少說了，請看博客：CSS-BFC的概念及其做用

4、圖片底部留白的問題

這個，我仍是第一次注意到這個問題。
先看究竟是什麼問題？

<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1730713693,2130926401&fm=26&gp=0.jpg" />圖片配置的文字

就這麼一行代碼

仔細看看，的確有這麼個問題：
圖片的底部跟文字的底部不在一塊兒。

查看一下元素，發現圖片並無設置相應的margin或者padding。
這是爲啥？
查了一下，才發現圖片默認的是display:inline;
圖片是行內元素。行內元素有個vertical-align屬性，這個屬性默認值是：baseline,將其設置爲bottom便可。

4、eval函數

eval(1+1);//2
eval("1+1");//2
eval("eval("console.log(45)");//45

eval函數能夠執行裏面的代碼。

總結

面試完後，發現本身還挺享受面試的過程的，居然還挺陶醉的。收穫頗多
面試官隨和一點，就像聊家常同樣（否則很受拘束，會難受的），以問答形式便可，達到那種一針見血的效果。簡單、直接、粗暴。