一、对象的增删改查
<!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>
let obj = {
'goods-name': '小米11,',
username: 'pink',
gender: '女',
age: 19
}
//对象的查询
obj.age
//对象的修改
obj.gender = '男'
//对象的增加
obj.hobby = '足球'
//对象的删除
delete pink.age
//查询的另外一种写法
obj['goods-name']
</script>
</body>
</html>
二、对象中的方法
let obg = {
uname: '刘德华',
song: function (x, y) {
console.log(x + y)
}
}
obg.song(1, 2)
三、遍历对象
let obj = {
'goods-name': '小米11,',
username: 'pink',
gender: '女',
age: 19
}
for (let k in obj){
console.log(obj[k]) //注意k是字符串类型
}
案例:
注意script是写在table里面的
<!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>
<table>
<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>
四、内置对象
Math.方法 查手册
生成M到N的随机数:Math.random()*(M-N+1) +N
拓展
栈存放:直接存放的是简单数据类型的值本身以及复杂数据类型的地址;
堆存放复杂数据类型:栈存放的是对象在堆中的地址,然后堆里存放数据。
引用数据类型:函数、数组、对象