知道對(duì)象數(shù)據(jù)類(lèi)型的特征，能夠利用數(shù)組對(duì)象渲染頁(yè)面

對(duì)象

綜合案例

數(shù)據(jù)類(lèi)型存儲(chǔ)

對(duì)象

對(duì)象（Object）：JavaScript里的一種數(shù)據(jù)類(lèi)型（引用類(lèi)型），也是用于存儲(chǔ)數(shù)據(jù)的

好處：可以用來(lái)詳細(xì)的描述某個(gè)事物，是用鍵值對(duì)形式存儲(chǔ)語(yǔ)義更明了

特點(diǎn)：對(duì)象數(shù)據(jù)是無(wú)序的，數(shù)組有序的?

對(duì)象基本使用

對(duì)象有屬性和方法組成

對(duì)象屬性

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

屬性都是成 對(duì)出現(xiàn)的，包括屬性名和值，它們之間使用英文 : 分隔

多個(gè)屬性之間使用英文 , 分隔

屬性就是依附在對(duì)象上的變量（對(duì)象外是變量，對(duì)象內(nèi)是屬性）

1. 定義對(duì)象屬性

<script>

// 對(duì)象也是一種數(shù)據(jù)類(lèi)型，保存數(shù)據(jù)同時(shí)可以更直觀(guān)的描述事物

// 1. 定義對(duì)象屬性

letpig={

sex:'女',

age:4,

uname:'佩奇',

weight:12.6

? }

</script>

2. 訪(fǎng)問(wèn)對(duì)象屬性

聲明對(duì)象，并添加了若干屬性后，可以使用 . 獲得對(duì)象中屬性對(duì)應(yīng)的值，我稱(chēng)之為屬性訪(fǎng)問(wèn)

<script>

// 對(duì)象也是一種數(shù)據(jù)類(lèi)型，保存數(shù)據(jù)同時(shí)可以更直觀(guān)的描述事物

// 1. 定義對(duì)象屬性

letpig={

sex:'女',

age:4,

uname:'佩奇',

weight:12.6

? }

// 2. 訪(fǎng)問(wèn)對(duì)象屬性? 對(duì)象.屬性

console.log(pig.age)// 4

console.log(pig.weight)// 12.6

</script>

對(duì)象方法

數(shù)據(jù)行為性的信息稱(chēng)為方法，如跑步、唱歌等，一般是動(dòng)詞性的，其本質(zhì)是函數(shù)。

方法是由方法名和函數(shù)兩部分構(gòu)成，它們之間使用 : 分隔

多個(gè)屬性之間使用英文 , 分隔

方法是依附在對(duì)象中的函數(shù)（對(duì)象外是函數(shù)，對(duì)象內(nèi)是方法）

1.定義對(duì)象方法

// let fn = function() {}

// 對(duì)象方法

// 1. 定義對(duì)象方法

letpig={

uname:'佩奇',

sing:function() {

console.log('唱歌')

? },

dance:function() {

console.log('跳舞')

? }

}

console.log(pig)

2.調(diào)用對(duì)象方法

聲明對(duì)象，并添加了若干方法后，可以使用 .? 調(diào)用對(duì)象中函數(shù)，我稱(chēng)之為方法調(diào)用。

// let fn = function() {}

// 對(duì)象方法

// 1. 定義對(duì)象方法

letpig={

uname:'佩奇',

sing:function() {

console.log('唱歌')

? },

dance:function() {

console.log('跳舞')

? },

sum:function(x,y) {// 2

// console.log(x + y)

returnx+y

? }

}

console.log(pig)

// 2. 調(diào)用對(duì)象方法

pig.sing()// 唱歌

pig.dance()// 跳舞

// 3. 方法可以傳遞參數(shù)也可以有返回值，跟函數(shù)使用基本類(lèi)似

letre=pig.sum(1,2)// 1 實(shí)參

console.log(re)

注：無(wú)論是屬性或是方法，同一個(gè)對(duì)象中出現(xiàn)名稱(chēng)一樣的，后面的會(huì)覆蓋前面的。

操作對(duì)象

對(duì)象本質(zhì)是無(wú)序的數(shù)據(jù)集合, 操作對(duì)象數(shù)據(jù)無(wú)非就是 增 刪 改 查

查找屬性的另外寫(xiě)法

對(duì)于多詞屬性比如中橫線(xiàn)分割的屬性，點(diǎn)操作就不能用了

