最具挑戰性和最困難的 javascript 技術面試問題及其解決方案。

你好！我是 Vishal Tiwari，我將為您提供一些具有挑戰性的 javascript 面試問題。

1. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出： 物件

解釋：這是 JavaScript 中眾所周知的怪癖。 typeof 運算子在套用至 null 時傳回“object”，即使 null 不是物件。此行為是由於 JavaScript 的實作方式造成的，並且為了向後相容而保留了此行為。

---

2. 下面的程式碼會輸出什麼？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

輸出： false

解釋：由於浮點運算在 JavaScript（以及許多程式語言）中的工作方式，0.1 0.2 並不精確等於 0.3。相反，它的結果是 0.30000000000000004，導致比較回傳 false。

---

3. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

輸出： 123

說明： 當您嘗試使用另一個物件作為鍵(a[b]) 設定物件的屬性時，JavaScript 會將物件b 轉換為字串，這會導致「[object Object ] 」。因此，您實際上是將屬性「[object Object]」設為 123，當您記錄 a[b] 時，它會傳回 123。

---

4. 以下程式碼的輸出為何？

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

答：

輸出： 11

說明：當您為大於數組當前長度的索引分配值時（例如arr[10] = 11），JavaScript 會在數組中為該數組建立「空槽」索引從3 到9。但是，數組的 length 屬性反映了最高索引加一，在本例中為 11。

---

5. 以下程式碼的輸出為何？

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

答：

輸出：

• 第一個控制台日誌：30
• 第二個console.log：300
• 第三個控制台.log：3000

說明：

• obj.sum() 使用 obj 的 this 上下文，因此它新增 10 和 20，傳回 30。
• obj.sum.call({ x: 100, y: 200 }) 使用 call 方法將其更改為 x 和 y 值分別為 100 和 200 的新對象，返回 300。
• obj.sum.apply({ x: 1000, y: 2000 }) 與 apply 執行相同操作，回傳 3000。

---

6. 以下程式碼的輸出為何？

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

答：

輸出：

• 第一個console.log：'11'
• 第二個console.log：0

說明：

• 在 1 '1' 中，JavaScript 執行類型強制轉換，將數字 1 轉換為字串，結果為 '11'。
• 在 1 - '1' 中，JavaScript 將字串 '1' 轉換為數字，得到 1 - 1，等於 0。

---

7. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出： 輸出將取決於呼叫 foo 的上下文，但如果它在全域上下文中，它將記錄全域物件（瀏覽器中的 window 或 Node.js 中的 global）。

解釋： 在箭頭函數中，this 是詞法綁定的，這意味著它使用周圍上下文中的 this 值。如果在全域範圍內呼叫 foo，this 將引用全域物件。

---

8. 以下程式碼的輸出為何？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

輸出：

• 第一個console.log：1
• 第二個console.log：2
• 第三個控制台.log：2
• 第四個console.log：1
• 第五個console.log：1

說明： createCounter 函數建立一個維護自己的計數變數的閉包。每個方法（遞增、遞減、getCount）存取和修改相同的計數變量，提供一致的行為。

---

9. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

輸出： [99, 2, 3]

說明：在 JavaScript 中，陣列（像所有物件一樣）是引用型別。當b被賦值給a時，兩個變數都指向記憶體中的同一個陣列。因此，修改 b 會影響 a。

---

10. 以下程式碼的輸出為何？

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

答：

輸出： 3

解釋： 在這個例子中，內部函數有自己的 a 變量，它遮蔽了外部函數中的 a 變量。在inner中呼叫console.log(a)時，引用的是inner中定義的a，即3。

11. 以下程式碼的輸出為何？

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

答：

輸出： { a: 1, b: 3, c: 4 }

說明： Object.assign() 方法將所有可枚舉屬性的值從一個或多個來源物件（obj1 和 obj2）複製到目標物件（一個空物件 {}）。如果多個來源物件中存在相同的屬性，則最後一個優先。因此，obj2 中的 b: 3 會覆蓋 obj1 中的 b: 2。

---

12. 以下程式碼的輸出為何？

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

答：

輸出：未定義

