此博客參考b站：【黑馬程序員前端JavaScript入門(mén)到精通全套視頻教程，javascript核心進(jìn)階ES6語(yǔ)法、API、js高級(jí)等基礎(chǔ)知識(shí)和實(shí)戰(zhàn)教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76&vd_source=06e5549bf018e111f4275c259292d0da

這份筆記適用于已經(jīng)學(xué)過(guò)一門(mén)編程語(yǔ)言（最好是C語(yǔ)言）的同學(xué)，如果你沒(méi)有編程基礎(chǔ)，那么這套筆記可能不適合你哦~

目錄

一、開(kāi)發(fā)者網(wǎng)絡(luò)平臺(tái)MDN

二、JavaScript的組成

1、ECMAScript

2、Web APIs?

三、引入方式

1、內(nèi)部JavaScript

2、外部JavaScript

外部JavaScript注意事項(xiàng)

3、內(nèi)聯(lián)JavaScript

四、結(jié)束符

五、輸入、輸出語(yǔ)法

1、輸出語(yǔ)法

2、輸入語(yǔ)法

六、字面量的概念

七、變量的基本使用

1、變量的聲明

2、數(shù)組變量的聲明

3、常量的聲明

八、數(shù)據(jù)類(lèi)型——基本數(shù)據(jù)類(lèi)型

1、數(shù)字類(lèi)型 (Number)

2、字符串類(lèi)型 (string)

注意事項(xiàng)

字符串拼接

模板字符串

字符串的比較

3、布爾類(lèi)型 (boolean)

4、未定義類(lèi)型 (undefined)

5、null (空類(lèi)型)

九、檢測(cè)數(shù)據(jù)類(lèi)型

十、類(lèi)型轉(zhuǎn)換

1、?隱式轉(zhuǎn)換

2、顯示轉(zhuǎn)換

1、Number(數(shù)據(jù))

2、parselnt(數(shù)據(jù))

3、parseFloat(數(shù)據(jù))

4、String(數(shù)據(jù))

5、Boolean(數(shù)據(jù))

十一、=、==、===、!=、!==

十二、ASCII碼表

十三、運(yùn)算符優(yōu)先級(jí)

十四、分支語(yǔ)句、循環(huán)語(yǔ)句

數(shù)字補(bǔ)0案例

數(shù)字補(bǔ)0案例相關(guān)例題：轉(zhuǎn)換時(shí)間案例

十五、操作數(shù)組

1、增

2、刪

3、排序

十六、函數(shù)

1、函數(shù)聲明語(yǔ)法

2、函數(shù)命名規(guī)范

3、函數(shù)調(diào)用語(yǔ)法

4、函數(shù)參數(shù)

5、函數(shù)返回值

6、函數(shù)細(xì)節(jié)補(bǔ)充?

十七、匿名函數(shù)

1、函數(shù)表達(dá)式

2、立即執(zhí)行函數(shù)

3、具名函數(shù)和匿名函數(shù)的不同點(diǎn)

十八、邏輯中斷

十九、數(shù)據(jù)類(lèi)型——引用數(shù)據(jù)類(lèi)型（對(duì)象）

1、對(duì)象聲明語(yǔ)法

2、對(duì)象使用

3、對(duì)象中的屬性

4、對(duì)象中有關(guān)屬性的操作（增、刪、查、改）

補(bǔ)充：查的兩種方式

5、對(duì)象中的方法

6、遍歷對(duì)象

7、遍歷數(shù)組對(duì)象

8、內(nèi)置對(duì)象

內(nèi)置對(duì)象-Math

生成任意范圍的隨機(jī)數(shù)

二十、拓展——基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別

堆棧空間分配區(qū)別:

一、開(kāi)發(fā)者網(wǎng)絡(luò)平臺(tái)MDN

先介紹一個(gè)前端的權(quán)威網(wǎng)站：MDN Web Docs (mozilla.org)

MDN是Mozilla基金會(huì)的開(kāi)發(fā)者網(wǎng)絡(luò)平臺(tái)
。提供了大量關(guān)于各種HTML
、CSS
和JavaScript功能的開(kāi)放、詳細(xì)的文檔，以及廣泛的Web API參考資料

二、JavaScript的組成

1、ECMAScript

規(guī)定了js基礎(chǔ)語(yǔ)法核心知識(shí)。
比如:變量、分支語(yǔ)句、循環(huán)語(yǔ)句、對(duì)象等等

2、Web APIs?

