一、对象
1.什么是对象
2. 对象使用
（1）什么是对象以及对象的基本使用
（2）对象的操作-增删改查
查
改
增
删
删了解一下即可，因为最新的语法严格格式里面，删是不允许这么直接去删的
查的两种方法
<!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>对象的使用</title>
</head>
<body>
<script>
// 尽量不要用name因为有的是作为默认的保留字，会出问题 如console.log(window.name)
// 最后一个可以不用逗号隔开，前面的必须用逗号隔开
// 1.声明对象
let pepper = {
uname: 'pepper女士',
age: 30,
gender: '女'
}
console.log(pepper);
// 检测数据类型
console.log(typeof pepper);
let obj = {
// uname: '小米10青春版',
'goods-name': '小米10青春版',
num: '100012816024',
weight: '0.55kg',
address: '中国大陆'
}
/* obj.price = '4399元'
console.log(obj); */
/* obj.sing = function () {
console.log(hi);
} */
/* console.log(obj.uname); */
// 2. 使用属性 查 对象名.属性名
// console.log(obj.address);
// 3. 改
// 与改变量的取值类似
/* let num = 10
num = 20
console.log(num); */
/* obj.address = '重庆'
console.log(obj); */
// 4. 增
/* obj.sale = '骨折'
console.log(obj); */
// 5. 删（了解）
/* delete obj.sale
console.log(obj); */
// 练习
obj.uname = '小米10 PLUS'
obj.color = '粉色'
console.log(obj.uname);
console.log(obj.num);
console.log(obj.weight);
console.log(obj.address);
console.log(obj.color);
// console.log(obj.goods - name); 错误
// 查的另外一种属性
// 对象名['属性名']
// 因为这种方法属性名要加引号 就当字符串来看了 -就不会被解析为减号了 进行字符串的拼接
console.log(obj['goods-name']);
// 查总结：
// （1）对象名.属性名 obj.age
// （2）对象名['属性名'] obj['age']
</script>
</body>
</html>
（3）对象的方法
<!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>对象的方法</title>
</head>
<body>
<script>
// 多个属性之间用逗号分隔，最后一个可以不用写
let obj = {
uname: '刘德华',
// 方法
song: function (x, y) {
// console.log('冰雨');
console.log(x + y);
},
dance: function () {
console.log('爱的华尔兹');
}
}
// 方法调用 对象名.方法名
// obj.song()
obj.song(1, 2)
// 不能 console.log(obj.song(1, 2)); //undefined 因为没有return
// document.write()是一个典型的方法
</script>
</body>
</html>
3.遍历对象
<!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>遍历对象</title>
</head>
<body>
<script>
// for in我们不推荐遍历数组
let arr = ['pink', 'black', 'purple']
for (let k in arr) {
console.log(k); // 打印出来是数组的下标（索引号） 但是它的数据类型是字符串（控制台里面是黑色）
console.log(arr[k]); //我们不用for in去遍历数组的原因：索引号是字符串型，后面很容易出问题 '0' '1' '2'
// 1. for in遍历对象
// 不用以前的for循环是因为我们不知道下标，长度
let obj = {
uname: '烤串',
age: 20,
gender: '男'
}
// 2. 遍历对象
for (let k in obj) {
console.log(k); //打印出来是属性名 且是字符串形式'uname' 'age'
// console.log(obj.k); 打印出来是3个undefined
// 原因：相当于console.log(obj.'uname');
// 这种格式的正确写法：console.log(obj.unmae);
// 依据另外一种格式：console.log(obj['uname']);
// 'uname' === k 输出属性值 obj[k]
console.log(obj[k]);
}
}
</script>
</body>
</html>
<!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>遍历数组对象</title>
</head>
<body>
<script>
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 21, gender: '女', hometown: '海南省' },
{ name: '小刚', age: 22, gender: '男', hometown: '山东省' },
{ name: '小李', age: 18, gender: '女', hometown: '陕西省' }
]
for (let i = 0; i < students.length; i++) {
// console.log(i); //打印出来的是下标（索引号） 是数字型的 所以我们不用for in
// console.log(students[i]); //打印出来的是每一个对象
// console.log(students['name']); //undefined
console.log(students[i].name);
console.log(students[i].hometown);
}
</script>
</body>
</html>
4.渲染学生信息表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渲染学生信息表案例</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>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- 从第二行开始渲染，因为别的都是固定的，不需要去渲染 -->
<script>
// 1. 数据准备
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 21, gender: '女', hometown: '海南省' },
{ name: '小刚', age: 22, gender: '男', hometown: '山东省' },
{ name: '小李', age: 30, gender: '女', hometown: '重庆市' },
// 如果新来一个人，页面是不需要动的，只需要新添一条数据即可
{ name: '小杨', age: 66, gender: '男', hometown: '贵州省' }
]
// 2. 渲染页面
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.内置对象
<!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>数学内置对象Math</title>
</head>
<body>
<script>
// 属性
console.log(Math.PI);
// 方法
// ceil天花板的意思 向上取整
console.log(Math.ceil(1.1)); //2
// floor 向下取整
console.log(Math.floor(1.9)); //1
console.log('------------------------');
// 四舍五入 round
console.log(Math.round(1.1)); //1
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); //-1
// 我们以前学的四舍五入是往数字大了取，-1.5应该是-2，但是这里是往加了符号谁大往哪边取
console.log(Math.round(-1.5)); //-1
console.log(Math.round(-1.9)); //-2
console.log(Math.round(-1.51)); //-2
// 前面学过的取整函数 parseInt(1.6) //1 它有个特点：不管后面的小数部分多大都会舍弃
// parseInt('12px') //12 parseInt()和Math.floor()作用类似 但是parseInt()里面加字符串会省略掉字符串部分，而Math.floor则显示NaN，它只能放数值不能放字符串
console.log(Math.max(1, 2, 3, 4, 5)); //数组没有这个方法，数组还是需要我们去求，或者后面学了学了扩展运算符能有很多小技巧筛选出数组，一句话就行，不需要遍历
console.log(Math.min(1, 2, 3, 4, 5));
// 取绝对值
console.log(Math.abs(-99));
// null类似 let obj = {}
let obj = null //null通常用于我们这个变量将来要放对象，但是我们还没准备好对象，先用null替代，之后再替换掉，所以null叫空对象，是对象数据类型
</script>
</body>
</html>
笔记里面的
内置对象-随机数函数
<!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>随机数函数</title>
</head>
<body>
<script>
// 左闭右开 能取到0 但是取不到1 中间的一个随机小数
// console.log(Math.random());
// 0~10之间的整数
/* // console.log(Math.floor(Math.random() * 11));
let arr = ['red', 'green', 'blue']
// let random = Math.floor(Math.random() * 3)
let random = Math.floor(Math.random() * arr.length)
// console.log(random); //0, 1, 2
console.log(arr[random]); */
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
console.log(getRandom(4, 9));
</script>
</body>
</html>
<!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>随机点名案例</title>
</head>
<body>
<script>
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 1. 得到一个随机数， 作为数组的索引号， 这个随机数是0~6
let random = parseInt(Math.random() * arr.length)
// 2. 页面输出数组里面的元素
document.write(arr[random])
// 数组元素的删除：shift删除第一个数组元素，pop删除最后一个元素 一个数组元素，pop删除最后一个数组元素，
// 3. splice(起始位置（数组的下标)，删除几个元素）
arr.splice(random, 1)
console.log(arr);
</script>
</body>
</html>
<!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>猜数字游戏</title>
</head>
<body>
<script>
// 1. 随机生成一个数字 1~10
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)
console.log(random);
// 需要不断地循环
while (true) {
// 2. 用户输入一个值
let num = +prompt('请输入您猜的数字：')
// 3. 判断输出
if (num > random) {
alert('您猜大了')
} else if (num < random) {
alert('您猜小了')
} else {
alert('猜对啦， 您真厉害')
break //退出循环
}
}
// 可以用二分法去猜数字，第一次猜一半5，提示小了就往5~10去猜
</script>
</body>
</html>
<!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>猜数字游戏设定次数</title>
</head>
<body>
<script>
// 1. 随机生成一个数字 1~10
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)
// 2. 设定三次 三次没猜对就直接退出
let flag = true //这个变量我们也称之为开关变量
for (let i = 1; i <= 3; i++) {
let num = +prompt('请输入1~10之间的一个数字：')
if (num > random) {
alert('您猜大了，继续')
} else if (num < random) {
alert('您猜小了，继续')
} else {
flag = false
alert('猜对了，你真厉害')
break
}
// 代码从上往下执行，猜一次就会执行一次这个句子，但是我们想整个i++都执行完了再执行
/* if (flag) {
alert('次数已经用完')
} */
}
// 但是这样也会有问题，当次数没用完就猜对，也会执行这条语句
// 写到for的外面来
if (flag) {
alert('次数已经用完')
}
</script>
</body>
</html>
<!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>随机颜色案例</title>
<style>
div {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. 自定义一个随机颜色函数
// function getRandomColor(flag) {
function getRandomColor(flag = true) {
// 3. 如果是true 则返回 #ffffff
if (flag) {
// 3. 如果是true 则返回 #ffffff
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 = 1; i <= 6; i++) {
// 每次要随机从数组里面抽取一个
// random是数组的索引号 是随机的
let random = Math.floor(Math.random() * arr.length)
// str = str + arr[random]
// push是数组可以往数组里面去追加，这里是字符串
str += arr[random]
}
return str
} else {
// 4. 否则是 false 则返回 rgb(255, 255, 255)
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
// 2. 调用函数 getRandomColor(布尔值)
console.log(getRandomColor(false));
console.log(getRandomColor(true));
// 没有参数的情况，默认返回的是rgb格式，但是我们知道16进制是最常用的 所以我们可以考虑flag加true 默认值 当有参数传过来，默认值就不执行，当没有参数传过来，就执行默认值
const div = document.querySelector('div')
div.style.backgroundColor = getRandomColor()
</script>
</body>
</html>
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>学成在线首页</title>
<link rel="stylesheet" href="./css/style.css">
<style>
</style>
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<!-- <li>
<a href="#">
<img src="images/course01.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</a>
</li> -->
<!-- 因为script渲染的是小li，所以把script放在ul里面 -->
<script>
// 数组对象
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
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
// 后台增加了一条数据，会自动渲染
{
src: 'images/course08.png',
title: '自动添加的模块',
num: 1590
}
]
// 数组对象它的本质还是数组
/* data[i]是数组里面的每一个对象 */
// 这里不包起来的话，title里面的内容有空格的话，只会显示空格前面的内容！！ 外双内单的形式 h4的title没问题是因为它是丢进盒子里面的，而title里面的title是鼠标经过才会出现的
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>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html>
扩展-术语解释
扩展-基本数据类型和引用数据类型
简单数据类型里面存的是值，复杂数据类型里面存的是地址，复杂数据类型的结果存在堆里面（js里面其实没有堆和栈，我们只是借助来理解）
<!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>数据类型存储</title>
</head>
<body>
<script>
let num1 = 100
let num2 = num1
num2 = 900
console.log(num1); //结果是？ 100
let obj1 = {
age: 18
}
let obj2 = obj1
// 修改属性
obj2.age = 20
console.log(obj1.age); //结果是20
</script>
</body>
</html>
4395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
