1. 程式人生 > >攻破javascript面試的完美指南【譯】

攻破javascript面試的完美指南【譯】

攻破javascript面試的完美指南(開發者視角)

0. 前言

本文適合有一定js基礎的前端開發人員閱讀。原文是我google時無意發現的, 被一些知識點清晰的解析所打動, 決定翻譯並記錄下來。這個過程斷續進行了兩個月, 期間工作遇到的部分疑問也在文中找到了答案。這篇好的文章值得被推薦。

說明:因為外網的緣故, 原文中的一些視訊連線並沒有貼出。部分採用意譯, 示例程式碼有少許差別。由於英文水平有限, 歡迎指出錯誤和批評。

為了向你說明js面試的複雜性, 嘗試給出程式碼段的輸出。

console.log(2.0 == '2' == new Boolean(true) == '1')
// true

十有八九的會給出false, 其實執行結果是true。

JavaScript是難的。 如果太聰明面試問類似問題, 我們也無可奈何。 但是什麼是我們應該準備的呢?深入學習這十一個基本知識點,有助於你的JS面試。

1.熟悉js函式

function 是JavaScript的精髓。不同於其他語言, 在js中, 一個函式可以分配成一個變數, 作為引數傳遞給其他函式也可以作為其他函式的返回值。

console.log(square1(5));
/* ... */
function square1(n) { return n * n; }
// 25

console.log(square2(5)); 
var square2 = function(n) { 
  return n * n; 
}
// square2 is not a function

JS中, 如果你把函式定義為變數, 變數的名字會被提升, 但是JS執行到它的定義才能被訪問。

你可能在一些程式碼中頻繁的見到如下程式碼。

var simpleLibrary = function() {
   var simpleLibrary = {
        a: 0,
        b: 0,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

一個函式變數中變數和函式被分裝, 可以避免全域性變數汙染。 從JQuery到Lodash的庫採用這用技術提供$、_等

2.熟悉bind、apply和call

你可能在所有常用庫中看到過這三個函式。它們允許區域性套用, 我們可以把功能組合到不同的函式。一個優秀的js開發者可以隨時告訴你關於這三個函式。

首先, 這些都是函式的原型方法去改變行為來實現一些功能。依據JS開發者Chad, 用途描述如下:

當你想要函式在特定上下文中呼叫,使用.bind(), 很適用於事件。
當你期望立即呼叫函式並修改上下文, 使用.call()或.apply()

一個應急呼叫例項

解釋一下上述描述。假設你的數學老師要求你建立一個庫並提交。你寫了一個可以計算圓周長和麵積的抽象庫。

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    },
}

你把函式庫提交給老師。現在是時間提交被稱為計算庫的程式碼。

mathLib.area(2) // 12.56

當你提交第二個程式碼例項時, 你發現指南中老師要求你常量pi精確到小數點後5位數。你使用的是3.14, 不是3.14159。現在由於最後期限已過你沒有機會提交庫。 JS call函式可以幫你。 只需要呼叫你的程式碼如下。

mathLib.area.call({pi: 3.14159}, 2) //    12.56636

加入你注意到call函式具有兩個引數。

  • 上下文
  • 函式引數

在area函式中, 上下文是物件被關鍵詞this代替。後面的引數作為函式引數被傳遞。 如下:

var cylinder = {
    pi: 3.14,
    volume: function(r, h) {
        return this.pi * r * r * h;
    },
}

call 呼叫如下:

cylinder.volume.call({pi: 3.14159}, 2, 6); //    75.39815999999999

你看到這些函式的引數在上下文物件後被傳遞了嗎?

Apply 是相似的, 除了函式引數以列表的方式被傳遞。

cylinder.volume.apply({ pi: 3.14159 }, [2, 6]); //    75.39815999999999

你知道call的用法, apply用法反之亦然。 那麼 , bind的用法呢?

Bind函式的用途呢?它允許我們將上下文注入一個函式, 該函式返回一個帶有更新上下文的新函式。這意味著, 這個變數將是使用者提供的變數。當和JS事件一起執行時這是非常有用的。

