js中基礎(chǔ)知識(shí)大綱，了解記憶，總會(huì)有用到的地方

?了解重要的歷史節(jié)點(diǎn)

+ 重點(diǎn)掌握WEB1.0~WEB3.0的進(jìn)化史

? ? + 動(dòng)態(tài)頁(yè)面

? ? + 前后端分離

? ? + WebApp（NativeApp）

? ? + 全棧開發(fā)

? ? + 前端需要掌握的技術(shù)棧

? ?+ ECMAScript3 / ECMAScript5 / ECMAScript6（每年6月份在版本6的基礎(chǔ)上繼續(xù)完善一版ES7~9）

瀏覽器內(nèi)核分類

+ webkit

+ gecko

+ trident

+ blink

+ ...

JS三部分

+ ECMAScript 語法規(guī)范

+ DOM

+ BOM

變量和變量定義

+ 變量就是起了一個(gè)名字，用來存儲(chǔ)（指向）或者代表某個(gè)值的（它是一個(gè)虛的東西，值才是實(shí)在的東西）

+ 命名規(guī)范

? ? + 嚴(yán)格區(qū)分大小寫

? ? + 駝峰命名法

? ? + 基于“_、$、數(shù)字、字母” 命名，但是數(shù)字不能作為開頭

? ? + 不能使用關(guān)鍵字和保留字

?定義變量的幾種方式? **（重點(diǎn)）

+var

+let

+const定義的變量，變量指向不能隨意被更改（理解為定義的是常量）

+function

+class

+import

JS中的數(shù)據(jù)類型 **（重要哦）

+ 基本數(shù)據(jù)類型（值類型 / 原始值）

+number

+string

+boolean

+null

+undefined

? ? + symbol

? ? + bigint

+ 引用數(shù)據(jù)類型

? ? + 對(duì)象數(shù)據(jù)類型

? ? ? ? + {} 普通對(duì)象

? ? ? ? + [] 數(shù)組對(duì)象

+/^$/正則對(duì)象

? ? ? ? + 日期對(duì)象

+Math數(shù)學(xué)函數(shù)對(duì)象

? ? ? ? + ...

? ? + 函數(shù)數(shù)據(jù)類型

數(shù)據(jù)類型的檢測(cè)

typeof

+ 語法 =>typeof[value]

+ 返回值首先是字符串，其次包含對(duì)應(yīng)的類型 =>typeoftypeof[] ==="string"

+typeofnull==="object"

+ 數(shù)組、正則、普通對(duì)象的最后檢測(cè)結(jié)果都是"object"，所以基于此操作，無法細(xì)分對(duì)象

+instanceof

+constructor

+ Object.prototype.toString.call()

數(shù)字類型詳解 **

+NaN和isNaN

+typeofNaN==="number"

+NaN!==NaN

+ 基于isNaN檢測(cè)值是否為有效數(shù)字（檢測(cè)的值不是數(shù)字類型，需要默認(rèn)基于Number()把其轉(zhuǎn)換為數(shù)字類型，然后再檢測(cè)）

+ 把其它數(shù)據(jù)類型轉(zhuǎn)換為數(shù)字類型

+Number([value])

+ 字符串轉(zhuǎn)換為數(shù)字：空字符串是0，字符串中只要出現(xiàn)任意一個(gè)非有效數(shù)字字符，結(jié)果都是NaN

+ 布爾轉(zhuǎn)換為數(shù)字：true是1false是0

+null變?yōu)閿?shù)字0

+undefined變?yōu)閿?shù)字NaN

? ? ? ? + symbol不能轉(zhuǎn)換為數(shù)字，否則會(huì)報(bào)錯(cuò)

? ? ? ? + 對(duì)象（或者函數(shù)）轉(zhuǎn)換為數(shù)字：首先都是調(diào)用toString先轉(zhuǎn)換且字符串，然后再轉(zhuǎn)換為數(shù)字

+ 普通對(duì)象轉(zhuǎn)換為字符串結(jié)果都是"[object Object]"

? ? ? ? ? ? + 數(shù)組對(duì)象轉(zhuǎn)換為字符串結(jié)果是：用逗號(hào)分隔數(shù)組中的每一項(xiàng)?

+ [] ->''（空數(shù)組轉(zhuǎn)為空字符串）