我們可以采?。? 對(duì)象['屬性'] 方式， 單引號(hào)和雙引號(hào)都闊以，當(dāng)然也可以用于其他正常屬性

<script>

// 查詢(xún)屬性的另外寫(xiě)法? 對(duì)象['屬性'] 這個(gè)屬性必須加引號(hào)

letpig={

'pig-name':'佩奇',

age:4

? }

// console.log(pig.pig - name)? // NaN

console.log(pig['pig-name'])// 佩奇

console.log(pig['age'])// 4 ?? === pig.age

</script>

總結(jié)：多詞屬性或者需要解析變量的時(shí)候使用 [] 語(yǔ)法，其余的直接使用點(diǎn)語(yǔ)法

遍歷對(duì)象

for 遍歷對(duì)象的問(wèn)題：

對(duì)象沒(méi)有長(zhǎng)度length，而且是無(wú)序的

所以我們要利用 for in 遍歷對(duì)象

語(yǔ)法:

for(let變量in對(duì)象) {

console.log(變量)// 屬性名

console.log(對(duì)象[變量])// 屬性值

}

for in語(yǔ)法中的 k 是一個(gè)變量, 在循環(huán)的過(guò)程中依次代表對(duì)象的屬性名

由于 k 是變量, 所以必須使用 [ ] 語(yǔ)法解析

一定記?。?k 是獲得對(duì)象的屬性名， 對(duì)象名[k] 是獲得 屬性值

一般不用這種方式遍歷數(shù)組、主要是用來(lái)遍歷對(duì)象

<script>

// 遍歷對(duì)象

letpig={

sex:'女',

age:4,

uname:'佩奇',

weight:12.6,

? }

// for (let key in pig) {

// ? console.log(key)? // key 是屬性 ?

// ? console.log(pig[key]) // 對(duì)象[變量] 是值

// }

for(letkeyinpig) {

console.log(key)// key 是屬性 ? 對(duì)象.屬性

// console.log(pig.key) ? // pig.key? undefined? 因?yàn)閗ey是個(gè)變量不是屬性

// key? 'sex'? 'age' ?? 對(duì)象[key]? 對(duì)象['sex']? 對(duì)象['age']

console.log(pig[key])

}

// 注意：數(shù)組遍歷用傳統(tǒng)for， for in 主要用來(lái)遍歷對(duì)象

letarr=['red','green','pink']

for(letkinarr) {

console.log(k)// 得到字符串類(lèi)型的索引號(hào)

}

</script>

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

內(nèi)置對(duì)象：JavaScript內(nèi)部提供的對(duì)象，包含各種屬性和方法給開(kāi)發(fā)者調(diào)用

回想一下我們?cè)?jīng)使用過(guò)的 console.log，console其實(shí)就是 JavaScript 中內(nèi)置的對(duì)象，該對(duì)象中存在一個(gè)方法叫 log，然后調(diào)用 log 這個(gè)方法，即 console.log()

除了 console 對(duì)象外，JavaScritp 還有其它的內(nèi)置的對(duì)象

Math

Math 是 JavaScript 中內(nèi)置的對(duì)象，稱(chēng)為數(shù)學(xué)對(duì)象，這個(gè)對(duì)象下即包含了屬性，也包含了許多的方法。

屬性/方法作用說(shuō)明

PI圓周率Math.PI? 屬性，返回圓周率

max找最大值Math.max(8, 3, 1) 方法，返回 8

min找最小值Math.min(8, 3, 1) 方法，返回 1

abs絕對(duì)值Math.abs(-1) 方法，返回 1

ceil向上取整Math.ceil(3.1)? ? 方法，返回 4

floor向下取整Math.floor(3.8)? 方法，返回 3

round四舍五入取整Math.round(3.8)? 方法，返回 4， 遇到.5則舍入到相鄰的在正無(wú)窮（+∞）方向上的整數(shù)

<script>

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

// 1. PI 屬性 圓周率

console.log(Math.PI)

// 2. max? 方法 找最大值

console.log(Math.max(8,4,2))// 8

// 3. min? 方法 找最小值

console.log(Math.min(8,4,2))// 2

// 4. abs 方法 取絕對(duì)值

console.log(Math.abs(-1))// 1

// 5. ceil 方法 向上取整 ? ceil 天花板 ? 往大了取

console.log(Math.ceil(1.1))// 2