你應該熟悉在JS中使用這三個函式去組合功能

3.熟悉js作用域(閉包)

JS作用域是一個潘多拉魔盒。數以百計的面試難題有這個概念構成。 有三種作用域:

  • 全域性作用域
  • 本地/函式作用域
  • 塊級作用域(ES6引進)

全域性作用域是我們通常做的那樣:

x = 10;
function Foo() {
  console.log(x); // Prints 10
}
Foo()

函式作用域生效當你定義一個區域性變數時:

pi = 3.14;
function circumference(radius) {    
     pi = 3.14159;
     console.log(2 * pi * radius); // Prints "12.56636" not "12.56"
}
circumference(2);

ES16標準介紹過新塊級作用域,限制一個變數作用域帶給定的括號塊。

var a = 10;
function Foo() {
    if (true) {
        let a = 4;
    }
    console.log(a);
}
Foo() //    10, 因為關鍵詞key

函式和條件都被視為塊。以上例子應該給出4,因為條件宣告已經生效。但是ES6銷燬了塊級變數的作用域,作用域進入全域性。

現在來自神奇的作用域。它可以通過閉包實現。JS閉包是一個返回另一個函式的函式。

如果有人要求你,實現輸入一個字串並逐次返回字元。如果給出一個新的字串, 需要替換舊字串。他被簡單成為生成器。

function generator(input) {
    var index = 0;
    return {
        next: function() {
            if (index < input.length) {
                index += 1;
                return input[index - 1];
            }
            return "";
        }
    }
}
var mygenerator = generator('hello');
mygenerator.next(); //    "h"
mygenerator.next(); //    "e"
mygenerator = generator('word');
mygenerator.next(); //    "w"

此時, 作用域扮演一個重要的角色。一個閉包是返回另一個函式和包裹資料的一個函式。以上字串生成器便是一個閉包。index的值在多個函式呼叫中被儲存。內部函式可以訪問父級函式中定義的變數。這是一個不同的作用域。假設你在二級函式中定義了一個函式, 它可以訪問所有父級變數。

JS作用域會給你帶來很多問題, 徹底理解它。

4.熟悉this(全域性域、函式域、物件域)

JS中, 我們經常把函式和物件組合。假設在瀏覽器中, 在全域性上下文中它涉及window物件。我的意思是, 如果你現在開啟瀏覽器控制檯輸入this, 改製為true

this === window //    true

當程式的上下文和作用域改變時, this隨之發生改變。現在觀察this在一個區域性上下文中:

function Foo() {
    console.log(this.a);
}
Foo() //    undefined
var food = { a: 'hello--' };
Foo.call(food); //    hello--

你可以嘗試預測一下輸出:

function Roo(){
    console.log(this); // prints {}?
}
Roo() //    Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

不,你還沒有獲勝。因為this此時是一個全域性物件。記住, 無論父級作用域是什麼, 它都講被它的孩子繼承。因此, 它打印出了window物件。我們討論的三個方法實際上用於設定this物件。

現在,this的最後一個型別。在物件中的this, 如下:

var person = {
    name: 'Tom',
    age: 26,
    get identity() {
        return { 
            who: this.name,
            howOld: this.age
        }
    }
}

我僅僅使用getter語法, 它是一個可以作為變數呼叫的函式。

person.identity; //    {who: "Tom", howOld: 26}

因此, 這實際是物件自己。this正如我們前面所提到的不同地方的表現不同。

5.熟悉物件(freeze、seal屬性)

可以通過以下方式建立物件:

var marks = {}
var marks = new Object();

我們大多是熟悉的物件如下:

var marks  = { physics: 98, maths: 95, chemistry: 91 };

它是一個鍵值對儲存鍵、值。JS 物件具備的一個特殊屬性, 把任何東西可以視為value。這意味著, 我們可以把一個數組、物件、函式作為value來儲存。有何不可呢?

你藉助JSON的stringify、parse防範可以輕鬆的把物件轉成一個JSON, 相應的可以再轉成物件。

