(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
對(duì)象
1. 對(duì)象是什么
對(duì)象（object）：JavaScript里的一種數(shù)據(jù)類(lèi)型
可以理解為是一種無(wú)序的數(shù)據(jù)集合， 注意數(shù)組是有序的數(shù)據(jù)集合
用來(lái)描述某個(gè)事物，例如描述一個(gè)人
人有姓名、年齡、性別等信息、還有吃飯睡覺(jué)打代碼等功能
如果用多個(gè)變量保存則比較散，用對(duì)象比較統(tǒng)一
比如描述 班主任 信息：
靜態(tài)特征 (姓名, 年齡, 身高, 性別, 愛(ài)好) => 可以使用數(shù)字, 字符串, 數(shù)組, 布爾類(lèi)型等表示
動(dòng)態(tài)行為 (點(diǎn)名, 唱, 跳, rap) => 使用函數(shù)表示let obj= { uname:'zxc', age:18, sex:'man' }
2. 對(duì)象使用?
1. 對(duì)象聲明語(yǔ)法
例如：
實(shí)際開(kāi)發(fā)中，我們多用花括號(hào)。 {} 是對(duì)象字面量
2. 對(duì)象有屬性和方法組成
屬性：信息或叫特征（名詞）。 比如 手機(jī)尺寸、顏色、重量等…
方法：功能或叫行為（動(dòng)詞）。 比如 手機(jī)打電話、發(fā)短信、玩游戲…
3 . 屬性?
數(shù)據(jù)描述性的信息稱(chēng)為屬性，如人的姓名、身高、年齡、性別等，一般是名詞性的。
let obj= { uname:'zxc', age:18, sex:'man' }屬性都是成 對(duì)出現(xiàn)的，包括屬性名和值，它們之間使用英文 : 分隔
多個(gè)屬性之間使用英文 , 分隔
屬性就是依附在對(duì)象上的變量（外面是變量，對(duì)象內(nèi)是屬性）
屬性名可以使用 "" 或 ''，一般情況下省略，除非名稱(chēng)遇到特殊符號(hào)如空格、中橫線等
屬性- 查
聲明對(duì)象，并添加了若干屬性后，可以使用 . 獲得對(duì)象中屬性對(duì)應(yīng)的值，稱(chēng)之為屬性訪問(wèn)。
語(yǔ)法：對(duì)象名.屬性簡(jiǎn)單理解就是獲得對(duì)象里面的屬性值。
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
document.write(obj.age)
document.write(`<br>`)
document.write(obj.sex)?網(wǎng)頁(yè)顯示為：?? ? ? ? ? ? ? ? ? ? ? ? ??
屬性- 查的另外一種寫(xiě)法?
對(duì)于多詞屬性或則 - 等屬性，點(diǎn)操作就不能用了。
我們可以采取： 對(duì)象[‘屬性’] 方式， 單引號(hào)和雙引號(hào)都闊以總結(jié)：
沒(méi)有必要的時(shí)候直接使用點(diǎn)語(yǔ)法, 在需要解析變量的時(shí)候使用 [ ] 語(yǔ)法
let obj=
{
"uname-123":'zxc',
age:18,
sex:'man'
}
document.write(`<br>`)
document.write(obj["uname-123"])?網(wǎng)頁(yè)顯示為：? ? ? ? ? ? ? ? ? ??? ? ? ? ??
屬性- 改
?語(yǔ)法：對(duì)象名.屬性 = 新值
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
document.write(obj.age)
document.write(`<br>`)
obj.age=19
document.write(obj.age)網(wǎng)頁(yè)顯示為：? ? ? ? ? ? ? ? ? ? ? ? ??
屬性- 增?
語(yǔ)法：對(duì)象名.新屬性 = 新值
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
obj.live='happy'
console.log(obj);控制臺(tái)顯示為：? ? ? ? ? ? ? ? ? ??
屬性- 刪?
語(yǔ)法：delete 對(duì)象名.屬性
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
delete obj.age
console.log(obj);控制臺(tái)顯示為：? ? ? ? ? ? ? ? ? ??? ? ?
5. 對(duì)象中的方法
數(shù)據(jù)行為性的信息稱(chēng)為方法，如跑步、唱歌等，一般是動(dòng)詞性的，其本質(zhì)是函數(shù)。
1. 方法是由方法名和函數(shù)兩部分構(gòu)成，它們之間使用 : 分隔
2. 多個(gè)屬性之間使用英文 , 分隔
3. 方法是依附在對(duì)象中的函數(shù)
4. 方法名可以使用 "" 或 ''，一般情況下省略，除非名稱(chēng)遇到特殊符號(hào)如空格、中橫線等
6.調(diào)用對(duì)象中的方法?
聲明對(duì)象，并添加了若干方法后，可以使用 . 調(diào)用對(duì)象中函數(shù)，我稱(chēng)之為方法調(diào)用。
也可以添加形參和實(shí)參?
3.?遍歷對(duì)象?
for 遍歷對(duì)象的問(wèn)題：
對(duì)象沒(méi)有像數(shù)組一樣的length屬性,所以無(wú)法確定長(zhǎng)度
對(duì)象里面是無(wú)序的鍵值對(duì), 沒(méi)有規(guī)律. 不像數(shù)組里面有規(guī)律的下標(biāo)
一般不用這種方式遍歷數(shù)組、主要是用來(lái)遍歷對(duì)象
for in語(yǔ)法中的 k 是一個(gè)變量, 在循環(huán)的過(guò)程中依次代表對(duì)象的屬性名
由于 k 是變量, 所以必須使用 [ ] 語(yǔ)法解析
一定記?。?span style="color:#fe2c24;"> k 是獲得對(duì)象的屬性名， 對(duì)象名[k] 是獲得 屬性值
<!-- ?
//?定義一個(gè)存儲(chǔ)了若干學(xué)生信息的數(shù)組
???? let?students?=?[
??????{name:?'小明',?age:?18,?gender:?'男',?hometown:?'河北省'},
??????{name:?'小紅',?age:?19,?gender:?'女',?hometown:?'河南省'},
??????{name:?'小剛',?age:?17,?gender:?'男',?hometown:?'山西省'},
??????{name:?'小麗',?age:?18,?gender:?'女',?hometown:?'山東省'}
????]
需求：根據(jù)以上數(shù)據(jù)渲染生成表格
分析：
1. 打印表格 頭部和尾部
2. 中間的行遍歷數(shù)組，然后填充對(duì)象數(shù)據(jù) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
{
width: 600px;
text-align: center;
}
table,
th,
td
{
border: 1px solid #ccc;
border-collapse: collapse;
}
caption
{
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr
{
height: 40px;
cursor: pointer;
}
table tr:nth-child(1)
{
background-color: #ddd;
}
table tr:not(:first-child):hover
{
background-color: #eee;
}
</style>
</head>
<body>
<h2>學(xué)生信息</h2>
<p>將數(shù)據(jù)渲染到頁(yè)面中...</p>
<table>
<caption>學(xué)生列表</caption>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>家鄉(xiāng)</th>
</tr>
<!-- script寫(xiě)到這里 -->
<script>
// 1. 數(shù)據(jù)準(zhǔn)備
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小紅', age: 19, gender: '女', hometown: '河南省' },
{ name: '小剛', age: 17, gender: '男', hometown: '山西省' },
{ name: '小麗', age: 18, gender: '女', hometown: '山東省' },
{ name: '曉強(qiáng)', age: 16, gender: '女', hometown: '藍(lán)翔技校' }
]
// 2. 渲染頁(yè)面
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>
`)
}
</script>
</table>
</body>
</html>網(wǎng)頁(yè)顯示為：??
4. 內(nèi)置對(duì)象?
內(nèi)置對(duì)象是什么？
JavaScript內(nèi)部提供的對(duì)象，包含各種屬性和方法給開(kāi)發(fā)者調(diào)用
document.write()
console.log()
內(nèi)置對(duì)象-Math?
介紹：Math對(duì)象是JavaScript提供的一個(gè)“數(shù)學(xué)”對(duì)象
作用：提供了一系列做數(shù)學(xué)運(yùn)算的方法
Math對(duì)象包含的方法有：
????????random：生成0-1之間的隨機(jī)數(shù)（包含0不包括1）
????????ceil：向上取整
????????floor：向下取整
????????max：找最大數(shù)
????????min：找最小數(shù)
????????pow：冪運(yùn)算
????????abs：絕對(duì)值
生成任意范圍隨機(jī)數(shù)?
Math.random() 隨機(jī)數(shù)函數(shù)， 返回一個(gè)0 - 1之間，并且包括0不包括1的隨機(jī)小數(shù) [0, 1）
如何生成0-10的隨機(jī)數(shù)呢？
Math.floor(Math.random()?*?(10?+?1))
如何生成5-10的隨機(jī)數(shù)？文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-507019.htmlMath.floor(Math.random()?*?(5?+?1))?+?5
如何生成N-M之間的隨機(jī)數(shù)
Math.floor(Math.random()?*?(M?-?N?+?1))?+?N文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507019.html
<!-- 需求：程序隨機(jī)生成 1~10 之間的一個(gè)數(shù)字，用戶(hù)輸入一個(gè)數(shù)字
分析：
①：利用隨機(jī)數(shù)生成一個(gè)數(shù)字
②：需要一直猜，所以需要不斷的循環(huán)
③：因?yàn)闂l件是結(jié)果猜對(duì)了，就是判斷條件退出，用while循環(huán)合適
④：內(nèi)部判斷可以用多分支語(yǔ)句 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.生成隨機(jī)數(shù)
function getRandom(N,M)
{
return Math.floor(Math.random()*(M-N+1))+N
}
let random=getRandom(1,10)
while(1)
{
//2.用戶(hù)輸入
let num = +prompt('請(qǐng)輸入數(shù)字')
//3.判斷輸出
if(num>random)
{
alert('猜大了')
}
else if(num<random)
{
alert('猜小了')
}
else
{
alert('猜對(duì)了')
break
}
}
</script>
</body>
</html>到了這里，關(guān)于前端JavaScript入門(mén)-day05的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
