一個白一個反：詳解前端面試中的常見問題

在前端面試中，我們常會被問到一些與“一個白一個反”有關的問題。這些問題涉及CSS、JavaScript等方面，本文將從多個方面進行詳細的闡述。

一、選擇器

選擇器是 CSS 中最基礎的概念之一，也是所有前端開發人員必須掌握的知識。

首先，我們需要了解不同類型的選擇器，包括：

• 標籤選擇器
• ID選擇器
• 類選擇器
• 屬性選擇器
• 偽類選擇器
• 後代選擇器
• 子元素選擇器
• 通用選擇器

可以通過以下代碼實現不同類型的選擇器：

/* 標籤選擇器 */
p {
    font-size: 16px;
}
/* ID選擇器 */
#myElement {
    color: red;
}
/* 類選擇器 */
.myClass {
    font-weight: bold;
}
/* 屬性選擇器 */
[type="submit"] {
    background-color: blue;
}
/* 偽類選擇器 */
a:hover {
    text-decoration: underline;
}
/* 後代選擇器 */
ul li {
    margin-left: 20px;
}
/* 子元素選擇器 */
ul>li {
    font-size: 18px;
}
/* 通用選擇器 */
* {
    box-sizing: border-box;
}

其次，我們需要了解選擇器的優先級規則：

• !important
• 行內樣式
• ID選擇器
• 類選擇器、屬性選擇器、偽類選擇器
• 標籤選擇器、偽元素選擇器
• 通用選擇器

可以通過以下代碼增加選擇器的優先級：

/* 增加選擇器優先級 */
.myClass {
    font-weight: bold !important;
}
#myElement {
    color: red !important;
}

二、盒模型

在前端開發中，盒模型是一個非常重要的概念。

在 CSS 中，盒模型指的是一個 HTML 元素的大小包括元素的內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)等。

我們可以通過以下代碼設置元素的盒模型屬性：

/* 計算盒模型大小時包括元素的邊框和內邊距 */
.box {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}
/* 計算盒模型大小時不包括元素的邊框和內邊距 */
.box-2 {
    box-sizing: content-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

三、事件委託

事件委託是前端開發中的一種優化方法，可以減少 DOM 操作次數，提高頁面性能。

簡單來說，就是把事件綁定在父元素上，讓子元素觸發時冒泡至父元素，從而執行相應的操作。

可以通過以下代碼實現事件委託：

const parentElement = document.getElementById("parentElement");

parentElement.addEventListener("click", function(event) {
  if (event.target.matches("button")) {
    // do something
  }
});

四、this 關鍵字

this 關鍵字在 JavaScript 中非常重要，它指向當前執行上下文的對象。

在全局作用域下，this 指向 window 對象；在函數中，this 的指向取決於函數的執行方式。

可以通過以下代碼演示 this 的用法：

const obj = {
    name: "Alice",
    getName: function() {
        return this.name;
    }
};

const name = obj.getName(); // 返回 "Alice"

五、閉包

在 JavaScript 中，閉包是常見的一種概念。

簡單來說，閉包就是一個包含自由變量的函數。自由變量是指在函數中使用的變量，但既不是函數參數也不是函數的局部變量。

可以通過以下代碼演示閉包的用法：

function multiplier(factor) {
    return function(number) {
        return number * factor;
    }
}

const twice = multiplier(2);
const result = twice(5); // 返回 10

六、Promise

Promise 是 JavaScript 中 處理異步操作的一種方法。它允許我們以更易於理解和優雅的方式編寫異步代碼。

下面是一個簡單的返回 Promise 對象的函數：

function asyncFunction() {
    return new Promise((resolve, reject) => {
        // 異步操作
        if (/* 操作成功 */) {
            resolve("操作成功");
        } else {
            reject("操作失敗");
        }
    });
}

asyncFunction()
    .then(result => console.log(result))
    .catch(error => console.log(error));

以上是本文針對前端面試中常見問題“一個白一個反”進行的詳細闡述。希望可以幫助到前端開發人員更好地掌握這些基礎知識。