JavaScript 是 Web 開發的核心語言,掌握其基礎語法、數據類型、內置對象 API 是前端進階的基石。本文系統梳理 JS 基礎知識體系,適合初學者快速建立知識框架,也適合老手查漏補缺。

| 組成 | 全稱 | 核心職責 |
|---|---|---|
| ECMAScript | European Computer Manufacturers Association Script | 語法、類型、語句、關鍵字、對象等核心語言標準 |
| BOM | Browser Object Model | 瀏覽器窗口交互(window、navigator、screen、history、location) |
| DOM | Document Object Model | HTML 文檔操作(節點增刪改查、事件處理、樣式操作) |
var 變量名 = 值; // ES5 語法,函數作用域 let 變量名 = 值; // ES6 塊級作用域,可重新賦值 const 變量名 = 值; // ES6 常量,引用類型內容仍可修改
| 類型 | 說明 | 示例 |
|---|---|---|
| undefined | 聲明未賦值 | let a; |
| null | 空對象指針佔位符 | let b = null; |
| number | 整數/浮點數/NaN/Infinity | 10, 3.14, NaN |
| string | 字符串 | 'hello', "world" |
| boolean | true/false | true, false |
| symbol (ES6) | 唯一標識符 | Symbol('id') |
注意:null == undefined // true,但 null === undefined // false。
| 方法 | 作用 | 示例 |
|---|---|---|
| toLowerCase() | 轉小寫 | 'ABC'.toLowerCase() // 'abc' |
| toUpperCase() | 轉大寫 | 'abc'.toUpperCase() // 'ABC' |
| charAt(index) | 獲取指定位置字符 | 'abc'.charAt(1) // 'b' |
| indexOf(str, fromIndex) | 查找子串首次出現索引 | 'abab'.indexOf('b') // 1 |
| substring(start, end) | 截取 [start, end) 子串 | 'abcd'.substring(1,3) // 'bc' |
| split(separator) | 分割為數組 | 'a,b,c'.split(',') // ['a','b','c'] |
| trim() | 去除首尾空白 | ' a '.trim() // 'a' |
// 創建 let arr = new Array(4); // 長度 4 let arr2 = [1, 2, 3]; // 字面量(推薦) // 訪問 arr[0] = 1; arr[1] = 2; console.log(arr[0]); // 1
| 屬性/方法 | 說明 | 是否修改原數組 |
|---|---|---|
| length | 元素個數,可寫入截斷/擴展 | 是 |
| push(...items) | 尾部添加,返回新長度 | 是 |
| pop() | 刪除尾部元素,返回該元素 | 是 |
| shift() | 刪除頭部元素,返回該元素 | 是 |
| unshift(...items) | 頭部添加,返回新長度 | 是 |
| splice(start, deleteCount, ...items) | 萬能增刪改,返回刪除的元素數組 | 是 |
| slice(start, end) | 截取 [start, end) 新數組 | 否 |
| concat(...arrays) | 合併數組,返回新數組 | 否 |
| join(separator) | 轉字符串,元素用分隔符連接 | 否 |
| sort(compareFn) | 排序(默認 Unicode 碼點) | 是 |
| reverse() | 反轉數組 | 是 |
| forEach/map/filter/reduce | 函數式遍歷/轉換/過濾/聚合 | 視具體方法 |
// 函數聲明(提升)
function add(a, b) { return a + b; }
// 函數表達式(不提升)
const add = function(a, b) { return a + b; };
// 箭頭函數(ES6,無 this 綁定)
const add = (a, b) => a + b;
function fn(a = 1) {}function fn(...args) {}function fn({x, y}) {}return 表達式,無返回值默認 undefined__proto__ 尋找屬性/方法JavaScript 基礎看似簡單,實則暗藏許多坑(類型轉換、this 指向、異步機制等)。建議: