对象
1.什么是对象?
对象(object):JavaScript里的一种数据类型
无序的数据集合
2.对象怎么使用?
<script>
let obj = {
// 属性名 : 属性值 用 , 号隔开
name : '小明',
age : 18,
// 方法名 :函数
color : function name() {
}
}
// 使用对象
// 方法一
console.log(obj.age);
// 方法二 一定要加分号
document.write(obj['name'])
</script>
对象中方法的访问
<script>
let arr = {
sayHello:function () {
document.write('我就不打招呼')
}
}
//记得一定要加()
arr.sayHello()
</script>
拓展小知识
<script>
let name = 'color'
let person = {
name:'路飞',
color:'yellow'
}
console.log(person.name); //输出:路飞
console.log(person['name']);//输出:路飞
console.log(person[name]);//输出:yellow 当没有''时,里面的东西表示变量
console.log(person[color]); //报错
</script>
新增对象的属性和方法
<script>
let person = {
name : '牛牛'
}
// 如果没有name这个属性名,那就是新增,如果有,那就是修改
person.name = '三三'
// 新增
person.sum = function () {
document.write('你真好')
}
</script>
删除对象中的属性
<script>
let person ={
name: '海贼王'
}
delete person.name
console.log(person.name); //输出:undefine
</script>
遍历对象
<script>
let person = {
name: '芳芳',
age: 20,
height:166
}
for (let k in person) {
document.write(`属性名:${k}`)
document.write(`属性值:${person[k]}`)
}
//注意,输出属性值的写法是固定的 对象名[key],不要加字符串!!!!
</script>
案例学生列表
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
table{
margin: 100px auto;
border-collapse: collapse;
}
th,td{
width: 100px;
height: 50px;
text-align: center;
}
th{
background-color: #ccc;
}
</style>
</head>
<body>
<script>
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
let trHtml = `<table border="1">
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
for (let index = 0; index < students.length; index++) {
trHtml += ` <tr>
<td>${index + 1}</td>`
for (let k in students[index]) {
trHtml += `<td>${students[index][k]}</td>`
}
trHtml += ` </tr>`
}
trHtml += `</table>`
document.write(trHtml)
</script>
内置对象
<script>
// 随机生成0-1的数,包括0,不包括1
console.log(Math.random()); //0.4341014536610355
// 向上取整
console.log(Math.ceil(0.7)); //1
// 向下取整
console.log(Math.floor(1.8)); //1
// 最大值
console.log(Math.max(1,3,5,7,99)); // 99
// 四舍五入
console.log(Math.round(4.7)); //5
// 最小值
console.log(Math.min(2,4,1,6)); //1
// 幂运算,平方,立方,n次方
console.log(Math.pow(2,3)); //8
console.log(Math.pow(2,2)); //4
// 绝对值
console.log(Math.abs(-6));//6
</script>
生成随机数
<script>
// 0-10
Math.floor(Math.random() * 11)
Math.round(Math.random() * 10)
// 5-10
Math.round(Math.random() * 5) + 5
</script>
案例,随机点名
let num = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
function getRandom(max,min) {
return Math.round(Math.random() * (max - min)) + min
}
while(num.length > 0){
let num1 = getRandom(num.length - 1,0)
console.log(num[num1]);
num.splice(num1,1)
}
// for (let i = 0; i <= 6; i++) {
// let arr = Math.round(Math.random() * (6 - i))
// document.write(num[arr])
// num.splice((arr),1)
// }
引用数据类型
1.数组
2.对象
3.函数