編寫技術筆記，一般采用的都是markdown(MD)的語法：https://maxiang.io 遵循他的說明文檔去學習MD的語法 1. 前端發展史 + 了解重要的歷史節點 + 重點掌握WEB1.0~WEB3.0的進化史 + 動態頁面 + 前后端分離 + WebApp（NativeApp） + 全棧開發 + ... + 前端需要掌握的技術棧 + ECMAScript3 / ECMAScript5 / ECMAScript6（每年6月份在版本6的基礎上繼續完善一版ES7~9） 2. 瀏覽器內核分類 + webkit + gecko + trident + blink + ... 3. JS三部分 + ECMAScript 語法規范 + DOM + BOM 4. 變量和變量定義 + 變量就是起了一個名字，用來存儲（指向）或者代表某個值的（它是一個虛的東西，值才是實在的東西） + 命名規范 + 嚴格區分大小寫 + 駝峰命名法 + 基于“_、$、數字、字母” 命名，但是數字不能作為開頭 + 不能使用關鍵字和保留字 + 定義變量的幾種方式 ** + var + let + const 定義的變量，變量指向不能隨意被更改（理解為定義的是常量） + function + class + import 5. JS中的數據類型 ** + 基本數據類型（值類型 / 原始值） + number + string + boolean + null + undefined + symbol + bigint + 引用數據類型 + 對象數據類型 + {} 普通對象 + [] 數組對象 + /^$/ 正則對象 + 日期對象 + Math數學函數對象 + ... + 函數數據類型 6. 數據類型的檢測 + typeof ** + 語法 => typeof [value] + 返回值首先是字符串，其次包含對應的類型 => typeof typeof [] === "string" + typeof null === "object" + 數組、正則、普通對象的最后檢測結果都是"object"，所以基于此操作，無法細分對象 + instanceof + constructor + Object.prototype.toString.call() 7. 數字類型詳解 ** + NaN 和 isNaN + typeof NaN === "number" + NaN !== NaN + 基于isNaN檢測值是否為有效數字（檢測的值不是數字類型，需要默認基于Number()把其轉換為數字類型，然后再檢測） + 把其它數據類型轉換為數字類型 + Number([value]) + 字符串轉換為數字：空字符串是0，字符串中只要出現任意一個非有效數字字符，結果都是NaN + 布爾轉換為數字：true是1 false是0 + null變為數字0 + undefined變為數字NaN + symbol不能轉換為數字，否則會報錯 + 對象（或者函數）轉換為數字：首先都是調用toString先轉換且字符串，然后再轉換為數字 + 普通對象轉換為字符串結果都是 "[object Object]" + 數組對象轉換為字符串結果是：用逗號分隔數組中的每一項 + [] -> '' + [10] -> '10' + [10,20] -> '10,20' + 正則或者函數轉換為字符串和原始看到的內容類似 + parseInt([value]) / parseFloat([value]) + 首先把[value]值變為字符串，其次從字符串最左側開始找，把找到的有效數字字符轉換為數字，遇到一個非有效數字字符則結束查找（不論右側是否還有數字，都不在查找了） + Number(true) -> 1 + parseInt(true) -> parseInt('true') -> NaN + Number('12px') -> NaN + parseInt('12px') -> 12 +  + 一些常用的屬性方法 + 數字.toFixed(N) 保留小數點N位，返回結果是一個字符串 + Infinity 無窮大 + ... 8.字符串類型詳解 ** + 把其它數據類型轉換為字符串 + String([value]) + [value].toString() + 加號在JS中除了數學運算，還有字符串拼接 + 減乘除和取余都一定是數學運算（不是數字類型要轉換為數字類型，然后再運算） + 加號兩邊的任意一邊出現字符串，則為字符串拼接（如果加的是一個對象，其實最后也是字符串拼接，因為對象轉換為數字，是先轉換為字符串的） + 1 + '1' === '11' + 1 + [10] === 1+ '10' ->'110' + 基于ES6中的模板字符串（反引號 或者叫 兩個撇）可以方便字符串拼接 ``` //=> ${} 就是把一個變量的值或者一個JS表達式運行的結果，拼接到模板字符串中 let n=10; let str=`N的值是：${n}`; ``` 9.布爾類型詳解 ** + 把其它數據類型轉換為布爾類型 + 規律：只有“0、NaN、null、undefined、空字符串”五個值最后變為FALSE，其余都會轉換為TRUE + Boolean([value]) + ![value] 轉換為布爾再取反 + !![value] 轉換為布爾 + ---- + 在條件判斷中，最后的結果都是轉換為布爾 + ... 10.對象數據類型詳解 ** + 對象的組成：零到多組鍵值對組成的（key:value / 屬性名:屬性值），每一組之間用逗號分隔 + 關于對象鍵值對的操作（增刪改查） + 對象的屬性名不能重復 + 對象.屬性名 => 這樣操作屬性名不能是數字 + 對象[屬性名] => obj['n']和obj[n]是不一樣的，前者屬性名就是n，后者是把n變量存儲的值作為屬性名拿過來操作的（假設n是100，此時相當于obj[100]） 11.基本數據類型和引用數據類型的區別 ***** + 堆內存（HEAP）和棧內存（STACK） + 棧內存 + ECStack 執行環境棧 + EC(G) 全局執行上下文 + VO(G) 全局變量對象 + let a = 12 + 創建12這個值，存放到棧內存中（棧內存是用來執行代碼和存儲基本類型值的） + 創建變量a存儲到 VO(G) + 最后讓a指向12這個值 （=賦值的意思就是值的指向） + 堆內存 + let obj = {xxx:'xxx'} + 創建對象值（引用數據類型不能直接存儲到棧內存中） + 創建一個堆內存，有一個16進制地址（AAAFFF000） + 把對象中的鍵值對存儲到堆中 + 把堆內存的地址存放到棧內存中，供變量指向 + 創建變量obj，存儲到VO(G) + 讓obj指向堆內存的地址 AAAFFF000 + 后期obj.xxx的所有操作，都是先基于地址找到堆內存，從而來操作堆內存中的內容 12.DOM的一些操作 ** + document.getElementById + document.body + JS中獲取的元素都是對象數據類型的（有自己對應的堆內存，堆內存中存儲著很多內置的屬性和方法，這些屬性方法就是用來操作DOM元素的） + id + className + tagName + innerHTML + innerText + style = 對象 操作當前元素的“行內”樣式 + onclick + ... + context.getElementsByTagName + 獲取到的是一個“類數組”元素集合 HTMLCollection + 操作起來和數組類似（基于索引獲取某一項以及循環操作等） 13.JS中常用的操作語句 ** + 判斷語句 + if、else if、else + 三元運算符 + 語法 條件?成立:不成立; + 基于null/undefined占位 + 多個事情基于括號包起來，逗號分隔 + 三元嵌套 + switch case + 每一種case都是===判斷 + == 和 === 的區別 + 循環語句 + for循環：指定循環次數或者遍歷數組 + 四步操作 + break //結束循環 + continue //本輪循環后面不執行，然后i++;繼續執行循環 + for in循環：遍歷對象中的鍵值對的 + 優先按照從小到大遍歷數字屬性 + ... 14.JS中常用的輸出方式 + console + .log + .dir + .table + .time / .timeEnd + .warn + ... + 瀏覽器彈出窗口（輸出的結果都會變為字符串） + alert + confirm + prompt + 向頁面中輸出內容的（輸出的結果都會變為字符串） + document.write + 元素.innerHTML + 元素.innerText + ...