JSON.stringify(marks); //    "{"physics":98,"maths":95,"chemistry":91}"
JSON.parse('{"physics":98,"maths":95,"chemistry":91}'); //    {physics: 98, maths: 95, chemistry: 91}

因此,對於物件你有了解一些什麼呢。使用Object.keys很容易迭代物件

var highScore = 0;
for (k of Object.keys(marks)) {
    if (marks[k] > highScore) {
        highScore = marks[k];
    }
}
console.log(highScore); //    98

Object.values 以陣列的方式返回物件的值。

其他重要的物件函式:

  • Object.prototype(object)
  • Object.freeze(function)
  • Object.seal(function)

Object.prototype提供更多可以應用的重要函式。如下:

Object.prototype.hasOwnProperty 用於發現一個物件是否存在一個原型或鍵。

marks.hasOwnProperty('physics'); //    true
marks.hasOwnProperty('greek'); //    false

Object.prototype.instanceof 評估一個物件是否是特定原型的型別。

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}
var newCar = new Car('Jack', 'City', '2008');
console.log(newCar instanceof Car) //    true

現在介紹其它兩個函式。Object.freeze 允許我們凍結一個物件, 使得存在的屬性不能被改變。

var marks = {physics: 98, math: 95, chemisty: 91}
finalizedMarks = Object.freeze(marks); //    {physics: 98, maths: 95, chemistry: 91}
finalizedMarks['physics'] = 86; 
console.log(marks); //    {physics: 98, maths: 95, chemistry: 91}

程式碼中, physics屬相併未被改變。我們可以使用Object.isFrozen來判斷,給定物件是否被凍結

Object.isFrozen(finalizedMarks); //    true

Object.seal 與freeze有細微差別。前者允許配置屬性, 但是不允許新增或刪除屬性。

var marks = {physics: 98, math: 95, chemisty: 91}
Object.seal(marks); //    {physics: 98, math: 95, chemisty: 91}
delete marks.chemisty //    false
marks.physics = 95;
console.log(marks); //    {physics: 95, math: 95, chemisty: 91}
marks.greek = 86;
console.log(marks); //    {physics: 95, math: 95, chemisty: 91}

同樣, 可以藉助Object.isSealed判斷物件是否被密封。

Object.isSealed(marks) //    true

6.熟悉原型繼承

在傳統的js中隱藏著繼承的概念, 使用原型技術。你在ES5、ES6中看到的所有new class語法僅僅是底層原型OOP的表層。使用js函式建立一個class.

var animalGroups = {
    MAMMAL: 1,
    REPTILE: 2,
    AMPHIBIAN: 3,
    INVERTEBRATE: 4,
};
function Animal(name, type) {
    this.name = name;
    this.type = type;
}
var dog = new Animal("dog", animalGroups.MAMMAL);
console.log(dog); //    Animal { name: 'dog', type: 1 }
var crocodile = new Animal("crocodile", animalGroups.REPTILE);
console.log(crocodile); //    Animal { name: 'crocodile', type: 2 }

此時, 我們建立一個類(使用關鍵詞new)。可以使用如下方式對class追加方法。

Animal.prototype.shout = function() {
  console.log(this.name+'is'+this.sound+'ing...');
}

你可能有疑問。現在class中沒有sound屬性。是的。定義一個sound屬性幾乎沒有可能,可以由繼承它的子類進行傳遞。

js中, 如下實現繼承。

function Dog(name, type) {
  Animal.call(this, name, type);
  this.sound = 'bow';
}
// console.log(Dog); // [Function: Dog]

定義一個特殊的函式Dog。為了繼承Animal, 需要call傳遞this和其他引數。如下方式例項化一個Jack。

var pet = new Dog('Jack', animalGroups.MAMMAL);
console.log(pet);   // Dog { name: 'Jack', type: 1, sound: 'bow' }
console.log(pet instanceof Dog); // true
console.log(pet instanceof Animal); // false

我們不能在子函式中分配name和type,但是可以呼叫超級函式Animal並設定屬性。。pet擁有其父的(name, type)屬性。是否也繼承了方法。

pet.shout(); // is not a function

為什麼沒有繼承呢? 因為不能繼承父class的方法。如何補救?