DOM? 操作文檔，比如對(duì)頁(yè)面元素進(jìn)行移動(dòng)、大小、添加刪除等操作
BOM? 操作瀏覽器，比如頁(yè)面彈窗，檢測(cè)窗口寬度、存儲(chǔ)數(shù)據(jù)到瀏覽器等等

?

三、引入方式

JS的引入方式與CSS基本相同

1、內(nèi)部JavaScript

直接寫(xiě)在html文件里，用script標(biāo)簽包住

規(guī)范: script標(biāo)簽寫(xiě)在</body>上面

2、外部JavaScript

代碼寫(xiě)在以.js結(jié)尾的文件里

語(yǔ)法: 通過(guò)script標(biāo)簽，引入到html頁(yè)面中

?

外部JavaScript注意事項(xiàng)

1.我們將 <script> 放在HTML文件的底部附近的原因是瀏覽器會(huì)按照代碼在文件中的順序加載 HTML。如果先加載的JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加載而失效。因此，將JavaScript 代碼放在 HTML頁(yè)面的底部附近通常是最好的策略

2.script標(biāo)簽中間無(wú)需寫(xiě)代碼，否則會(huì)被忽略!

3.外部/avaScript會(huì)使代碼更加有序，更易于復(fù)用，且沒(méi)有了腳本的混合，HTML 也會(huì)更加易讀，因此這是個(gè)好的習(xí)慣

3、內(nèi)聯(lián)JavaScript

代碼寫(xiě)在標(biāo)簽內(nèi)部

注意: 此處作為了解即可，但是后面vue框架會(huì)用這種模式

?

四、結(jié)束符

JS語(yǔ)句結(jié)束符是分號(hào)，但是可寫(xiě)可不寫(xiě)

約定:為了風(fēng)格統(tǒng)一，結(jié)束符要么每句都寫(xiě)，要么每句都不寫(xiě) (按照?qǐng)F(tuán)隊(duì)要求）

五、輸入、輸出語(yǔ)法

1、輸出語(yǔ)法

2、輸入語(yǔ)法

注：prompt以及表單取過(guò)來(lái)的值默認(rèn)是字符串類(lèi)型

六、字面量的概念

在計(jì)算機(jī)科學(xué)中，字面量 (literal) 是在計(jì)算機(jī)中描述的事/物

比如:

我們工資是: 1000? ? 此時(shí) 1000 就是數(shù)字字面量

‘黑馬程序員’字符串字面量

還有接下來(lái)我們學(xué)的? ? [ ] 數(shù)組字面量? ? { } 對(duì)象字面量等等

七、變量的基本使用

JS是一門(mén)若數(shù)據(jù)類(lèi)型的編程語(yǔ)言。

C語(yǔ)言中，聲明變量時(shí)用int、double、char等嚴(yán)格區(qū)分?jǐn)?shù)據(jù)類(lèi)型，而JS聲明不同數(shù)據(jù)類(lèi)型的數(shù)據(jù)均用let 變量名

1、變量的聲明

變量命名規(guī)則和C語(yǔ)言相同

2、數(shù)組變量的聲明

第二種是使用函數(shù)聲明，但習(xí)慣上用第一種

3、常量的聲明

八、數(shù)據(jù)類(lèi)型——基本數(shù)據(jù)類(lèi)型

1、數(shù)字類(lèi)型 (Number)

NaN 代表一個(gè)計(jì)算錯(cuò)誤。它是一個(gè)不正確的或者一個(gè)未定義的數(shù)學(xué)操作所得到的結(jié)果

通俗地講，NaN的意思是：這不是一個(gè)數(shù)字

NaN不等于任何值，包括它本身

例如：'老師'- 2? 結(jié)果是NaN

NaN 是粘性的。任何對(duì) NaN 的操作都會(huì)返回 NaN

例如：NaN + 2? 結(jié)果是NaN

2、字符串類(lèi)型 (string)