console.log(Math.ceil(1.5))// 2

console.log(Math.ceil(1.8))// 2

console.log(Math.ceil(-1.1))//? -1

console.log(Math.ceil(-1.5))//? -1

console.log(Math.ceil(-1.8))//? -1

// 6. floor 方法 向下取整? floor 地板? 往小了取

console.log(Math.floor(1.1))// 1

console.log(Math.floor(1.5))// 1

console.log(Math.floor(1.8))// 1

console.log(Math.floor(-1.1))//? -2

console.log(Math.floor(-1.5))//? -2

console.log(Math.floor(-1.8))//? -2

// 7. round 方法 四舍五入取整

console.log(Math.round(1.1))// 1

console.log(Math.round(1.5))// 2

console.log(Math.round(1.8))// 2

console.log(Math.round(-1.1))// -1

console.log(Math.round(-1.8))// -2

console.log(Math.round(-1.5))// -1

</script>

數(shù)學(xué)對(duì)象提供了比較多的方法，這里不要求強(qiáng)記，通過(guò)演示數(shù)學(xué)對(duì)象的使用，加深對(duì)對(duì)象的理解。

隨機(jī)數(shù) random

lMath.random()? 隨機(jī)數(shù)， 返回一個(gè)0 - 1之間，并且包括0不包括1的隨機(jī)小數(shù)? [0, 1）

如何生成0-10的隨機(jī)整數(shù)呢？

Math.floor(Math.random()*(10+1))

如何生成5-15的隨機(jī)整數(shù)？

Math.floor(Math.random()*(10+1))+5

如何生成N-M之間的隨機(jī)整數(shù)

Math.floor(Math.random()*(M-N+1))+N

Math.floor(Math.random()*(差值+1))+最小值

<script>

// 1. Math隨機(jī)數(shù)? Math.random()

// 1.1 隨機(jī)的小數(shù) 0 ~1 之間

// 1.2 能取到0，但是取不到1 [0, 1)

// console.log(Math.random())

// 2. 取 0 ~ 10 之間的一個(gè)隨機(jī)整數(shù)

// Math.random() * (10 + 1)

// (0 ~ 0.99999) * 11

// 0 ~ 10.99999

// Math.floor(Math.random() * (10 + 1))

// console.log(Math.floor(Math.random() * (10 + 1)))

// 3. 取 5 ~ 15 之間的一個(gè)隨機(jī)整數(shù)

// Math.floor(Math.random() * (10 + 1))? 0 ~ 10

// Math.floor(Math.random() * (10 + 1)) + 5? 5 ~ 15

// console.log(Math.floor(Math.random() * (10 + 1)) + 5)

// 4. 取 n ~ m 之間的一個(gè)隨機(jī)整數(shù)? 4 ~ 12

// Math.floor(Math.random() * (差值 + 1)) + 最小值

console.log(Math.floor(Math.random()*(8+1))+4)

</script>

數(shù)據(jù)存儲(chǔ)

內(nèi)存中堆棧空間分配區(qū)別：

棧: 優(yōu)點(diǎn)訪(fǎng)問(wèn)速度快，基本數(shù)據(jù)類(lèi)型存放到棧里面

堆:優(yōu)點(diǎn)存儲(chǔ)容量大，引用數(shù)據(jù)類(lèi)型存放到堆里面

變量聲明

建議：? const 優(yōu)先，盡量使用const，原因是：

很多變量聲明的時(shí)候明確不會(huì)被更改了，為了安全性，那為什么不用 const 呢？

實(shí)際開(kāi)發(fā)中也是，比如 React、Vue，基本 const 聲明

總結(jié)：

有了變量先給const，如果發(fā)現(xiàn)它后面是要被修改的，再改為let

專(zhuān)業(yè)術(shù)語(yǔ)

術(shù)語(yǔ)解釋舉例

關(guān)鍵字在JavaScript中有特殊意義的詞匯let、var、function、if、else、switch、case、break

保留字在目前的JavaScript中沒(méi)意義，但未來(lái)可能會(huì)具有特殊意義的詞匯int、short、long、char

標(biāo)識(shí)（標(biāo)識(shí)符）變量名、函數(shù)名的另一種叫法無(wú)

表達(dá)式可以被求值的代碼，一般配合運(yùn)算符出現(xiàn)10 + 3、age? >= 18

語(yǔ)句一段可執(zhí)行的代碼if ()? ? for()