被難倒了! 針對高級前端的八個級JavaScript面試問題
JavaScript 是一種功能強大的語言，也是構建現代 Web 的基礎之一。這種強大的語言也有一些自己的怪癖。例如，你知道 0 === -0 會計算為 true，或者 Number("") 會返回 0 嗎？
有時候，這些怪癖會讓你百思不得其解，甚至讓你懷疑 Brendan Eich 在發明 JavaScript 的那一天是不是狀態不佳。但這里的重點并不是說 JavaScript 是一種糟糕的編程語言，或者如其批評者所說的那樣，是一種“邪惡”的語言。所有的編程語言都有某種程度的怪癖，JavaScript 也不例外。
在這篇博客文章中，我們將深入解釋一些重要的 JavaScript 面試問題。我的目標是徹底解釋這些面試問題，以便我們能夠理解背后的基本概念，并希望在面試中解決其他類似的問題。
1、仔細觀察 + 和 - 運算符
console.log(1 + '1' - 1);你能猜到在上面這種情況下，JavaScript 的 + 和 - 運算符會有什么行為嗎？
當 JavaScript 遇到 1 + '1' 時，它會使用 + 運算符來處理這個表達式。+ 運算符有一個有趣的特性，那就是當其中一個操作數是字符串時，它更傾向于執行字符串的連接。在我們的例子中，'1' 是一個字符串，因此 JavaScript 隱式地將數字 1 轉換為字符串。因此，1 + '1' 變成了 '1' + '1'，結果是字符串 '11'。
現在，我們的等式是 '11' - 1。- 運算符的行為正好相反。它更傾向于執行數字減法，而不考慮操作數的類型。當操作數不是數字類型時，JavaScript 會執行隱式轉換，將它們轉換為數字。在這種情況下，'11' 被轉換為數字值 11，表達式簡化為 11 - 1。
綜合考慮：
'11' - 1 = 11 - 1 = 102、數組元素的復制
考慮以下的 JavaScript 代碼，并嘗試找出其中的問題：
function duplicate(array) {
for (var i = 0; i < array.length; i++) {
array.push(array[i]);
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);在這段代碼片段中，我們需要創建一個新數組，該數組包含輸入數組的重復元素。初步檢查后，代碼似乎通過復制原始數組 arr 中的每個元素來創建一個新數組 newArr。然而，在 duplicate 函數內部出現了一個嚴重的問題。
duplicate 函數使用循環來遍歷給定數組中的每個項目。但在循環內部，它使用 push() 方法在數組末尾添加新元素。這導致數組每次都會變長，從而產生一個問題：循環永遠不會停止。因為數組長度不斷增加，循環條件（i < array.length）始終為真。這使得循環無限進行下去，導致程序陷入僵局。
為了解決由于數組長度增長而導致的無限循環問題，可以在進入循環之前將數組的初始長度存儲在一個變量中。然后，可以使用這個初始長度作為循環迭代的限制。這樣，循環只會針對數組中的原始元素進行，并不會受到由于添加重復項而導致數組增長的影響。以下是修改后的代碼：
function duplicate(array) {
var initialLength = array.length; // 存儲初始長度
for (var i = 0; i < initialLength; i++) {
array.push(array[i]); // 推入每個元素的副本
}
return array;
}
const arr = [1, 2, 3];
const newArr = duplicate(arr);
console.log(newArr);輸出將顯示數組末尾的重復元素，并且循環不會導致無限循環：
[1, 2, 3, 1, 2, 3]3、prototype 和 proto 的區別
prototype 屬性是與 JavaScript 中的構造函數相關聯的屬性。構造函數用于在 JavaScript 中創建對象。當您定義一個構造函數時，還可以將屬性和方法附加到其 prototype 屬性上。這些屬性和方法然后變得可以被該構造函數創建的所有對象實例訪問。因此，prototype 屬性充當共享方法和屬性的通用存儲庫。
考慮以下代碼片段：
// 構造函數
function Person(name) {
this.name = name;
}
// 添加一個方法到 prototype
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
};
// 創建實例
const person1 = new Person("Haider Wain");
const person2 = new Person("Omer Asif");
// 調用共享的方法
person1.sayHello(); // 輸出：Hello, my name is Haider Wain.
person2.sayHello(); // 輸出：Hello, my name is Omer Asif.另一方面，__proto__ 屬性，通常讀作 "dunder proto"，存在于每一個 JavaScript 對象中。在 JavaScript 中，除了原始類型外，一切都可以被視為對象。每個這樣的對象都有一個原型，該原型作為對另一個對象的引用。__proto__ 屬性簡單地是對這個原型對象的引用。
當你試圖訪問對象上的一個屬性或方法時，JavaScript 會進行查找過程來找到它。這個過程主要涉及兩個步驟：
對象的自有屬性：JavaScript 首先檢查對象自身是否直接擁有所需的屬性或方法。如果在對象內找到了該屬性，則直接訪問和使用。原型鏈查找：如果在對象自身沒有找到該屬性，JavaScript 將查看對象的原型（由 __proto__ 屬性引用）并在那里搜索該屬性。這個過程會遞歸地沿著原型鏈進行，直到找到該屬性或直到查找達到 Object.prototype。如果在 Object.prototype 中甚至沒有找到該屬性，JavaScript 將返回 undefined，表示該屬性不存在。
4、作用域
當編寫 JavaScript 代碼時，理解作用域的概念非常重要。作用域指的是變量在代碼的不同部分的可訪問性或可見性。下面我們通過一個代碼片段來更仔細地了解這個概念：
function foo() {
console.log(a);
}
function bar() {
var a = 3;
foo();
}
var a = 5;
bar();代碼定義了兩個函數 foo() 和 bar()，以及一個值為5的變量 a。所有這些聲明都發生在全局作用域中。在bar()函數內部，聲明了一個變量a并賦值為 3。那么當bar()函數被調用時，你認為會輸出哪個值的a？
當JavaScript引擎執行這段代碼時，全局變量a被聲明并賦值為5。然后調用了bar()函數。在bar()函數內部，聲明了一個局部變量a并賦值為3。這個局部變量a與全局變量a是不同的。之后，從bar()函數內部調用了foo()函數。
在foo()函數內部，console.log(a)語句試圖輸出變量a的值。由于在foo()函數的作用域內沒有定義局部變量a，JavaScript會查找作用域鏈以找到最近的名為a的變量。
現在，我們來解答JavaScript將在哪里搜索變量a的問題。它會查找bar函數的作用域嗎，還是會探索全局作用域？事實證明，JavaScript會在全局作用域中搜索，這種行為是由一個叫做詞法作用域的概念驅動的。
詞法作用域是指函數或變量在代碼中被編寫時的作用域。當我們定義了foo函數，它被賦予了訪問自己的局部作用域和全局作用域的權限。這一特性在我們無論在哪里調用foo函數時都是一致的，無論是在bar函數內部還是在其他模塊中運行。詞法作用域并不是由我們在哪里調用函數來決定的。
最終結果是，輸出始終是全局作用域中找到的a的值，在這個例子中是5。
然而，如果我們在bar函數內部定義了foo函數，情況就會有所不同：
function bar() {
var a = 3;
function foo() {
console.log(a);
}
foo();
}
var a = 5;
bar();在這種情況下，foo 的詞法作用域將包括三個不同的作用域：它自己的局部作用域，bar 函數的作用域，以及全局作用域。詞法作用域是由你在源代碼中放置代碼的位置在編譯時決定的。
當這段代碼運行時，foo 位于 bar 函數內部。這種安排改變了作用域的動態。現在，當foo試圖訪問變量a時，它首先會在自己的局部作用域內進行搜索。由于沒有找到a，它會擴大搜索范圍到bar函數的作用域。果然，那里存在一個值為3的a。因此，控制臺語句將輸出3。
5、對象強制類型轉換
const obj = {
valueOf: () => 42,
toString: () => 27
};
console.log(obj + '');一個引人入勝的方面是探究JavaScript如何處理對象轉換為基本值，例如字符串、數字或布爾值。這是一個有趣的問題，測試你是否了解對象的強制類型轉換。
在像字符串連接或算術運算這樣的場景中與對象一起工作時，這種轉換至關重要。為了實現這一點，JavaScript 依賴兩個特殊的方法：valueOf 和 toString。
valueOf 方法是JavaScript對象轉換機制的一個基礎部分。當一個對象在需要基本值的上下文中被使用時，JavaScript 首先會在對象內部查找valueOf方法。在valueOf方法不存在或不返回適當的基本值的情況下，JavaScript會退回到toString方法。這個方法負責提供對象的字符串表示形式。
回到我們最初的代碼片段：
const obj = {
valueOf: () => 42,
toString: () => 27
};
console.log(obj + '');當我們運行這段代碼時，對象obj被轉換為一個基本值。在這種情況下，valueOf 方法返回42，然后由于與空字符串的連接，它被隱式地轉換為字符串。因此，代碼的輸出將是 42。
然而，在valueOf方法不存在或不返回適當的基本值的情況下，JavaScript會退回到toString方法。讓我們修改之前的示例：
const obj = {
toString: () => 27
};
console.log(obj + '');在這里，我們已經移除了 valueOf 方法，只留下了返回數字27的toString方法。在這種情況下，JavaScript 將依賴 toString 方法進行對象轉換。
6、理解對象鍵（Object Keys）
當在JavaScript中使用對象時，理解鍵是如何在其他對象的上下文中被處理和分配的非常重要。考慮以下代碼片段，并花點時間猜測輸出：
let a = {};
let b = { key: 'test' };
let c = { key: 'test' };
a[b] = '123';
a[c] = '456';
console.log(a);乍一看，這段代碼似乎應該生成一個具有兩個不同鍵值對的對象a。然而，由于JavaScript對對象鍵的處理方式，結果完全不同。
JavaScript 使用默認的toString()方法將對象鍵轉換為字符串。為什么呢？在JavaScript中，對象鍵總是字符串（或 symbols），或者通過隱式強制轉換自動轉換為字符串。當你在對象中使用除字符串之外的任何值（例如，數字、對象或符號）作為鍵時，JavaScript將在使用它作為鍵之前內部將該值轉換為其字符串表示形式。
因此，當我們在對象a中使用對象b和c作為鍵時，兩者都轉換為相同的字符串表示形式：[object Object]。由于這種行為，第二個賦值a[c] = '456';會覆蓋第一個賦值a[b] = '123';。
最終，當我們記錄對象a時，我們觀察到以下輸出：
{ '[object Object]': '456' }7、雙等號運算符
console.log([] == ![]);這個有點復雜。那么，你認為輸出會是什么呢？
這個問題相當復雜。那么，你認為輸出結果會是什么呢？讓我們一步一步地來評估。首先，讓我們看一下兩個操作數的類型：
typeof([]) // "object"
typeof(![]) // "boolean"對于 []，它是一個對象，這是可以理解的，因為在JavaScript中，包括數組和函數在內的一切都是對象。但操作數 ![] 是如何具有布爾類型的呢？讓我們嘗試理解一下。當你使用 ! 與一個原始值（primitive value）一起時，會發生以下轉換：
- Falsy Values（假值）：如果原始值是一個假值（例如 false、0、null、undefined、NaN 或一個空字符串 ''），應用 ! 將把它轉換為 true。
- Truthy Values（真值）：如果原始值是一個真值（即任何不是假值的值），應用 ! 將把它轉換為 false。
在我們的案例中，[] 是一個空數組，這在JavaScript中是一個真值。因為 [] 是真值，![] 變成了 false。因此，我們的表達式變為：
[] == ![]
[] == false現在，讓我們繼續了解 == 運算符。當使用 == 運算符比較兩個值時，JavaScript會執行“抽象相等性比較算法（Abstract Equality Comparison Algorithm）”。這個算法會考慮比較值的類型并進行必要的轉換。
在我們的情況中，讓我們把 x 記作 []，y 記作 ![]。我們檢查了 x 和 y 的類型，并發現 x 是對象，y 是布爾值。由于 y 是布爾值，x 是對象，算法的第7個條件被應用：
如果 Type(y) 是 Boolean，則返回 x == ToNumber(y) 的比較結果。這意味著如果其中一個類型是布爾值，我們需要在比較之前將其轉換為數字。ToNumber(y) 的值是多少呢？如我們所見，[] 是一個真值，取反使其變為 false。因此，Number(false) 是 0。
[] == false
[] == Number(false)
[] == 0現在我們有了 [] == 0 的比較，這次算法的第8個條件起作用：
如果 Type(x) 是 String 或 Number，而 Type(y) 是 Object，則返回 x == ToPrimitive(y) 的比較結果。
基于這個條件，如果其中一個操作數是對象，我們必須將其轉換為一個原始值。這就是“ToPrimitive算法”出現的地方。我們需要將 x（即 []）轉換為一個原始值。數組在JavaScript中是對象。當將對象轉換為原始值時，valueOf 和 toString 方法會起作用。在這種情況下，valueOf 返回數組本身，這不是一個有效的原始值。因此，我們轉向 toString 以獲取輸出。將 toString 方法應用于空數組會得到一個空字符串，這是一個有效的原始值：
[] == 0
[].toString() == 0
"" == 0將空數組轉換為字符串給了我們一個空字符串 ""，現在我們面對的比較是："" == 0。
現在其中一個操作數的類型是字符串，另一個是數字，算法的第5個條件成立：
如果 Type(x) 是 String，而 Type(y) 是 Number，則返回 ToNumber(x) == y 的比較結果。
因此，我們需要將空字符串 "" 轉換為數字，這給了我們一個 0。
"" == 0
ToNumber("") == 0
0 == 0最后，兩個操作數具有相同的類型和條件1成立。由于兩者具有相同的值，最終的輸出是：
0 == 0 // true至此，我們已經利用了強制轉換（coercion）來解決了我們探討的最后幾個問題，這是掌握JavaScript和解決面試中這類常見問題的重要概念。我強烈建議你查看我的關于強制轉換的詳細博客文章。它以清晰和徹底的方式解釋了這個概念。這里是鏈接。