說明：如果有換行符，JavaScript 會自動在 return 語句後插入分號。因此，它被解釋為 return;，即返回 undefined。要傳回對象，您應該將左大括號 { 與 return 關鍵字放在同一行。

---

13. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出：未定義

解釋： 函數 foo 中的變數 x 被提升但沒有初始化，直到賦值 var x = 2;。因此，當 console.log(x);執行時，局部 x 已宣告但尚未賦值，因此輸出 undefined。

---

14. 以下程式碼的輸出為何？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

輸出： 99

解釋： a 和 b 都引用記憶體中的同一個陣列。當你修改 b[0] 時，你也在修改 a[0]，因為它們都引用同一個陣列。

---

15. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

• 第一個console.log：“123”
• 第二個console.log：“33”

說明：

• 在 1 "2" "3" 中，JavaScript 將 1 轉換為字串並連接，產生“12”，然後產生“123”。
• 在 1 2 "3" 中，JavaScript 先計算 1 2，它等於 3（數字），然後連接“3”，得到“33”。

---

16. 以下程式碼的輸出為何？

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

答：

輸出： []

說明： 將陣列的 length 屬性設為 0 可有效清除陣列。因此，arr 現在是一個空數組。

---

17. 以下程式碼的輸出為何？

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

答：

輸出： 2

說明： 內部函數在被呼叫時有自己的一個變量，該變數為 2。當您呼叫 innerFunc() 時，它會記錄 2，因為它引用了內部函數中的局部變數 a。

---

18. 以下程式碼的輸出為何？

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

答：

輸出： 3

說明： c 方法是在 obj 上呼叫的，所以方法內部的 this 引用了 obj。因此，它輸出 obj.a 和 obj.b 的總和，即 3。

---

19. 以下程式碼的輸出為何？

const foo = () => {
    console.log(this);
};

foo(); // Output?

答：

• 第一個console.log: false
• 第二個console.log：true

說明：

• 由於浮點精確度問題，第一語句傳回 false（0.1 0.2 等於 0.30000000000000004）。
• 第二條語句使用 toFixed(1) 將 0.1 0.2 舍入為 0.3，並將其轉換回數字，結果比較為 0.3 === 0.3，這是正確的。

---

20. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出： 全域物件（或嚴格模式下未定義）

說明： 在非嚴格模式下，全域上下文中呼叫的函數內的 this 值是全域物件（即瀏覽器中的 window 或 Node.js 中的 global）。在嚴格模式下，這將是未定義的。

21. 以下程式碼的輸出為何？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

• 第一個console.log：2
• 第二個console.log：1

說明：

• Object.assign(obj3, obj2) 將屬性從 obj2 複製到 obj3，因此 obj3.a 變成 2。
• obj3.__proto__ 引用 obj1，其屬性 a 的值為 1。

---

22. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

輸出： 3

說明：在inner函數中，a指的是outer函數中定義的變數。當呼叫 inner 時，a 從 2 增加到 3 並記錄。

---

23. 以下程式碼的輸出為何？

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

答：

輸出：你好，我的名字未定義

解釋：當在沒有上下文的情況下呼叫greet時（即不是作為person的方法），這不綁定到person。在非嚴格模式下，預設為全域對象，並且由於全域物件上未定義名稱，因此它會記錄未定義。

---

24. 以下程式碼的輸出為何？

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

答：

• 第一個console.log：true
• 第二個console.log：true

說明：

• 對於console.log([1] == true)，將陣列[1]轉為原始類型，結果為1，1 == true為true。
• 對於console.log([0] == false)，陣列[0]轉換為0，0 == false也是true。

---

25. 以下程式碼的輸出為何？

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

答：

• 第一個 foo(): 1
• 第二個 foo(): 2
• 第三個 foo(): 3

說明： foo 函數在 count 變數周圍維護一個閉包，每次呼叫 foo 時變數都會遞增，從而在呼叫之間保留其狀態。

---

26. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出：

• 第一個console.log(a): 1
• 第二個console.log(b): 2
• 第三個console.log(c): 3

解釋： 由於閉包，a 在第二個函數中是可存取的。 b 也可以訪問，因為它在first 中定義。 c 是第二個的本地變量，因此所有三個變數都被正確記錄。

---

27. 以下程式碼的輸出為何？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

輸出： 3

說明： call 方法以 newObj 呼叫increment，因此 this.num 引用 newObj.num。增量操作將 newObj.num 從 2 改為 3。

---

28. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

輸出：

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

解釋： 由於提升，setTimeout 函數都引用相同的 i 變數。當超時執行時，i 已經增加到 4，導致 4 被記錄三次。

---

29. 以下程式碼的輸出為何？

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

答：

• 數組：[1,2,3]
• 新數組：[2,3,4]

說明：map 函數根據應用於每個項目的轉換建立一個新陣列。原始數組保持不變，而 newArray 反映了增量。

---

30. 以下程式碼的輸出為何？

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

答：

輸出： 輸出將取決於呼叫 foo 的上下文，但如果它在全域上下文中，它將記錄全域物件（瀏覽器中的 window 或 Node.js 中的 global）。

解釋： 在箭頭函數中，this 是詞法綁定的，這意味著它使用周圍上下文中的 this 值。如果在全域範圍內呼叫 foo，this 將引用全域物件。

---

31. 以下程式碼的輸出為何？

const foo = () => {
    console.log(this);
};

foo(); // Output?

答：

輸出： 42

解釋： 內部函數是一個箭頭函數，它在詞法上將 this 綁定到方法函數的上下文。因此，this.value 引用了 obj.value，即 42。

---

32. 以下程式碼的輸出為何？

function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // Output?
console.log(counter.increment()); // Output?
console.log(counter.getCount());  // Output?
console.log(counter.decrement()); // Output?
console.log(counter.getCount());  // Output?

答：

輸出：參考錯誤

解釋： 變數 x 在 myFunction 中提升，這表示它存在於函數作用域中，但直到 console.log(x) 之後才初始化。這會導致引用錯誤，因為 x 變數在宣告之前被存取。

---

33. 以下程式碼的輸出為何？

console.log(typeof null); // Output?

答：

輸出：你好未定義

說明：當在沒有明確上下文的情況下呼叫greet時，this不引用obj，因此this.name未定義。

---

34. 以下程式碼的輸出為何？

console.log(0.1 + 0.2 === 0.3); // Output?

答：

輸出：數字

說明：在 JavaScript 中，NaN（非數字）被視為數字類型，typeof NaN 傳回「數字」。

---

35. 以下程式碼的輸出為何？

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

答：

輸出： [1, 2, 3, 4]

解釋： a 和 b 都引用記憶體中的同一個陣列。當你將 4 推入 b 時，它也會影響 a。

以上是最具挑戰性和最困難的 javascript 技術面試問題及其解決方案。的詳細內容。更多資訊請關注PHP中文網其他相關文章！