很多人學完 JavaScript 基礎(chǔ)語法之后都會卡在同一個地方變量、分支、循環(huán)、函數(shù)都認識了但一打開編輯器面對一個空蕩蕩的頁面就是不知道從哪兒開始寫代碼。你正在看的這篇“js學習二”就是為這個階段準備的。它不打算把var、if、for再講一遍而是要帶你跨過那條從“看得懂”到“寫得出”的溝用一套待辦事項頁面把第二階段真正需要掌握的知識點串起來數(shù)組高階方法、模板字符串、解構(gòu)賦值、Promise、async/await、DOM 操作、本地存儲。學完這一輪你至少能獨立寫出一個能交互、能保存數(shù)據(jù)的真實頁面。適合剛啃完基礎(chǔ)語法想動手做項目的同學也適合學了一遍但發(fā)現(xiàn)自己只會跟著教程敲代碼、脫離教程就斷片的人?；仡櫸易约旱膶W習路徑其實第二階段才是最容易放棄的階段。語法糖太多概念太抽象再加上異步編程和 DOM 操作摻在一起很多人學到這里就開始懷疑自己是不是不適合寫代碼。這篇文章就是想幫你把這一程盡量走得順一點我會直接告訴你哪些東西必須弄懂、哪些東西可以先跳過以及我在實際項目里踩過的那些坑。1. 整體設計為什么第二階段要圍繞小項目展開1.1 第二階段真正的“知識地圖”如果第一階段是學說話那第二階段就是學寫短文。你需要的不再是零散的單詞而是把這些單詞組織成有意義句子的能力。具體到 JavaScript 里第二階段的知識點可以分成四個維度語法層面模板字符串、解構(gòu)賦值、擴展運算符、箭頭函數(shù)、let/const與作用域。數(shù)據(jù)層面數(shù)組的map、filter、find、reduce對象的拷貝與合并JSON 序列化。異步層面回調(diào)函數(shù)、Promise、async/await、事件循環(huán)的基礎(chǔ)認知。頁面層面DOM 查詢、事件監(jiān)聽、動態(tài)渲染、本地存儲。這四個維度不是并列的而是一層層往上疊的。語法是地基數(shù)據(jù)處理是日?；町惒绞抢@不過去的坎頁面操作是最終目的。很多教程喜歡把每個點單獨拎出來講結(jié)果就是你學完map會做題但不知道自己為什么要用它。所以我更推薦用項目把這張地圖走一遍。1.2 為什么選“待辦事項”這個項目選待辦事項是因為它小但五臟俱全。一個最簡單的待辦事項頁面至少包含這些功能輸入新事項、渲染事項列表、刪除事項、篩選已完成和未完成。這些東西背后對應的是事件監(jiān)聽、數(shù)組增刪、遍歷渲染、條件判斷。再加一個localStorage持久化就覆蓋了“數(shù)據(jù)從哪來、怎么改、怎么存、怎么再顯示”的完整鏈路。有人可能會說待辦事項太老套了能不能換個新奇的。我的看法是學習項目最重要的是教學密度不是外觀。你做一個視頻卡片列表、做一個記賬本核心邏輯和待辦事項幾乎一模一樣都是“數(shù)據(jù) 渲染 交互”。與其糾結(jié)項目夠不夠酷不如先把這條通用鏈路跑通。等你寫過一個完整的待辦事項再去做其他頁面就會發(fā)現(xiàn)80% 的代碼邏輯是可以平移的。2. 核心 API 與語法細節(jié)寫項目時真正高頻的語法2.1 數(shù)組高階方法代碼從“怎么遍歷”變成“要什么數(shù)據(jù)”初學者最常見的習慣是拿到一個數(shù)組就for循環(huán)循環(huán)里再塞if一個函數(shù)寫完十行起步邏輯還容易繞暈。第二階段你要做的第一個改變就是把“怎么寫循環(huán)”的思維切換成“我要得到什么結(jié)果”。假設我們有一個購物清單const items [ { name: 蘋果, price: 5, done: true }, { name: 牛奶, price: 12, done: false }, { name: 面包, price: 15, done: true }, ];如果我只想要還沒買的東西用for循環(huán)寫是這樣的const undone []; for (let i 0; i items.length; i) { if (!items[i].done) { undone.push(items[i]); } }用filter寫const undone items.filter(item !item.done);同樣的效果代碼短了一半而且一眼就能看出意圖過濾出未完成的項。filter的規(guī)則很簡單回調(diào)函數(shù)返回true這一項就保留返回false就丟掉。再看map。它的作用是“數(shù)組里每一項都會進過一個加工然后組成一個新的數(shù)組”。想拿到所有商品名字的數(shù)組const names items.map(item item.name); // [蘋果, 牛奶, 面包]在處理待辦事項的文案、拼列表結(jié)構(gòu)的時候map是絕對的主力。你可能會看到有人把map和forEach放在一起比較。區(qū)別是forEach不產(chǎn)生新數(shù)組只負責“做一遍事情”比如把每一項打印出來而map會返回一個新數(shù)組。新手容易犯的錯就是在forEach里寫return然后困惑為什么拿不到值因為forEach根本不會把返回值收集起來。find則用來找“第一個符合條件的項”。比如我根據(jù) ID 找到一條待辦事項const target items.find(item item.id 2);它和filter的區(qū)別在于find找到第一個就停返回的是那一個對象filter會一直遍歷完整個數(shù)組返回一個數(shù)組。以后做刪除功能時find通常配合splice使用或者直接用filter生成一個沒有目標項的新數(shù)組。reduce我先不多鋪開因為它對新手不夠友好。但你可以先記住它的用途把整個數(shù)組“累積”成一個值比如求和const total items.reduce((sum, item) sum item.price, 0); // 32在寫項目初期map、filter、find這三個已經(jīng)能覆蓋絕大多數(shù)場景。reduce可以等你對回調(diào)函數(shù)很熟練了再回頭看它不會跑。2.2 模板字符串與解構(gòu)賦值讓代碼讀起來像人話模板字符串就是反引號字符串最大的價值是結(jié)束了那個用拼接字符串的黑暗時代。以前寫列表項// 拼接字符串 li item.name - item.price 元/li用模板字符串li${item.name} - ${item.price}元/li看起來只是少打幾個引號但當你需要拼接的變量變多、甚至要拼一個完整 HTML 結(jié)構(gòu)時模板字符串的可讀性優(yōu)勢就非常明顯了。它不是那種“最好知道一下”的語法而是“不知道會很痛苦”的語法。解構(gòu)賦值解決的是取值的問題。以前要從對象里取三個字段要寫三行const name item.name; const price item.price; const done item.done;解構(gòu)一行搞定const { name, price, done } item;數(shù)組也能解構(gòu)比如交換兩個變量的值不用再建臨時變量let a 1; let b 2; [a, b] [b, a];解構(gòu)和模板字符串沒有高深的理論它們的作用就是減少重復讓代碼更短、更清晰。很多人寫了幾年代碼回看剛學時的寫法都會覺得舊代碼像裹腳布主要就是這兩樣帶來的改變。2.3 箭頭函數(shù)與 this 的邊界箭頭函數(shù)最直觀的好處是短。items.map(item item.name)比常規(guī)寫法省了function、return這些詞。但更重要的是它沒有自己的this箭頭函數(shù)里的this指向定義它時所在的作用域。這件事既是方便也是陷阱。方便在事件處理和定時器里你可以直接訪問到外層對象的屬性。陷阱在于如果你指望通過bind或者apply改變箭頭函數(shù)的this那是做不到的。舉一個例子const counter { count: 0, start() { setInterval(() { this.count; console.log(this.count); }, 1000); }, };這里的this指向counter因為箭頭函數(shù)在定義時就“捕獲”了外層this。如果換成普通函數(shù)這里的this就是window訪問this.count會得到undefined。很多同學在寫定時器、事件回調(diào)的時候遇到this不對的問題大概率就是在這個地方?jīng)]拎清楚。我的建議是先記住箭頭函數(shù)“沒有自己的 this”這句話用的時候多留個心眼。3. 異步編程第二階段最抽象的攔路虎3.1 先理解為什么需要 PromiseJavaScript 的異步場景到處都有請求接口、讀取本地數(shù)據(jù)、定時器、動畫。你寫代碼的時候沒辦法讓程序停下來等數(shù)據(jù)返回只能告訴它“等數(shù)據(jù)回來了再處理”。這個“等數(shù)據(jù)回來了再處理”就是回調(diào)函數(shù)。但回調(diào)函數(shù)嵌套多了以后代碼會變得非常難看形成了所謂的“回調(diào)地獄”// 偽代碼 getData(function (a) { getMoreData(a, function (b) { getMoreData(b, function (c) { console.log(c); }); }); });Promise 不是要通過復雜的概念消滅回調(diào)而是提供一種更規(guī)范、更扁平的寫法。簡單理解Promise 是一個表示“未來結(jié)果”的對象。它有三種狀態(tài)pending等待中、fulfilled已成功、rejected已失敗。狀態(tài)一旦從等待變?yōu)槌晒蚴【筒粫俑淖?。?Promise 改寫上面的結(jié)構(gòu)getData() .then(a getMoreData(a)) .then(b getMoreData(b)) .then(c console.log(c)) .catch(err console.error(err));代碼變成了一條鏈邏輯順序從上到下一目了然。3.2 做一個模擬異步加載的例子我們用代碼演示一下。假設我們要從一組數(shù)據(jù)里隨機返回一條文案但為了模擬網(wǎng)絡延遲我們加了一個定時器function fetchRandomItem() { return new Promise((resolve, reject) { setTimeout(() { const items [寫文章, 讀代碼, 整理筆記]; const randomIndex Math.floor(Math.random() * items.length); resolve(items[randomIndex]); }, 1000); }); }用的時候fetchRandomItem() .then(item { console.log(今天要做 item); }) .catch(err { console.log(出錯了, err); });注意new Promise的回調(diào)里有兩個參數(shù)resolve和reject。成功的時候調(diào)用resolve(value)失敗的時候調(diào)用reject(error)。resolve傳出去的值會進入.then的第一個參數(shù)回調(diào)reject傳出去的錯誤會進入.catch。如果 Promise 執(zhí)行過程中拋出異常也會被.catch捕獲這一點在實戰(zhàn)中非常有用。3.3 async/await用同步的寫法去寫異步async/await是更進一步的語法糖。await會暫停函數(shù)內(nèi)的代碼直到它后面的 Promise 出結(jié)果。但有個前提await只能在async函數(shù)里使用。async function showItem() { try { const item await fetchRandomItem(); console.log(今天要做 item); } catch (err) { console.log(出錯了, err); } }用async/await再配合try/catch代碼讀起來就跟同步代碼一樣了沒有回調(diào)嵌套也沒有.then鏈。在實際項目里我大部分時候都用async/await只有在需要多個互不依賴的 Promise 并行執(zhí)行時才會專門用Promise.all。有一個細節(jié)提醒一下await后面如果跟的不是 Promise而是一個普通值JavaScript 會直接把這個值返回相當于幫你做了一次“包裝拓展”。所以寫await someValue是不報錯的但沒什么意義除非你確定那個值可能是 Promise。異步編程是初學者最容易卡住的地方。你說難吧它其實就是“等”和“拿”兩個動作說不難吧this、作用域、執(zhí)行順序交織在一起真的很繞。我自己的經(jīng)驗是不要一開始就糾結(jié)事件循環(huán)的底層細節(jié)先會用new Promise包一層模擬請求會用async/await拿到結(jié)果等你寫的異步代碼多了再反過頭看事件循環(huán)一切就自然通了。4. 從腳本到頁面DOM 操作的完整實戰(zhàn)4.1 獲取元素與事件監(jiān)聽讓頁面開始響應前面講了很多語法和邏輯層面的東西但它們最終都得落到頁面上。頁面上的每個按鈕、輸入框、列表在 JavaScript 里都對應一個 DOM 節(jié)點。你操作 DOM頁面就會變化。獲取元素最常見的方式是document.getElementById和document.querySelector。它們各有優(yōu)勢const input document.getElementById(todo-input); const list document.querySelector(.todo-list); const addBtn document.querySelector(#add-btn);querySelector的能力更強能像 CSS 選擇器一樣精確定位元素但性能上不如getElementById。在待辦事項這種小頁面里用哪個都行我更推薦querySelector因為它的規(guī)則統(tǒng)一后期維護方便。綁定事件監(jiān)聽addBtn.addEventListener(click, function () { const value input.value.trim(); if (!value) return; // 空內(nèi)容直接忽略 addTodo(value); input.value ; });這里有一個關(guān)鍵點input.value必須在事件觸發(fā)時去取不能放在事件綁定之前取。很多新手會這樣寫// 錯誤示范 const value input.value.trim(); addBtn.addEventListener(click, function () { addTodo(value); });頁面加載的時候用戶還沒輸入任何內(nèi)容value就已經(jīng)被讀出來了后面點擊按鈕使用的全是空字符串。這個錯誤很隱蔽因為它沒有任何報錯你就是發(fā)現(xiàn)點了按鈕沒反應?？刂婆_打印一下value就能看出來問題難的是你要意識到“取值時機”這件事。4.2 渲染列表數(shù)據(jù)和頁面之間的橋梁渲染的本質(zhì)就是把數(shù)組變成 HTML 字符串再放進頁面的某個容器里。我用一個函數(shù)來完成這件事function render() { list.innerHTML todos.map(item { const cls item.done ? done : ; return li class${cls}>list.addEventListener(click, function (e) { if (!e.target.classList.contains(del-btn)) return; const id Number(e.target.closest(li).dataset.id); todos todos.filter(todo todo.id ! id); render(); });當用戶點擊刪除按鈕時事件會冒泡到list在list的監(jiān)聽函數(shù)里判斷點擊的目標是否是.del-btn。如果是就通過closest(li)找到對應的列表項再通過>function save() { localStorage.setItem(my-todos, JSON.stringify(todos)); } function load() { const saved localStorage.getItem(my-todos); return saved ? JSON.parse(saved) : []; }一個常見的坑是用戶第一次打開頁面時localStorage里還沒有數(shù)據(jù)getItem返回的是null直接JSON.parse(null)會得到null而不是數(shù)組。如果你不做保護后面所有針對數(shù)組的操作都會報錯。所以我在load函數(shù)里做了判斷有保存的數(shù)據(jù)才解析沒有就返回空數(shù)組。在對待辦事項做增刪改的時候每次操作完都要記得調(diào)用save()不然頁面顯示正常一刷新就回到了舊狀態(tài)。這里我推薦一個做法所有修改todos的邏輯集中在一個地方處理然后在每個修改動作末尾統(tǒng)一save()和render()。不要滿屏幕亂調(diào)否則排查問題的時候你會找不到數(shù)據(jù)到底是在哪一步被改壞的。5. 常見問題與排查思路這些坑我替你踩過了這一節(jié)我整理幾個初學者在寫這種項目時最容易碰到的報錯和現(xiàn)象每條都附上排除思路。5.1document.getElementById獲取到null原因腳本放在 HTML 里需要操作的按鈕、輸入框之前執(zhí)行了。瀏覽器從上往下解析頁面如果 JavaScript 寫在head里此時下面的 DOM 還沒被解析出來自然拿不到。解決把script放到/body之前DOM 解析完再執(zhí)行 JS。或者把邏輯包在DOMContentLoaded事件里。也可以用defer屬性延遲腳本執(zhí)行。5.2 數(shù)據(jù)改動后頁面沒有刷新這是最高頻的問題。比如todos.push(newTodo)之后頁面上沒出現(xiàn)新條目。原因很可能只是因為你忘了調(diào)用render()。記住一點JavaScript 操作數(shù)組后頁面不會自動更新必須手動把最新的數(shù)據(jù)渲染到 DOM 上。我把“數(shù)據(jù) → 渲染”看作一條流水線每次改完數(shù)據(jù)都要問自己一句渲染函數(shù)調(diào)用了嗎5.3filter之后數(shù)組沒有變兩種情況。第一種是沒接住返回值寫了todos.filter(...)就以為todos變了但filter不會修改原數(shù)組它返回的是新數(shù)組必須賦值回去todos todos.filter(...)。第二種是數(shù)組是用const聲明的賦值回去會報錯。解決方案是把todos用let聲明或者干脆把新的數(shù)組賦值給一個新變量再使用。5.4 點擊刪除按鈕結(jié)果整條列表都沒了常見原因是innerHTML渲染出的按鈕沒有綁定事件然后你把事件綁在了按鈕上刷新后按鈕重新生成事件丟失?；蛘呤窃谑录欣锱袛鄺l件寫得不對導致所有點擊都走到了刪除邏輯。排查時先打印一下e.target看看點擊的時候到底點到了什么再逐步檢查條件判斷。5.5async/await報錯偏向語法解析如果你在普通函數(shù)里寫await控制臺會報錯因為await只能在async函數(shù)里用。解決方法在函數(shù)前面加上async關(guān)鍵字。另外async函數(shù)返回的是一個 Promise如果你在async函數(shù)外面直接拿返回值會拿到 Promise 而不是你想要的數(shù)據(jù)。// 錯誤示范 const result showItem(); // 這是一個 Promise不是結(jié)果 // 正確做法 async function init() { await showItem(); }5.6map結(jié)果里存的不是列表而是一堆逗號如果你不小心把map返回的數(shù)組直接放進了innerHTML頁面會顯示成“a,b,c”。因為數(shù)組會被強制轉(zhuǎn)成字符串元素之間用逗號隔開。記得先.join()把數(shù)組變成干凈的字符串。5.7 控制臺看不到任何報錯但頁面就是不動這個可以說最棘手。我的建議是先檢查事件是否綁定成功再檢查數(shù)據(jù)有沒有改變最后檢查渲染是否執(zhí)行。三個環(huán)節(jié)里總有一個斷了。在瀏覽器控制臺里打斷點或者加console.log一步一步查。很多新手不愛打日志喜歡盯著代碼空想這是效率最低的調(diào)試方式。你在addEventListener里、在render函數(shù)的開頭、在.filter之后各打一行日志報錯的定位往往幾十秒就能完成。5.8 頁面初始化時舊數(shù)據(jù)和新數(shù)據(jù)混在一起這通常是因為你沒有在初始化時先load()再render()。正確順序是頁面加載 → 從localStorage讀出數(shù)據(jù) → 賦給todos→ 調(diào)用渲染。如果你初始化時直接用了一個空數(shù)組那刷新后讀出來的舊數(shù)據(jù)自然就沒了。寫在后面一點學習上的體會如果讓我給這個階段的學習者一個建議那就是不要光看一定要動手把這個待辦事項項目從頭到尾寫出來。寫不出來就去參考別人的代碼理解每一行的作用然后合上參考自己再寫一遍。我見過很多同學刷完教程式視頻后覺得自己全會了一旦關(guān)掉視頻連一個按鈕點擊都寫不出來。差別就在于有沒有親手把邏輯從頭構(gòu)造一遍。寫的過程里報錯是家常便飯。別慌也別急著復制代碼。先看報錯信息猜一下它出現(xiàn)在哪個環(huán)節(jié)然后打日志去驗證。調(diào)試得多了你才是真的在進步。等這個項目能流暢地“新增、刪除、刷新還在”之后你可以試著加一個編輯功能或者加一個按時間排序的篩選讓它變成你獨有的版本。帶著自己的問題去寫代碼比跟著任何教程寫十遍都有用。