Dog.prototype = Object.create(Animal.prototype);
var pig = new Dog('Jack', animalGroups.MAMMAL);
pig.shout(); // Jackisbowing...

現在shout方法是有效的。Object.constructor函式檢查物件的class.

console.log(pig.constructor); // [Function: Animal]

檢查pig的結果。Animal是父類。這是因為Dog的類

console.log(Dog.prototype.constructor); // [Function: Animal]

輸出是Aimal。我們應該設定Dog為其本身, 這樣類的所有例項(物件)都應該在類所屬的地方給出正確的類名。

Dog.prototype.constructor = Dog;
console.log(Dog.prototype.constructor); // [Function: Dog]

關於原型繼承, 我們應該記住以下幾條:

  • class 屬性使用this繫結
  • class 方法使用prototype物件來繫結
  • 為了繼承原型, 使用call函式傳遞this
  • 為了繼承方法, 使用Object.create連線父和子的原型
  • 通設定子class建構函式本身為獲取正確的標識。

注意:即使使用新的class語法, 這些事情也會發生。瞭解這些對你熟悉js有幫助。

js中, call函式和原型物件提供繼承

7.熟悉callback和promise

callback 是 一個I/O執行完畢後執行的函式。一個耗時的I/O操作會阻塞程式碼, 因此在Python/Ruby不被允許。但是js中, 由於允許非同步執行, 我們可以提供非同步函式來回調。這個例子是由瀏覽器到伺服器的AJAX(XMLHettpRequest)呼叫,由滑鼠、鍵盤事件生成。如下:

function reqListener() {
    console.log(this.responseText);
}
var req = new XMLHttpRequest();
req.addEventListener('load', reqListenter);
req.open('GET', 'http://www.example.org/example.txt');
req.send();

其中, reqListenter是GET請求成功後的回撥函式。

Promise 是回撥函式的優雅的封裝, 使得我們優雅的實現非同步程式碼。此時, 不再過多討論promise, 雖然對於熟悉Js及其重要。

8.熟悉正則表達

建立正則表示式,有如下兩種方式:

var re = /ar/;
var re = new RegExp('ar');

以上正則用於匹配字串。一旦正則已經定義, 可以使用exec函式匹配字串。

re.exec('car')
re.exec('cab')

存在複雜的符號, 來實現複雜的正則表示式。

  • 字元正則:\w-字母數字, \d-數字, \D-沒有數字
  • 字元正則:[x-y]x-y區間, [^x]沒有x
  • 數量正則:+至少一個、?沒或多個、*多個
  • 邊界正則,^開始、$結尾

例子如下:

// 1
/\d/.exec('qwe') // null
/\d/.exec('2344') // ["2", index: 0, input: "2344", groups: undefined]
/\d/.exec('2cc4') // ["2", index: 0, input: "2cc4", groups: undefined]

// 2
/e+/.exec('qwe') // ["e", index: 2, input: "qwe", groups: undefined]

// 3
[^x]/.exec('xcc4')  // ["c", index: 1, input: "xcc4", groups: undefined]

// 4
/^q/.exec('qwe') //["q", index: 0, input: "qwe", groups: undefined]
/e$/.exec('qwe') // ["e", index: 2, input: "qwe", groups: undefined]

除了exec, 還有match、search,以及replace可以返回一個字串使用正則表示式。但是主體是一個字串。

'hello 12345'.match(/\d/) // ["1", index: 6, input: "hello 12345", groups: undefined]
'hello 12345'.replace(/1/, 'c') // "hello c2345"

正則是個重要的話題, 對於想要簡單解決複雜問題的開發人員來說。

正則不單單屬於js, 你也可以經常在其他語言中見到

9.熟悉map、reduce和filter

函數語言程式設計是最近討論的話題。許多程式語言的新版本開始包括lambdas等概念(如:java>7)。 js中, 支援函式式結構已經有很長一段時間。此處, 有三個函式需要我們深入學習。數學函式獲取輸出並給出返回。一個純正的函式總是依據輸入給出返回,如下討論的函式屬於此類函式。

9.1 map

map函式在js陣列中可用。使用這個函式, 我們通過對每一個元素進行轉換來獲取一個新的陣列。一般的js陣列map操作如下:

arr.map((elem){
    process(elem);
    return processedValue;
}); // return a new array

假設,我們最近工作的序列鍵不需要字元。 我們需要移除。可以使用map去執行相同的操作從而獲取結果數字,而不是通過迭代和發現的方式移除字元。

var data = ['2345-34r', '2e345-211', '543-67i4', '346-598'];
var re = /[a-z A-Z]/;
var cleanedData = data.map((elem) => {
    return elem.replace(re, '');
});
console.log(cleanedData); // ["2345-34", "2345-211", "543-674", "346-598"]

注意:使用es6的箭頭函式語法來定義函式

map接受一個作為引數的函式, 此函式接受一個來自陣列的引數。我們需要返回一個處理過的元素, 並應用於陣列中的所有元素。

9.2 reduce

reduce函式將一個給定的列表歸納出一個返回。我們通過迭代陣列執行相同的操作, 並儲存中間結果到一個變數中。此處是一個更簡潔的方式進行處理。js的reduce一般使用語法如下:

arr.reduce((accumulator, value, index) => {
    process(accumulator, value);
    return accumulator;
}, initAccumulator);
  • initAccumulator, 累加器的初始值
  • accumulator, 累加器用於儲存中間值和結果值
  • value, 對組對應的元素
  • index, 陣列對應的索引號

reduce 的一個實際應用是將一個數組扁平化, 將內部陣列轉化為單個數組, 如下:

var arr = [[1, 2], [3, 4], [5, 6]]
var flattenedArray = [1, 2, 3, 4, 5, 6]

我們可以通過正常的迭代實現, 神奇的是, 使用reduce會更加簡潔。

var arr = [[1, 2], [3, 4], [5, 6]]
var flattenedArray = arr.reduce((a, v) => {
    return a.concat(v)
}, [])
flattenedArray // (6) [1, 2, 3, 4, 5, 6]

9.3 filter

filter與map更為接近, 對陣列的每個元素進行操作並返回另外一個數組(不同於reduce返回的值)。過濾後的陣列可能比原陣列長度更短。因為, 我們通過的可能排除 輸出陣列中更少/零的輸入。
filter執行如下:

arr.filter((v) => {
    return Boolean;
})

v是陣列中的元素, 通過true/false表示過濾元素包括/排除。假設, 我們過濾出以t開始以r結束的元素。

var words = ["tiger", "toast", "boat", "tumor", "track", "bridge"]
var newData = words.filter((str) => {
    return str.startsWith('t') && str.endsWith('r');
})
newData // (2) ["tiger", "tumor"]

當你被問到js方面的問題時, 這三個函式應該信手拈來。如你所看到的, 所有三個函式例子並沒有改變原陣列, 這也證明了這些函式的純淨性。

10. 熟悉錯誤(異常)處理模式

這部分是許多開發者最不關係的js部分。我瞭解到很少開發人員討論錯誤處理。好的開發方法是小心的將js程式碼包裹在try/catch周圍。

Nicholas C. Zakas, 雅虎的UI工程師, 2018 說過: “經常假設你的程式碼會失敗。事件處理可能不當。記錄到伺服器。丟擲你自己的問題。”

js中, 我們隨意碼的程式碼, 可能失敗, 如下:

$('button').click(function() {
    $.ajax({
        url: 'user.json',
        success: function(res) {
            updateUI(res['posts']);
        }
    });
});

此時, 我們落入ajax結果總是JSON物件的陷阱。有時, 伺服器會崩潰並返回null。這種情況下, null["posts"]會丟擲錯誤。正確的處理方式如下:

$('button').click(function() {
    $.ajax({
        url: 'user.json',
        success: function(res) {
            try {
                updateUI(res['posts']);
            }
            catch(e) {
                logError();
                flashInfoMessage();
            }
        }
    });
});
  • logError函式打算向伺服器報告錯誤。
  • flashInfoMessage函式使用“當前伺服器不可用”等使用者友好型方式展示錯誤資訊。

