JavaScript 基础五 对象
- 1. 对象
- 2. 对象使用
- ① 声明语法
- ② 对象有属性和方法组成
- ③ 属性
- 对象属性的增删改查操作
- ④ 方法
- 3. 对象遍历
- 实例
- 4. 内置对象
- ① 内置对象
- ② 内置对象Math
- 属性
- 方法
引入：保存网站用户信息，比如姓名、年龄、电话号码，用以前学过的数据类型不方便。
1. 对象
对象 object 是JavaScript里的一种数据类型。
可以理解为一种无序的数据集合，注意数组是有序的数据集合。
let obj = {
uname: 'pink',
age: 18,
gender: '女'
}
对象的特点：
①无序的数据的集合
②可以详细描述某个事物
2. 对象使用
① 声明语法
let 对象名= {}
let 对象名= new Object()
例如 let person= {} 声明了一个person的对象
{}是对象字面量。
对象和null
let obj = {}
typeof obj 是 object
typeof null 是 object
所以也可以 用 let obj = null 表示这个变量我以后要来存放对象
② 对象有属性和方法组成
属性：信息或特征（名词）。比如手机尺寸、颜色、重量等
方法：功能或行为（动词）。比如手机打电话、发短信、玩游戏等
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
③ 属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等。
- 属性都是成对出现的，包括属性名和值，它们之间用英文冒号（:）分隔。
- 多个属性之间用英文逗号分隔。
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用 双引号或者单引号，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
- 对象属性没有顺序。
对象属性的增删改查操作
增删改查
对象 ['属性名']
④ 方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
let person = {
name: '刘德华',
singSong: function() {
console.log('冰雨')
}
count: function(x, y) {
console.log(x+y)
}
}
方法调用： 对象名.方法名
person.singSong()
类比 document.wirte()
方法增加也可以和属性增加一样，但是我们一般不这么做：
let user = {}
user.name = 'xiaoming'
user.['age'] = 18
//动态添加'对象的方法'
user.move = function() {
console.log('移动一点距离')
}
3. 对象遍历
对象里面是无序的键值对，没有规律，不像数组里面有规律的下标。
for in语法
let obj = {
name: 'pink',
age: 18,
gender: '女'
}
for(let k in obj) {
console.log(k) //获得对象属性是 k
console.log(obj[k]) //获得对象值是 obj[k]
}
这里不可以写 obj.k。如果是obj.name，那么取出的是name这个属性，但是如果写成了obj.k，取的就是 k 这个属性。当然不仅仅是这么简单，还更因为 key 里面存的是 字符串类型，key 是 ‘name’ 而不是 name
也可以用在数组中，但因为索引是字符串型的，很少会拿这种方式遍历数组。
let arr = ['pink', 'green', 'blue']
for(let k in arr) {
console.log(k) //数组的下标 索引号 ,请注意这里打印出来的是字符串类型
}
数组对象： 数组的每一个成员都是对象
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'} ,
{name: '小红', age: 19, gender: '女', hometown: '河男省'} ,
{name: '小刚', age: 17, gender: '男', hometown: '山东省'} ,
{name: '小丽', age: 18, gender: '女', hometown: '山西省'}
]
for(int i = 0; i < students.length; i++) {
console.log(i) //下标索引号
console.log(students[i]) //每一个对象
for(let k in students[i]) {
}
}
实例
静态写法为：
<!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>
<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>
<body>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>19</td>
<td>女</td>
<td>河南省</td>
</tr>
<tr>
<td>3</td>
<td>小刚</td>
<td>17</td>
<td>男</td>
<td>山西省</td>
</tr>
<tr>
<td>4</td>
<td>小丽</td>
<td>18</td>
<td>女</td>
<td>山东省</td>
</tr>
</table>
</body>
</html>
动态渲染写法：
① 数据准备
② 渲染页面
<!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>
<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>
<body>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'} ,
{name: '小红', age: 19, gender: '女', hometown: '河男省'} ,
{name: '小刚', age: 17, gender: '男', hometown: '山东省'} ,
{name: '小丽', age: 18, gender: '女', hometown: '山西省'}
]
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>
4. 内置对象
① 内置对象
例如 document.write(), console.log()
② 内置对象Math
Math对象是 JS提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
Math对象包含的方法有：
Ø random：生成0-1之间的随机数（包含0不包括1）
Ø ceil：向上取整
Ø floor：向下取整
Ø max：找最大数
Ø min：找最小数
Ø pow：幂运算
Ø abs：绝对值
Ø Math对象在线文档
属性
- Math.PI，获取圆周率
// 圆周率
console.log(Math.PI);
方法
- Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
- Math.ceil，数字向上取整
ceil是天花板的意思。
// 舍弃小数部分，整数部分加1
Math.ceil(3.4) // 4
- Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变
Math.floor(4.68) // 4
- 注意区别 parseInt()取整函数
parseInt可以转化字符
parseInt(1.2) // 1
parseInt('12px') // 12
- Math.round，四舍五入取整
小数部分等于0.5会舍入到正方向上相邻的整数。
// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)
Math.round(-20.5)
Math.round(-20.51)
- Math.max，在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
- Math.min，在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)
- Math.pow，幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
- Math.sqrt，平方根
// 求某数的平方根
Math.sqrt(16)
数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。