通過(guò)單引號(hào) (") 、雙引號(hào)("")或反引號(hào)(``)包裹的數(shù)據(jù)都叫字符串，單引號(hào)和雙引號(hào)沒(méi)有本質(zhì)上的區(qū)別，推薦使用單引號(hào)

反引號(hào)可以格式預(yù)留

注意事項(xiàng)

單引號(hào)/雙引號(hào)可以互相嵌套，但是不以自已嵌套自已(口訣: 外雙內(nèi)單，或者外單內(nèi)雙）

必要時(shí)可以使用轉(zhuǎn)義符?\ ，輸出單引號(hào)或雙引號(hào)

字符串拼接

字符串拼接:

+ 運(yùn)算符可以實(shí)現(xiàn)字符串的拼接

模板字符串

使用場(chǎng)景

拼接字符串和變量

內(nèi)容拼接變量時(shí)，用${ }包住變量

字符串的比較

字符串比較，是比較的字符對(duì)應(yīng)的ASCII碼

從左往右依次比較

如果第一位一樣再比較第二位，以此類(lèi)推

3、布爾類(lèi)型 (boolean)

表示肯定或否定時(shí)在計(jì)算機(jī)中對(duì)應(yīng)的是布爾類(lèi)型數(shù)據(jù)

它有兩個(gè)固定的值 true 和 false，表示肯定的數(shù)據(jù)用 true (真)，表示否定的數(shù)據(jù)用 false (假)

4、未定義類(lèi)型 (undefined)

未定義是比較特殊的類(lèi)型，只有一個(gè)值 undefined

只聲明變量，不賦值的情況下，變量的默認(rèn)值為 undefined

5、null (空類(lèi)型)

JavaScript中的 null僅僅是一個(gè)代表“無(wú)”、“空”或“值未知”的特殊值

null是一個(gè)對(duì)象數(shù)據(jù)類(lèi)型

null和 undefined 區(qū)別:

undefined 表示沒(méi)有賦值
null 表示賦值了，但是內(nèi)容為空

null開(kāi)發(fā)中的使用場(chǎng)景:

官方解釋: 把null作為尚未創(chuàng)建的對(duì)象

大白話(huà): 將來(lái)有個(gè)變量里面存放的是一個(gè)對(duì)象，但是對(duì)象還沒(méi)創(chuàng)建好，可以先給個(gè)null

九、檢測(cè)數(shù)據(jù)類(lèi)型

通過(guò) typeof 關(guān)鍵字檢測(cè)數(shù)據(jù)類(lèi)型

typeof 運(yùn)算符可以返回被檢測(cè)的數(shù)據(jù)類(lèi)型。它支持兩種語(yǔ)法形式:

1.作為運(yùn)算符: typeof x (常用的寫(xiě)法)
2. 函數(shù)形式: typeof(x)

換言之，有括號(hào)和沒(méi)有括號(hào)，得到的結(jié)果是一樣的，所以我們直接使用第一種寫(xiě)法

十、類(lèi)型轉(zhuǎn)換

prompt以及表單取過(guò)來(lái)的值默認(rèn)是字符串類(lèi)型，故有時(shí)需要進(jìn)行數(shù)據(jù)的類(lèi)型轉(zhuǎn)換

1、?隱式轉(zhuǎn)換

某些運(yùn)算符被執(zhí)行時(shí)，系統(tǒng)內(nèi)部自動(dòng)將數(shù)據(jù)類(lèi)型進(jìn)行轉(zhuǎn)換，這種轉(zhuǎn)換稱(chēng)為隱式轉(zhuǎn)換

規(guī)則:

+號(hào)兩邊只要有一個(gè)是字符串，都會(huì)把另外一個(gè)轉(zhuǎn)成字符串

除了+以外的算術(shù)運(yùn)算符 比如 -? * / 等都會(huì)把數(shù)據(jù)轉(zhuǎn)成數(shù)字類(lèi)型

+號(hào)作為正號(hào)解析可以轉(zhuǎn)換成數(shù)字型，例如+prompt()

任何數(shù)據(jù)和字符串相加結(jié)果都是字符串

2、顯示轉(zhuǎn)換

1、Number(數(shù)據(jù))

轉(zhuǎn)成數(shù)字類(lèi)型
如果字符串內(nèi)容里有非數(shù)字，轉(zhuǎn)換失敗時(shí)結(jié)果為 NaN (Not a Number) 即不是一個(gè)數(shù)字NaN也是number類(lèi)型的數(shù)據(jù)，代表非數(shù)字

把'12px'轉(zhuǎn)化成數(shù)字型，px會(huì)被自動(dòng)忽略，但如果是abc12這種字母開(kāi)頭的，就不能正常轉(zhuǎn)化為數(shù)字

2、parselnt(數(shù)據(jù))

只保留整數(shù)

3、parseFloat(數(shù)據(jù))

可以保留小數(shù)

4、String(數(shù)據(jù))

轉(zhuǎn)換成字符串

另一種寫(xiě)法：變量.toString()
括號(hào)里面可以跟進(jìn)制

5、Boolean(數(shù)據(jù))

記憶:? ""、0、undefined、null、false、NaN 轉(zhuǎn)換為布爾值后都是false，余則為 true

十一、=、==、===、!=、!==

= 單等是賦值

== 可判斷不全相等或完全相等（左右兩邊值是否相等）

===可判斷全等（左右兩邊是否類(lèi)型和值都相等）

開(kāi)發(fā)中判斷是否相等，強(qiáng)烈推薦使用===

!=的范圍比!==的范圍更窄，===比==的范圍更窄

!=和===是一對(duì)，!==和==是一對(duì)

例如

'2'==2 //真
2==2 //真

'2'===2 //假
2===2 //真

'2'!=2 //真
'2'!==2 //假

十二、ASCII碼表

把表放在這沒(méi)別的，就是以后要用的時(shí)候方便找?

十三、運(yùn)算符優(yōu)先級(jí)

和C語(yǔ)言一樣一樣的

十四、分支語(yǔ)句、循環(huán)語(yǔ)句

JS的分支、循環(huán)語(yǔ)句和C語(yǔ)言一樣一樣的，這里就不詳細(xì)介紹了。只介紹一下三元運(yùn)算符數(shù)字補(bǔ)0案例

數(shù)字補(bǔ)0案例

需求: 用戶(hù)輸入1個(gè)數(shù)，如果數(shù)字小于10，則前面進(jìn)行補(bǔ)0，例如需顯示02、09等數(shù)字，為后續(xù)實(shí)現(xiàn)倒計(jì)時(shí)做鋪墊

代碼：

let num = +prompt(請(qǐng)您輸入一個(gè)數(shù)字:')

num = num < 10 ? '0' + num : num

數(shù)字補(bǔ)0案例相關(guān)例題：轉(zhuǎn)換時(shí)間案例

需求，用戶(hù)輸入秒數(shù)seconds，瀏覽器自動(dòng)進(jìn)行時(shí)間轉(zhuǎn)換并顯示：seconds秒轉(zhuǎn)化為xx時(shí)xx分xx秒

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轉(zhuǎn)換時(shí)間</title>
</head>

<body>
    <script>
        let seconds = +prompt('請(qǐng)輸入秒數(shù)：')
        let minutes = parseInt(seconds / 60)
        let hour = parseInt(minutes / 60)
        seconds = seconds % 60
        minutes = minutes % 60
        document.write(`${seconds}轉(zhuǎn)換為${hour > 10 ? hour : '0' + hour}時(shí)${minutes > 10 ? minutes : '0' + minutes}分${seconds > 10 ? seconds : '0' + seconds}秒`)
    </script>
</body>

</html>

十五、操作數(shù)組

1、增

數(shù)組名.push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回該數(shù)組的新長(zhǎng)度

?數(shù)組名.unshift() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭，并返回該數(shù)組的新長(zhǎng)度

?

2、刪

數(shù)組.pop()方法從數(shù)組中刪除最后一個(gè)元素，并返回該元素的值

數(shù)組.shift()方法從數(shù)組中刪除第一個(gè)元素，并返回該元素的值

?

數(shù)組.splice() 方法 刪除指定元素

語(yǔ)法:arr.splice(起始位置，刪除幾個(gè)元素)?

?

3、排序

數(shù)組.sort() 方法可以排序

?

十六、函數(shù)

1、函數(shù)聲明語(yǔ)法

?

?

2、函數(shù)命名規(guī)范

命名規(guī)則和變量命名規(guī)則一致

盡量使用小駝峰命名法命名，且前綴盡量用動(dòng)詞，如get、set等

?

3、函數(shù)調(diào)用語(yǔ)法

?

4、函數(shù)參數(shù)

函數(shù)可以有一個(gè)或多個(gè)參數(shù)，也可以沒(méi)有參數(shù)

下面的例子有實(shí)參時(shí)，執(zhí)行時(shí)x=0,y=0，無(wú)實(shí)參時(shí)，按傳入的實(shí)參執(zhí)行

?

5、函數(shù)返回值

可以返回一個(gè)值或多個(gè)值，返回多個(gè)值時(shí)用數(shù)組返回

return [num1,num2,num3] //返回多個(gè)值

6、函數(shù)細(xì)節(jié)補(bǔ)充?

1、若存在兩個(gè)函數(shù)名相同的函數(shù)，則后面的會(huì)覆蓋前面的函數(shù)

2、在Javascript中實(shí)參的個(gè)數(shù)和形參的個(gè)數(shù)可以不一致
如果形參過(guò)少會(huì)自動(dòng)填上undefined(了解即可)
如果實(shí)參過(guò)多那么多余的實(shí)參會(huì)被忽略(函數(shù)內(nèi)部有一個(gè)arguments,里面裝著所有的實(shí)參)

3、變量有一個(gè)坑：如果函數(shù)內(nèi)部，變量沒(méi)有聲明，直接賦值，也當(dāng)全局變量看。但是強(qiáng)烈不推薦這樣寫(xiě)

十七、匿名函數(shù)

匿名函數(shù)：

沒(méi)有名字的函數(shù)，無(wú)法直接使用

使用方式:

1、函數(shù)表達(dá)式

2、立即執(zhí)行函數(shù)

1、函數(shù)表達(dá)式

將匿名函數(shù)賦值給一個(gè)變量，并且通過(guò)變量名稱(chēng)進(jìn)行調(diào)用，我們將這個(gè)稱(chēng)為函數(shù)表達(dá)式

語(yǔ)法：

調(diào)用函數(shù)的方法和具名函數(shù)一樣

?

2、立即執(zhí)行函數(shù)

場(chǎng)景介紹:避免全局變量之間的污染

語(yǔ)法：

(function(){}()) //寫(xiě)法一
(function(){})() //寫(xiě)法二

?注意:多個(gè)立即執(zhí)行函數(shù)要用;隔開(kāi)，要不然會(huì)報(bào)錯(cuò)

3、具名函數(shù)和匿名函數(shù)的不同點(diǎn)

具名函數(shù)的調(diào)用可以寫(xiě)在任意位置（可以在函數(shù)聲明前調(diào)用，也可以在函數(shù)聲明后調(diào)用）

匿名函數(shù)必須先聲明再調(diào)用

十八、邏輯中斷

短路:只存在于 &&和中，當(dāng)滿(mǎn)足一定條件會(huì)讓右邊代碼不執(zhí)行

原因:通過(guò)左邊能得到整個(gè)式子的結(jié)果，因此沒(méi)必要再判斷右邊運(yùn)算

結(jié)果:無(wú)論 && 還是兒，運(yùn)算結(jié)果都是最后被執(zhí)行的表達(dá)式值，一般用在變量賦值

?

十九、數(shù)據(jù)類(lèi)型——引用數(shù)據(jù)類(lèi)型（對(duì)象）

這里的對(duì)象類(lèi)似于C語(yǔ)言中的結(jié)構(gòu)體，但與結(jié)構(gòu)體不同的是，對(duì)象不僅包含屬性（也就是變量），還包含方法（也就是操作該對(duì)象的函數(shù)）。所以，用C++中的“類(lèi)”的概念來(lái)類(lèi)比會(huì)更加合適

1、對(duì)象聲明語(yǔ)法

2、對(duì)象使用

對(duì)象外面叫變量，對(duì)象里面叫屬性；對(duì)象外面叫函數(shù)，對(duì)象里面叫方法

?

?

3、對(duì)象中的屬性

1、數(shù)據(jù)描述性的信息稱(chēng)為屬性，如人的姓名、身高、年齡、性別等，一般是名詞性的

2、屬性都是成 對(duì)出現(xiàn)的，包括屬性名和值，它們之間使用英文冒號(hào)分隔
多個(gè)屬性之間使用英文逗號(hào)分隔（不要忘了逗號(hào)?。。。?/strong>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍歷數(shù)組對(duì)象</title>
    <style>
        th,
        td{
            border:1px solid #9b9b9b;
        }

        table tr:nth-child(1){
            background-color: #ccc;
        }

        table tr:not(:first-child):hover{ /*:not(:first-child)的意思是除了第一個(gè)*/
            background-color: #ccc;
        }

        table{
            margin: 50px auto;
            height: 200px;
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    
    <script>
        let students = [
        {name:'小明',age:18,gender:'男',hometown:'廣東省'},
        {name:'小紅',age:19,gender:'女',hometown:'河南省'},
        {name:'小剛',age:17,gender:'男',hometown:'江西省'},
        {name:'小麗',age:18,gender:'女',hometown:'浙江省'}
        ]

        document.write(`<table>`)
            document.write(`
            <tr>
                <th>序號(hào)</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>家鄉(xiāng)</th>
            </tr>
        `)
        for(let i=0;i<students.length;i++)
        {
           document.write(`
            <tr>
                <td>${i+1}</td>
                <td>${students[i].name}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>
           `)
        }
        document.write(`</table>`)
    </script>
</body>
</html>