+ [10] ->'10'（數(shù)字第一步都先轉(zhuǎn)化為字符串）

+ [10,20] ->'10,20'

? ? ? ? ? ? + 正則或者函數(shù)轉(zhuǎn)換為字符串和原始看到的內(nèi)容類似

+parseInt([value]) /parseFloat([value])

? ? ? ? + 首先把[value]值變?yōu)樽址浯螐淖址钭髠?cè)開始找，把找到的有效數(shù)字字符轉(zhuǎn)換為數(shù)字，遇到一個(gè)非有效數(shù)字字符則結(jié)束查找（不論右側(cè)是否還有數(shù)字，都不在查找了）

+Number(true) ->1

+parseInt(true) ->NaN

+Number('12px') ->NaN

+parseInt('12px') ->12

+ 一些常用的屬性方法

? ? + 數(shù)字.toFixed(N)? 保留小數(shù)點(diǎn)N位，返回結(jié)果是一個(gè)字符串

+Infinity無窮大

? ? + ...

字符串類型詳解 **

+ 把其它數(shù)據(jù)類型轉(zhuǎn)換為字符串

? ? + String([value])

? ? + [value].toString()

+ 加號(hào)在JS中除了數(shù)學(xué)運(yùn)算，還有字符串拼接

? ? + 減乘除和取余都一定是數(shù)學(xué)運(yùn)算（不是數(shù)字類型要轉(zhuǎn)換為數(shù)字類型，然后再運(yùn)算）

? ? + 加號(hào)兩邊的任意一邊出現(xiàn)字符串，則為字符串拼接（如果加的是一個(gè)對(duì)象，其實(shí)最后也是字符串拼接，因?yàn)閷?duì)象轉(zhuǎn)換為數(shù)字，是先轉(zhuǎn)換為字符串的）

+1+'1'==='11'

+1+ ['10] ===110'

+ 基于ES6中的模板字符串（反引號(hào) 或者叫 兩個(gè)撇）可以方便字符串拼接

```

//=> ${} 就是把一個(gè)變量的值或者一個(gè)JS表達(dá)式運(yùn)行的結(jié)果，拼接到模板字符串中

letn=10;

letstr=`N的值是：${n}`;

```

布爾類型詳解 **

+ 把其它數(shù)據(jù)類型轉(zhuǎn)換為布爾類型

+ 規(guī)律：只有“0、NaN、null、undefined、空字符串”五個(gè)值最后變?yōu)镕ALSE，其余都會(huì)轉(zhuǎn)換為TRUE

+ Boolean([value])

+ ![value] 轉(zhuǎn)換為布爾再取反

+ !![value] 轉(zhuǎn)換為布爾

+----

? ? + 在條件判斷中，最后的結(jié)果都是轉(zhuǎn)換為布爾

? ? + ...

對(duì)象數(shù)據(jù)類型詳解 **

+ 對(duì)象的組成：零到多組鍵值對(duì)組成的（key:value / 屬性名:屬性值），每一組之間用逗號(hào)分隔

+ 關(guān)于對(duì)象鍵值對(duì)的操作（增刪改查）

? ? + 對(duì)象的屬性名不能重復(fù)

? ? + 對(duì)象.屬性名? => 這樣操作屬性名不能是數(shù)字

+ 對(duì)象[屬性名]? => obj['n']和obj[n]是不一樣的，前者屬性名就是n，候著是把n變量存儲(chǔ)的值作為屬性名拿過來操作的（假設(shè)n是100，此時(shí)相當(dāng)于obj[100]）

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別?*(很重要)

-數(shù)據(jù)檢測(cè)內(nèi)容?

+ 堆內(nèi)存（HEAP）和棧內(nèi)存（STACK）

+ 棧內(nèi)存

? ? + ECStack 執(zhí)行環(huán)境棧

+ EC(G)全局執(zhí)行上下文

+ VO(G)全局變量對(duì)象

+ let a =12

+ 創(chuàng)建12這個(gè)值，存放到棧內(nèi)存中（棧內(nèi)存是用來執(zhí)行代碼和存儲(chǔ)基本類型值的）

+ 創(chuàng)建變量a存儲(chǔ)到 VO(G)

+ 最后讓a指向12這個(gè)值 （=賦值的意思就是值的指向）

