JavaScript 作為松散類型語言，掌握類型檢測規則、DOM 元素獲取方式及事件處理邏輯，是寫出健壯代碼的基礎。本文系統梳理 JS 高頻基礎知識點，結合實戰場景解析原理與用法，幫你建立清晰的知識框架。
一、JS 數據類型與類型檢測（typeof 運算符）
1. 數據類型分類
JS 共 6 種數據類型，分為“基本類型”和“引用類型”，面試回答需準確區分：
- 5 種基本數據類型：Number（數字）、String（字符串）、Boolean（布爾）、Undefined（未定義）、Null（空值）
- 1 種引用類型：Object（對象，包含 Array 數組、Function 函數、Date 日期等）
2. typeof 運算符：檢測類型的核心工具
typeof 是檢測變量類型的常用運算符，返回值是表示類型的字符串（共 6 種可能），需牢記其檢測規則與特殊情況：
| 變量定義 | typeof 檢測結果 | 關鍵說明 |
|---|---|---|
var x = 1; | “number” | 所有數字（整數、浮點數）均返回 “number” |
var str = "abc"; | “string” | 字符串字面量或 new String() 均返回 “string” |
var isTrue = true; | “boolean” | 布爾值 true/false 均返回 “boolean” |
var a;（未賦值） | “undefined” | 變量聲明未賦值，或直接使用 undefined，均返回 “undefined” |
var b = null; | “object” | 特殊情況：null 是“空對象引用”，typeof 檢測返回 “object” |
var obj = new Object(); | “object” | 所有對象（含數組、普通對象）均返回 “object” |
var arr = [1,2,3]; | “object” | 數組本質是 Object 子類，typeof 檢測仍返回 “object” |
var fn = function(){}; | “function” | 特殊情況：函數雖屬于引用類型，但 typeof 單獨返回 “function”（可理解為 Object 的特殊子類型） |
關鍵記憶點
- 變量未賦值時，typeof 必返回 “undefined”；
- 只要是對象（含數組、null），typeof 基本返回 “object”，唯一例外是函數返回 “function”。
二、遍歷方式：數組與對象的 2 種核心遍歷
JS 中遍歷主要依賴 for 循環和 for...in（常稱“forEach 式遍歷”），需根據遍歷目標選擇對應方式：
1. for 循環：適合數組遍歷
核心場景：遍歷數組（需通過索引訪問元素），或需要精確控制遍歷順序、終止條件的場景。
語法示例：
var arr = [1, 2, 3];
// i 為索引，從 0 開始，小于數組長度（避免越界）
for (var i = 0; i < arr.length; i++) {console.log(arr[i]); // 依次打印：1、2、3
}
2. for…in 循環：適合對象遍歷
核心場景：遍歷對象的屬性（獲取屬性名與屬性值），也可用于數組（但不推薦，因可能遍歷到原型鏈屬性）。
語法示例：
var obj = { name: "張三", age: 20 };
// key 為對象的屬性名（字符串類型）
for (var key in obj) {console.log(key + ": " + obj[key]); // 依次打印：name: 張三、age: 20
}
關鍵區別
| 遍歷方式 | 適用目標 | 訪問方式 | 注意事項 |
|---|---|---|---|
| for 循環 | 數組 | 數組[索引] | 需控制索引范圍，避免越界 |
| for…in | 對象 | 對象[屬性名] | 遍歷對象時，需注意過濾原型鏈屬性（可用 obj.hasOwnProperty(key)） |
三、DOM 操作：元素獲取與屬性設置
DOM（文檔對象模型）是 JS 操作 HTML 的橋梁，核心是“獲取元素”與“操作元素”，需熟練掌握選擇器與屬性設置規則。
1. 元素獲取：querySelector/querySelectorAll 萬能方案
這兩個方法是現代 JS 推薦的元素獲取方式，可替代 ID 選擇器、類選擇器、標簽選擇器等所有傳統方式，語法靈活：
| 選擇器語法 | 作用 | 示例 | 返回結果 |
|---|---|---|---|
#id | 獲取指定 ID 的元素 | document.querySelector("#btn") | 單個元素（若有多個相同 ID，只返回第一個） |
.class | 獲取指定類名的所有元素 | document.querySelectorAll(".box") | 元素集合（類數組，需遍歷訪問） |
標簽名 | 獲取指定標簽的所有元素 | document.querySelectorAll("div") | 元素集合（類似標簽選擇器） |
[name="xxx"] | 獲取指定 name 屬性的元素 | document.querySelectorAll('[name="sex"]') | 元素集合（常用于單選框、復選框） |
實戰示例：
// 1. 獲取 ID 為 "btn" 的按鈕（單個元素）
var btn = document.querySelector("#btn");// 2. 獲取類名為 "box" 的所有元素（集合，需遍歷）
var boxes = document.querySelectorAll(".box");
for (var i = 0; i < boxes.length; i++) {console.log(boxes[i].innerHTML); // 打印每個 .box 元素的內容
}// 3. 獲取 name 為 "sex" 的單選框（常用于表單）
var radios = document.querySelectorAll('[name="sex"]');
for (var i = 0; i < radios.length; i++) {if (radios[i].checked) { // checked 為 true 表示選中console.log("選中的性別：" + radios[i].value);}
}
2. 元素屬性設置：核心屬性與注意事項
操作元素屬性時，需注意 JS 關鍵字與 HTML 屬性的對應關系：
| HTML 屬性 | JS 中對應寫法 | 作用 | 示例 |
|---|---|---|---|
| class | className | 設置元素的類名（因 class 是 JS 關鍵字，需用 className 替代） | box.className = "active"; |
| innerHTML | innerHTML | 設置/獲取元素的 HTML 內容（含標簽） | div.innerHTML = "<p>新內容</p>"; |
| value | value | 設置/獲取表單元素（輸入框、單選框等）的值 | input.value = "默認值"; |
| checked | checked | 設置/判斷單選框、復選框是否選中 | radio.checked = true;（設為選中） |
關鍵提醒：盡量避免“DOM 嵌入”（即直接在 HTML 標簽中寫 onclick="xxx()"），這種方式會導致 HTML 與 JS 緊密耦合，不利于維護。
四、事件處理：綁定方式與事件冒泡
事件處理是交互邏輯的核心，需掌握不同綁定方式的區別，以及事件冒泡的原理與控制。
1. 事件綁定的 2 種方式：覆蓋 vs 多播
方式 1：onclick 直接綁定（會覆蓋）
特點：同一元素多次綁定同一事件，后綁定的會覆蓋前綁定的，最終只有最后一個事件生效。
示例：
var btn = document.querySelector("#btn");
// 第一個事件：被覆蓋，不生效
btn.onclick = function() {alert("第一個點擊事件");
};
// 第二個事件：覆蓋第一個，最終生效
btn.onclick = function() {alert("第二個點擊事件");
};
方式 2：addEventListener 綁定（多播，不覆蓋）
特點：同一元素多次綁定同一事件，所有事件按綁定順序依次執行，不會覆蓋（稱為“多播事件委托”）。
示例：
var btn = document.querySelector("#btn");
// 第一個事件：正常執行
btn.addEventListener("click", function() {alert("第一個點擊事件");
});
// 第二個事件：在第一個之后執行
btn.addEventListener("click", function() {alert("第二個點擊事件");
});
2. 事件冒泡：從子元素到父元素的事件傳播
原理
當元素觸發事件（如點擊）時，事件會從“最內層子元素”向“最外層父元素”逐級傳播，這一過程稱為“事件冒泡”。
示例場景：div 包裹 form，form 包裹按鈕，三者均綁定點擊事件：
<div id="parent"><form id="child"><button id="btn">點擊</button></form>
</div><script>
window.onload = function() {// 按鈕點擊事件（最內層）document.querySelector("#btn").addEventListener("click", function() {alert("按鈕事件");});// form 點擊事件（中間層）document.querySelector("#child").addEventListener("click", function() {alert("form 事件");});// div 點擊事件（最外層）document.querySelector("#parent").addEventListener("click", function() {alert("div 事件");});
};
</script>
執行順序：點擊按鈕后，依次彈出“按鈕事件”→“form 事件”→“div 事件”（從內到外傳播）。
阻止事件冒泡
若需避免父元素事件觸發，可通過事件對象的 stopPropagation() 方法阻止冒泡：
document.querySelector("#btn").addEventListener("click", function(e) {alert("按鈕事件");e.stopPropagation(); // 阻止事件向上傳播，父元素事件不再執行
});
五、JSON 轉換：字符串與 JS 對象的互轉
JSON 是前后端數據交互的常用格式，需掌握“字符串轉對象”和“對象轉字符串”的核心方法：
1. 字符串轉 JS 對象（解析）
將 JSON 格式的字符串（值類型）轉為 JS 對象（引用類型），才能訪問其屬性（如 pwd、act），有 2 種常用方法：
| 方法 | 語法 | 說明 |
|---|---|---|
| JSON.parse() | JSON.parse(jsonStr) | 推薦方法，安全且高效，專門用于解析 JSON 字符串 |
| eval() | eval('(' + jsonStr + ')') | 不推薦，eval 會執行字符串中的任意代碼，有安全風險 |
示例：
// JSON 格式的字符串（值類型，無法直接訪問屬性）
var jsonStr = '{"act":"admin","pwd":"123456"}';// 1. JSON.parse() 解析（推薦）
var obj1 = JSON.parse(jsonStr);
console.log(obj1.act); // 打印：admin（可正常訪問屬性）// 2. eval() 解析（不推薦）
var obj2 = eval('(' + jsonStr + ')');
console.log(obj2.pwd); // 打印：123456
2. JS 對象轉字符串（序列化）
將 JS 對象（引用類型）轉為 JSON 字符串（值類型），用于數據傳輸（如接口請求），使用 JSON.stringify() 方法：
// JS 對象（引用類型）
var user = { name: "張三", age: 20 };// 轉為 JSON 字符串
var jsonStr = JSON.stringify(user);
console.log(jsonStr); // 打印：{"name":"張三","age":20}（字符串類型）
六、核心注意事項：避免踩坑的關鍵規則
- JS 代碼需寫在 window.onload 中：確保 HTML 元素加載完成后再執行 JS，避免因元素未存在導致的報錯；
- typeof 檢測 null 為 object：這是 JS 設計遺留問題，需特殊記憶，判斷 null 應直接用
變量 === null； - for…in 遍歷對象需過濾原型屬性：若不想遍歷對象原型鏈上的屬性，需加判斷
if (obj.hasOwnProperty(key))； - 事件綁定優先用 addEventListener：避免 onclick 綁定的覆蓋問題，且支持事件捕獲/冒泡的控制。
掌握以上知識點，可應對 JS 基礎開發與面試中的大部分場景。建議結合實戰代碼手動練習，尤其是 DOM 操作與事件處理，通過“寫代碼→調試→優化”的流程強化理解，避免只記理論不落地。
![[論文筆記] WiscKey: Separating Keys from Values in SSD-Conscious Storage](http://pic.xiahunao.cn/[論文筆記] WiscKey: Separating Keys from Values in SSD-Conscious Storage)
![week1-[循環嵌套]畫正方形](http://pic.xiahunao.cn/week1-[循環嵌套]畫正方形)
