对象（pink老师课程笔记）
对象（数据类型）-object
详细描述某个事物
无序的数据集合
对象的使用
声明
let 对象名 = {
属性名：属性值，
方法名：函数
}
对象有属性和方法组成
属性是对象内的变量
let obj = {
uname: '老师',
age: 18,
gender: '女'
}
console.log(obj)
使用-增删改查
let phone = {
uname: 'oppo r15',
num: '578794502386u40',
weight: '0.45kg',
address: '中国大陆'
}
console.log(phone)
// 查询属性——对象.属性名
console.log(phone.address)
// 修改属性——对象.属性名=新值
phone.weight = '0.55kg'
console.log(phone)
// 增加属性
phone.color = 'orange'
console.log(phone)
// 删除属性（了解）
delete phone.num
console.log(phone)
查的两种写法
- 对象名.属性名
- 对象名['[属性名']
// 查询属性——对象.属性名
console.log(phone.address)
console.log(phone['address'])
第二种方法记得加引号
调用
方法是对象内的函数
let phone = {
uname: 'oppo r15',
num: '578794502386u40',
weight: '0.45kg',
address: '中国大陆',
// 方法
fuc: function () {
console.log('打电话')
}
}
// 方法调用
phone.fuc()
可以传参
不要忘记添加小括号
null
相当于一个空对象
一般用于let obj = null
遍历对象-for in
对象无序，因此不适用for循环
for in语句
let arr = ['wy', 'res', 'nih']
for (let k in arr) {
// 打印数组的下标，但是为字符串（因此舍弃）
console.log(k)
console.log(arr[k])
}
// 遍历对象 for in
for (let key in phone) {
console.log(key) // 属性名 'uname' 'age'
console.log(phone[key])
}
key是带引号的属性名
<!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>
* {
margin: 0;
padding: 0;
}
table,
h3 {
margin: 2px auto;
text-align: center;
}
table,
th,
td {
border: 1px solid orange;
border-collapse: collapse;
font-size: 16px;
}
th,
td {
padding: 2px 4px;
}
th {
background-color: rgb(216, 166, 130);
}
tr:not(:first-child):hover {
background-color: orangered;
}
</style>
</head>
<body>
<h3>学生列表</h3>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
// 数据准备
let stu = [
{ name: '李华', age: 18, gender: '男', hometown: '陕西省' },
{ name: '李一华', age: 19, gender: '女', hometown: '湖南省' },
{ name: '李二华', age: 21, gender: '男', hometown: '浙江省' },
{ name: '李华三', age: 18, gender: '女', hometown: '山西省' }
]
// 渲染页面
for (let i = 0; i < stu.length; i++) {
document.write(`
<tr>
<td>${i + 1}</td>
<td>${stu[i].name}</td>
<td>${stu[i].age}</td>
<td>${stu[i].gender}</td>
<td>${stu[i].hometown}</td>
</tr>
`)
}
</script>
</table>
</body>
tr:not(:first-child):hover {
background-color: orangered;
}
第一行不变化
内置对象
document.write()
console.log()
Math
- random:生成0-1之间的随机数（包括0不包括1）
- ceil:向上取整
- floor:向下取整，与parseInt相似
- max
- min
- pow:幂运算
- abs:绝对值
- PI
- round:四舍五入
console.log(Math.PI)
console.log(Math.ceil(1.3))
console.log(Math.floor(1.3))
console.log(Math.pow(2, 3))
Math.random——[0,1)
console.log(Math.random())
// 0-10之间的随机数
console.log(Math.floor(Math.random() * (10 + 1)))
let arr = ['red', 'green', 'orange']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])
// 5-10之间的随机数
console.log(Math.floor(Math.random() * (5 + 1)) + 5);
// 生成N-M之间的随机数
// Math.floor(Math.random()*(M-N+1))+N
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
console.log(getRandom(11, 30))
随机点名
// 随机点名
let arr = ['小康', '小李', '小红', '小瑶']
// 得到一个随机数，作为数组的索引号
let random = Math.floor(Math.random() * arr.length)
document.write(arr[random])
// 随机点名改进，不允许重复出现（删除已出现的）
let arr = ['小康', '小李', '小红', '小瑶']
// 得到一个随机数，作为数组的索引号
let random = Math.floor(Math.random() * arr.length)
// 页面输出
document.write(arr[random])
// splice(起始位置，删除元素)
arr.splice(random, 1)
console.log(arr)
猜数字
// 猜数字
// 随机生成一个数字
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)
// 不断循环
while (true) {
// 用户输入
let num = +prompt('请输入一个数字')
// 判断输出
if (num > random) {
alert('大了')
} else if (num < random) {
alert('小了')
} else {
alert('对了')
break
// 退出循环
}
}
// 猜数字，只有3次机会
// 随机生成一个数字
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)
let flag = true // 开关变量
// 不断循环
for (let i = 0; i < 3; i++) {
// 用户输入
let num = +prompt('请输入一个数字')
// 判断输出
if (num > random) {
alert('大了')
} else if (num < random) {
alert('小了')
} else {
flag = false
alert('对了')
break
// 退出循环
}
}
//位于for循环的外面
if (flag) {
alert('次数已用完')
}
flag：开关变量
生成随机颜色
<script>
//定义颜色函数
function getRandomColor(flag = true) {
//true,返回#ffffff
if (flag) {
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
, 'a', 'b', 'c', 'd', 'e', 'f']
// for循环随机抽6次,累加到str里面
for (let i = 0; i < 6; i++) {
// 每次随机从数组中抽取一个
// random是数组的索引号,随机
let random = Math.floor(Math.random() * arr.length)
str += arr[random]
}
return str
} else {
//否则返回rgb(255,255,255)
let r = Math.floor(Math.random() * (255 + 1))
let g = Math.floor(Math.random() * (255 + 1))
let b = Math.floor(Math.random() * (255 + 1))
return `rgb(${r},${g},${b})`
}
}
//调用函数
let Color = getRandomColor(true)
console.log(Color)
数组对象类型
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
}
]
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<a href="#">
<img src=${data[i].src} title="${data[i].title}">
<h4>${data[i].title} </h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>
`)
- data[i].src:数组data中第i个对象中的src属性
- 基本数据类型存储的是值，引用数据类型存储的是地址
- 堆和栈：简单数据类型放在栈，复杂数据类型放在堆