+ 堆內(nèi)存

+ let obj = {xxx:'xxx'}

? ? ? ? + 創(chuàng)建對(duì)象值（引用數(shù)據(jù)類型不能直接存儲(chǔ)到棧內(nèi)存中）

+ 創(chuàng)建一個(gè)堆內(nèi)存，有一個(gè)16進(jìn)制地址（AAAFFF000）

? ? ? ? ? ? + 把對(duì)象中的鍵值對(duì)存儲(chǔ)到堆中

? ? ? ? ? ? + 把堆內(nèi)存的地址存放到棧內(nèi)存中，供變量指向

+ 創(chuàng)建變量obj，存儲(chǔ)到VO(G)

+ 讓obj指向堆內(nèi)存的地址 AAAFFF000

? ? + 后期obj.xxx的所有操作，都是先基于地址找到堆內(nèi)存，從而來操作堆內(nèi)存中的內(nèi)容

DOM的一些操作 **

+ document.getElementById

+ document.body

? ? + JS中獲取的元素都是對(duì)象數(shù)據(jù)類型的（有自己對(duì)應(yīng)的堆內(nèi)存，堆內(nèi)存中存儲(chǔ)著很多內(nèi)置的屬性和方法，這些屬性方法就是用來操作DOM元素的）

? ? ? ? + id

? ? ? ? + className

? ? ? ? + tagName

? ? ? ? + innerHTML

? ? ? ? + innerText

? ? ? ? + style = 對(duì)象? 操作當(dāng)前元素的“行內(nèi)”樣式

? ? ? ? + onclick

? ? ? ? + ...

+ context.getElementsByTagName

? ? + 獲取到的是一個(gè)“類數(shù)組”元素集合 HTMLCollection

? ? + 操作起來和數(shù)組類似（基于索引獲取某一項(xiàng)以及循環(huán)操作等）

JS中常用的操作語句 **

+ 判斷語句

+if、elseif、else

? ? + 三元運(yùn)算符

? ? ? ? + 語法? 條件?成立:不成立;

+ 基于null/undefined占位

? ? ? ? + 多個(gè)事情基于括號(hào)包起來，逗號(hào)分隔

? ? ? ? + 三元嵌套

+switchcase

+ 每一種case都是===判斷

? ? ? ? + == 和 === 的區(qū)別

+ 循環(huán)語句

+for循環(huán)：指定循環(huán)次數(shù)或者遍歷數(shù)組

? ? ? ? + 四步操作

+break

+continue

+forin循環(huán)：變量對(duì)象中的鍵值對(duì)的

? ? ? ? + 優(yōu)先按照從小到大遍歷數(shù)字屬性

? ? + ...

JS中常用的輸出方式

+ console

+.log

+.dir

+.table

+.time/.timeEnd

+.warn

? ? + ...

+ 瀏覽器彈出窗口（輸出的結(jié)果都會(huì)變?yōu)樽址?/p>

? ? + alert

? ? + confirm

? ? + prompt

+ 向頁(yè)面中輸出內(nèi)容的（輸出的結(jié)果都會(huì)變?yōu)樽址?/p>

+ document.write

+ 元素.innerHTML

+ 元素.innerText

? ? + ...

函數(shù)（function）

一個(gè)處理事情的方法，例如：洗衣機(jī)就是一個(gè)函數(shù)

1.生產(chǎn)洗衣機(jī)

把洗衣服的操作的集成在一起

相當(dāng)于一個(gè)函數(shù)：函數(shù)的目的就是把實(shí)現(xiàn)一個(gè)功能的代碼進(jìn)行封裝，以后再想實(shí)現(xiàn)這個(gè)功能，我們只需要執(zhí)行方法即可，無需再把代碼寫一遍 => “低耦合、高內(nèi)聚”：減少頁(yè)面中的冗余代碼，提高代碼的重復(fù)使用率

2.讓洗衣機(jī)運(yùn)行

執(zhí)行函數(shù)

函數(shù)兩部分：定義函數(shù)、執(zhí)行函數(shù)（光定義函數(shù)是沒有用的，只有把函數(shù)執(zhí)行，才能起到對(duì)應(yīng)的作用）

沒有學(xué)不會(huì)的東西只要你肯努力

-----------------------------------------------------------------------------------努力成為：前端晨