熱乎的前端筆試/面試/跳坑筆記（指南)

寫在前面的話

本人不是高手，也是小白一隻。在學習的過程當中，老是反覆的遺忘、記憶、練習、遺忘..所以決定把走過的坑，以及經歷的筆試開始慢慢的總結，會不斷的更新和添加，原文地址在github，以爲不錯的小夥伴，記得給個star哦，共同進步~~

更新地址：傳送門

前端面試&筆試&錯題指南

Css相關

1. display:none與visibility:hidden的區別（2018拼多多前端筆試真題)

答案：在視覺效果上，二者是相同的，可是對於操做dom上是不一樣的 。 dispaly:none 會讓dom的整個寬、高等相關位置元素失效，整個消失； visibility:hidden 只是讓該元素不可見，可是width以及原有位置是不會改變的

javascript

1. 基本問題

1) 是否可使用 typeof bar === 'object'來檢測bar是否是object類型，有和風險？

答案： 有風險，js的基本數據類型有 String Number Boolean undefined null和一種複雜數據類型object(ES6新增了symbol)。

對於複雜數據類型object，其實typeof null返回的也是object，由於本質上null就是一個佔位用的對象。另外一方面，數組Array也不能用typeof檢測數據類型，由於一樣會返回object。

所以，若是想要檢測bar是否是object，能夠這樣子：

console.log((bar !== null) && (tiopnuiop[yuiop[]\\]poi456/ypeof bar ==='object'))
    //固然，若是認爲function也是 object，能夠用下面的語句
    console.log((bar !== nul)&& (typeof bar ==='object')||(typeof bar ==='function'))
複製代碼

除此之外，還有好比Array的狀況，由於Array也會返回object，若是咱們不像讓Array被認爲是Object，就必須真正的認清Array，人情Array的方法有：

console.log( bar instanceof Array)  // 若是數組，返回true
 console.log( Array.isArray(bar))  //ES5方法
 console.log( Ojbect.prototype.toString.call(arr) === '[object Array]') 
複製代碼

2) 如下兩個函數是否等價

function foo1() {
  return {
      bar: "hello"
  };
}

function foo2() {
  return
  {
      bar: "hello"
  };
}
複製代碼

答案： 不等價！！ 注意，第二個函數返回的是undefined

console.log(foo1()); // {bar : "hellp"}
console.log(foo2()); // undefined
複製代碼

這也是爲何函數返回對象時，或寫大括號時，把{寫在一邊，由於第二個函數js會默認return後面返回的東西(是空),等價於

return undefined
{xxx}
//後面固然，固然是寫了也白寫
複製代碼

3) NaN是什麼?它是什麼類型？如何檢測一個變量是否是NaN？

答案： NaN即Not A Number，但實際上它是Number類型 typeof NaN 將會返回Number。 這個東西比較厲害，由於

NaN === NaN  //false
複製代碼

你會發現，它本身都不等於它本身，所以判斷變量是不是它，不能使用===。 可使用isNaN方法

//檢查變量是不是nan
isNaN(bar);
Object.is(bar,NaN); //ES6方法，這個方法會修正JS中的一些小bug
複製代碼

Object.is()方法，要求嚴格相等，且Object.is(NaN,NaN)會返回true

2.做用域相關問題

如下程序的輸出是什麼:

(function(){
  var a = b = 3;
})();
console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));
複製代碼

答案： a defined? false
b defined? true
理解這道題的核心在於如何理解var a = b = 3這句話，實際上這句話等於

var a; 
b = 3;
複製代碼

這樣子，實際上，b是聲明在了全局變量中(編譯器在預編譯幫你聲明瞭，然而在嚴格模式下是不行的) a是局部變量，因此在函數以外是沒有定義的。

3.this&對象&數組

1)下面程序輸出是什麼

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func: this.foo = " + this.foo);
        console.log("outer func: self.foo = " + self.foo);
        (function() {
            console.log(this);
            console.log("inner func: this.foo = " + this.foo);
            console.log("inner func: self.foo = " + self.foo);
        }());
    }
};
myObject.func();


//答案
outer func: this.foo = bar
outer func: serl.foo = bar
inner func: this.foo = undefined
inner func: self.foo = bar
複製代碼

分析： 搞清楚this的指向。記住如下幾種規則

