对象
使用对象
-
声明人对象
-
属性和方法都要写在对象里面
let person = {
uname:'甘雨',
age:2000,
sex:'女',
sayHi: function(){
console.log('Hi~~~~~~~~~')
}
}
- 1.访问属性 对象.属性名
console.log(person.uname)
console.log(person.age)
- 2.访问属性 对象.[‘属性名’]
console.log(person['sex'])
- 调用方法 对象.方法名()
person.sayHi()
对象操作
let obj = {
uname:'小明',
age:18
}
console.log(obj.age)
// 修改 对象.属性 = 新值
obj.age = 81
console.log(obj.age)
// 新增一个属性
obj.sex = '男'
obj.simg = function() {
document.write('hi')
}
console.dir(obj)
obj.simg()
// 删除
(function () {
delete obj.age
console.dir(obj)
}())
遍历对象
<script>
let obj = {
uname:'小明',
age:18
}
// for (let k in 对象) {}
// k变量 k 或者 key value
for (let k in obj) {
console.log(k) //属性名
console.log(obj[k]) //属性值
}
数学Math对象
console.log(Math.PI)//圆周率
console.log(Math.random())//随机数
console.log(Math.ceil(1.2))//向上去整
console.log(Math.floor(1.2))//向下去整
console.log(Math.round(1.2))//就近去整（负数往大取-1.5）
console.log(Math.max(1,2,654,54,4))
案例
学生信息表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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: 8px;
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: #ccc;
}
</style>
</head>
<body>
<script>
document.write(`
<h2>学生信息</h2>
<p>将数据渲染到页面中</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
`)
let student = [
{ name : '刻晴', age: '18',gender: '女', hometown:'璃月' },
{ name : '香菱', age: '18',gender: '女', hometown:'璃月' },
{ name : '凝光', age: '22',gender: '女', hometown:'璃月' },
{ name : '甘雨', age: '2000',gender: '女', hometown:'璃月' },
{ name : '钟离', age: '5000',gender: '男', hometown:'璃月' },
]
// 遍历数组
for (let i = 0; i < student.length; i++){
document.write(`
<tr>
<th>${i + 1}</th>
<th>${student[i].name}</th>
<th>${student[i].age}</th>
<th>${student[i].gender}</th>
<th>${student[i].hometown}</th>
</tr>
`)
}
document.write(`
</table>
`)
</script>
</body>
</html>
随机数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
//含最大值，含最小值
}
let str = ['刻晴','香菱', '凝光','甘雨','钟离']
console.log(str[getRandomIntInclusive(0,str.length - 1)])
随机点名
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
//含最大值，含最小值
}
let arr = ['刻晴','香菱', '凝光','甘雨','钟离']
let random = getRandomIntInclusive(0,arr.length - 1)
console.log(arr[random]);
arr.splice(random,1)//arr.splice(初始位置,删几个)
猜数字
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
let random = getRandomIntInclusive(1,10)
while (true){
let num = +prompt('输入一个数')
if(random < num){
alert('太大了')
}
if(random > num){
alert('小了')
}
else{
alert('正确')
break
}
}