八個經常困擾大家的常見 JavaScript 面試題
隨著就業市場的競爭越來越大,面試過程變得更加嚴格也就不足為奇了。
作為一名前端開發人員,JavaScript是前端三劍客之一 ,您需要對這門語言及其怪癖有深入的了解。 然而,即使是有一定經驗的開發人員,也會有一些常見問題難倒他們。
在今天這篇文章中,我們將分享幾個很常見的 JavaScript 面試題,并提供通俗易懂的解釋和代碼示例。
1、null 和 undefined 有什么區別?
這是一個經典的 JavaScript 問題,經常讓開發人員措手不及。 Null 和 undefined 都是用于表示值缺失的 JavaScript 數據類型。 但是,它們的含義不同。 undefined 表示一個變量已經被聲明,但是還沒有被賦值。 另一方面,Null 是表示無值或空值的賦值。
代碼示例:
let a;
console.log(a); // Output: undefined
let b = null;
console.log(b); // Output: null
2、JavaScript 中的hoisting是什么?
Hoisting是一種 JavaScript 機制,其中變量和函數聲明在代碼執行之前被移動到其作用域的頂部。 這意味著您可以在變量或函數聲明之前使用它。
代碼示例:
console.log(a); // Output: undefined
var a = 10;
The above code is equivalent to the following code:
var a;
console.log(a); // Output: undefined
a = 10;
3、JavaScript 中的閉包是什么?
閉包是一個可以訪問外部函數變量的函數,即使在外部函數返回之后也是如此。 這是可能的,因為內部函數引用了外部函數的變量。 代碼示例:
function outer() {
let a = 10;
function inner() {
console.log(a);
}
return inner;
}
let innerFunc = outer();
innerFunc(); // Output: 10
4、JavaScript 中的同步代碼和異步代碼有什么區別?
同步代碼按順序執行,一個接一個。 異步代碼是亂序執行的,一些代碼在后臺運行,而其余代碼繼續執行。
代碼示例:
// Synchronous code:
console.log('Start');
console.log('Middle');
console.log('End');
// Output:
// Start
// Middle
// End
// Asynchronous code:
console.log('Start');
setTimeout(() => {
console.log('Middle');
}, 1000);
console.log('End');
// Output:
// Start
// End
// Middle
5、JavaScript 中的事件冒泡是什么?
事件冒泡是一種在子元素上觸發的事件也會在其父元素上觸發的現象。 這是因為事件從子元素“冒泡”到它的父元素。
代碼示例:
HTML:
<div id="parent">
<div id="child">
Click me
</div>
</div>
JavaScript:
let parent = document.querySelector('#parent');
let child = document.querySelector('#child');
child.addEventListener('click', () => {
console.log('Child clicked');
});
parent.addEventListener('click', () => {
console.log('Parent clicked');
});
// Output:
// Child clicked
// Parent clicked
6、let、const 和 var 之間有什么區別?
Let、const 和 var 都用于在 JavaScript 中聲明變量,但它們的作用域和hoisting行為不同。
Var 聲明被提升到其范圍的頂部,而 let 和 const 聲明則不是。
Const 聲明一旦聲明就不能重新賦值,而 let 和 var 聲明可以重新賦值。
代碼示例:
var a = 10;
let b = 20;
const c = 30;
function example() {
console.log(a); // Output: undefined
console.log(b); // Output: ReferenceError: b is not defined
console.log(c); // Output: 30
var a = 1;
let b = 2;
const c = 3;
}
example();
console.log(a); // Output: 10
console.log(b); // Output: ReferenceError: b is not defined
console.log(c); // Output: ReferenceError: c is not defined
7、== 和 === 運算符有什么區別?
== 運算符檢查操作數是否相等,但如果操作數是不同類型,它會執行類型強制轉換。 另一方面, === 運算符檢查操作數是否相等且類型相同。
代碼示例:
console.log(1 == '1'); // Output: true
console.log(1 === '1'); // Output: false
8、JavaScript 中的函數聲明和函數表達式有什么區別?
函數聲明是聲明為語句的函數,其作用域的頂部。函數表達式是分配給變量的函數。
代碼示例:
函數聲明:
function sayHello() {
console.log('Hello');
}
sayHello(); // Output: Hello
函數表達式:
let sayHi = function() {
console.log('Hi');
};
sayHi(); // Output: Hi
總之,理解這些 JavaScript 概念并能夠在面試中解釋它們對于找到一份 JavaScript 開發人員的工作至關重要。
通過掌握這些概念并練習您的編碼技能,您可以增加在競爭激烈的就業市場中取得成功的機會。