• 誰調用，this指向誰 xxx.fun()
• new一個對象，this指向實例自己var c = new fun()
• 使用call/apply/bind修改this指向。

看題目，outer func顯然是第一種狀況，誰調用，this指向誰，這個時候都是myOjbect。 而在當即執行函數中，在這裏this是沒有進行綁定指向的，天然從屬於window，因此這裏this.foo是undefied

補充關於箭頭函數的this

function a() {
    return () => {
        return () => {
        	console.log(this)
        }
    }
}
console.log(a()()())
複製代碼

注意：箭頭函數實際上是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this。在這個例子中，由於調用 a 符合前面代碼中的第一個狀況，因此 this 是 window。而且 this 一旦綁定了上下文，就不會被任何代碼改變。

2)數組的filter，如下輸出結果是什麼(2018拼多多前端原題)

var arr = [1,2,3];
arr[10] = 9;
arr.filter((item)=> {
    return item === undefined?
})

//答案
[]
複製代碼

解析： 是的，答案的確是[]，不是[undefined x 7]。 首先，看下前兩句執行後，arr是什麼

console.log(arr)
//[1,2,3, emptyx7, 9]
console.log(arr[5])
//undefined
複製代碼

從上面結果能夠看出，的確中間未定義的(顯示爲empty的是undefined)。那麼，filter以後，不是應該返回爲undefined的數據嗎？

是的，可是，當數組中都是undefined時，數組就是空，或者說[empty x 7] === []

根據評論小哥哥眷你和異次元的廢D，這裏對解釋進行一下更新。實際上empty和undefined是不同的哦。 引用自國外技術論壇的一段解釋以下：

a) It will not crash. The JavaScript engine will make array slots 3 through 9 be 「empty slots.」

b) Here, a[6] will output undefined, but the slot still remains empty rather than filled with undefined. This may be an important nuance in some cases. For example, when using map(), empty slots will remain empty in map()’s output, but undefined slots will be remapped using the function passed to it:

var b = [undefined];
b[2] = 1;
console.log(b);             // (3) [undefined, empty × 1, 1]
console.log(b.map(e => 7)); // (3) [7,         empty × 1, 7]
複製代碼

翻譯過來就是說，undefined和數組保留的empty插槽並非等同的，即便咱們打印出相應的數據會顯示undefined，可是與js的undefined是不一樣的，除了arr.filter，包括arr.map()函數都是會保留empty插槽的。

4. JS小數計算不許確的bug

如下代碼返回值是什麼

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

//答案: 0.30000000000000004
        false
複製代碼

解析： 詳細的解析見鏈接,這裏說一下解決辦法 0.1+0.2 != 0.3

//解決辦法
parseFloat((0.1+0.2).toFixed(10));
複製代碼

5. 算法/思路相關

1) 討論實現判斷變量是不是整數的函數isInter(x)的實現

答案： 在ES6中，是有現成的方法Number.isInteger可使用的。若是本身實現，思路是什麼呢

//1 異或運算
function isInter(x) {
    return x ^ 0 === x
}

//2 取整
return Math.round(x) === x  //一樣能夠用floor ceil

//取餘
return (typeof x === 'number')&&(x % 1 === 0)
複製代碼

2) 寫一個sum方法，能夠實現如下兩種調用方式

console.log(sum(2,3)) //5
console.log(sum(2)(3)) //5
複製代碼

答案：

//方法1
var sum = function(x,y) {
    if(y === undefined) {
        return function(y) {
            return x + y;
        }
    }else {
        return x + y;
    }
}

//方法2
var sum = function(x){
    if( arguments.length === 1) {
        return function (y) {
            return x + y;
        }
    } else {
        console.log('here');
        return arguments[0] + arguments[1];
    }
}
複製代碼

3） 使用遞歸的方法，將obj變爲obj2的格式(拼多多2018前端筆試真題)

obj = [
    {id:1,parent:null},
    {id:2,parent:1},
    {id:3,parent:2}
]

obj2 = {
    obj:{
        id: 1,
        parent: null,
        child: {
            id: 2,
            parent: 1,
            child: {
                id: ,3,
                parent: 2
            }
        }
    }
}
複製代碼

這一題答案留給小夥伴們思考啦，由於筆者在考試時沒有寫出很漂亮的程序，就等以後整理後再貼上來，歡迎小夥伴評論區討論