Nicholas說過, 當你感到不可預期的事情發生時手動丟擲錯誤。區分致命和非致命錯誤。上面的錯誤與後臺伺服器掛機相關,是致命的。因此, 我們應該通知客戶伺服器因為一些原因掛機。這種情況下, 不是致命的, 但是最好通知伺服器。為了建立這樣的程式碼, 首先丟擲錯誤, 從window層級捕捉錯誤事件, 隨後記錄資訊到伺服器。

reportErrorToServer = function(error) {
    $.ajax({
        type: "POST",
        url: "http://api.xyz.com/report",
        data: error,
        success: function(res) {}
    });
}

// window error evnet
window.addEvnetListener('error', function(e) {
    reportErrorToServer({
        message: e.message
    });
});

function mainLogic() {
    throw new Error("error tip");
}

這個程式碼需要做如下三件事:

  • 監聽window層級錯誤
  • 出現錯誤時, API記錄
  • 在伺服器中記錄

你也可以使用新的Boolean函式(es5,es6)在程式之前監測變數的有效性並且不為null、undefined

if (Boolean()) {
    // block code
} else {
    throw new Error("Custom message");
}

始終考慮錯誤處理是你自己, 而不是瀏覽器。

11. 其他(提升機制和事件冒泡)

對於一個js開發者, 以上都是主要概念。瞭解少數內部細節可是非常有用的。js在瀏覽器中的工作機制。什麼是提升機制和事件冒泡?

11.1 提升機制

提升是 在程式碼執行過程中將宣告的變數推送到程式頂部 的一個過程。

function doSomething(v) {
    //
}
doSomething(foo);
var foo;

使用指令碼語言類似Python執行以上程式, 會丟擲錯誤。你需要先定義再使用。雖然js是指令碼語言, 但是它有提升機制。 在這種機制中, 一個js VM在執行程式是做了以下兩件事:

  • 首先,掃描程式收集所有變數和函式的宣告和分配記憶體空間。
  • 通過填充分配的變數來執行程式, 沒有分配則填充undefined

以上程式碼片段中列印“undefined”, 因為最初的掃描中已經收集了變數foo。VM查詢所有foo的值。

在 一些地方回丟擲錯誤 和 另外地方使用undefined js環境下的提升機制。學習一些例子來搞清楚提升。

author: 宣告可以被提升, 賦值不會。

11.2 事件冒泡

關於事件冒泡, 依據Arun P( 一個高階軟體工程)所描述:

“事件冒泡和捕獲在HTML DOM API中事件傳播的兩種方式,當同時註冊事件的父子元素中子元素觸發事件時。事件的傳播方式決定接受事件的元素順序 ”

關於冒泡, 事件最先由內部元素捕獲和處理, 隨後傳遞給父級元素。關於捕獲, 順序相反。我們通常使用addEventListener函式來捆綁事件和事件處理函式

addEventListener('click', handler, useCapture=false);

useCapture是第三個引數的關鍵詞, 預設為false。因此, 冒泡模式是事件由底部向上傳遞。 反之, 這是捕獲模式。

冒泡模式:

<div onClick="divHandler()">
    <ul onClick="ulHandler()">
        <li id="foo"></li>
    </ul>
</div>
<script>
function handler() {}
function divHandler() {}
function ulHandler() {}

documnet.getElementById("foo").addEventListener("click", handler)
</script>

點選li元素, 事件順序:handler() => ulHandler() => divHandler()

捕獲模式:

document.getElementById("foo").addEventListener("click", handler, true)

點選li元素, 事件順序divHandler => ulHandler() => handler()

以上都是基礎的js知識。 正如我最初提及的, 除了這些, 工作經歷和知識、準備對你攻克面試都有幫助。保持學習的習慣, 學習最新得技術(es6), 深入js各個方面的學習(如V6、測試等)。一些視訊也可以教會你一些知識。最後, 資料結構和演算法的準備也必不可少。Oleksii Trekhleb 的演算法倉庫值得學習

閱讀原文

其他blog;