对象
1. 对象是什么
对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合， 注意数组是有序的数据集合
用来描述某个事物，例如描述一个人
人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
如果用多个变量保存则比较散，用对象比较统一
比如描述 班主任 信息：
静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
动态行为 (点名, 唱, 跳, rap) => 使用函数表示
let obj = {
uname: '我是哈哈',
age: 18,
sex: '女'
}
可以看出类似C++里面的结构体
总结：
1. 对象是什么？
对象是一种数据类型
无序的数据的集合
2. 对象有什么特点？
无序的数据的集合
可以详细的描述描述某个事物
1.2 对象使用
目标：掌握对象语法，用它保存多个数据
1. 对象声明语法
let 对象名 = {}
let 对象名 = new Object()实际开发中，我们多用花括号。 {} 是对象字面量
2. 对象有属性和方法组成
属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…
let 对象名 = {
属性名: 属性值,
方法名: 函数
}3. 属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
属性都是成 对出现的，包括属性名和值，它们之间使用英文
:
分隔
多个属性之间使用英文
,
分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 "" 或 ''，
一般情况下省略
，除非名称遇到特殊符号如空格、中横线等
总结：
1. 对象属性有顺序吗？
没有
2. 属性和值用什么符号隔开？多个属性用什么隔开？
属性和值用 ; 隔开
多个属性用，逗号隔开
练习
请声明一个产品对象，里面包如下信息：
要求：
商品对象名字： goods
商品名称命名为： name
商品编号： num
商品毛重： weight
商品产地： address
let goods = {
name: '小米10',
num: '1000012816024',
weight: 0.55,
address: '中国大陆'
}
document.write(`
品牌：小米（MI）<br>
商品名称：${goods.name}, 商品编号：${goods.num},商品毛重：${goods.weight},商品产地：${goods.address}
`)
console.log(`
品牌：小米（MI）
商品名称：${goods.name}, 商品编号：${goods.num},商品毛重：${goods.weight},商品产地：${goods.address}
`)
目标：能够使用对象中的数据
3. 属性-查
声明对象，并添加了若干属性后，可以使用 . 获得对象中属性对应的值，我称之为属性访问。
语法：
对象名.属性
简单理解就是获得对象里面的属性值。
let goods = {
name: '小米10',
num: '1000012816024',
weight: 0.55,
address: '中国大陆'
}
document.write(`
品牌：小米（MI）<br>
商品名称：${goods.name}, 商品编号：${goods.num},商品毛重：${goods.weight},商品产地：${goods.address}
`)
console.log(`
品牌：小米（MI）
商品名称：${goods.name}, 商品编号：${goods.num},商品毛重：${goods.weight},商品产地：${goods.address}
`)
目标：能够使用对象中的数据
3. 属性-改
语法：
对象名.属性 = 新值
3. 属性-增
语法：
对象名.新属性 = 新值
3. 属性-删 （了解）
语法：
delete 对象名.属性
练习
请对产品对象，做如下操作：
要求:
1. 请将商品名称里面的值修改为： 小米10 PLUS
2. 新增一个属性颜色 color 为 ‘粉色’
3. 请依次页面打印输出所有的属性值
3. 属性-查的另外一种写法
对于多词属性或则 - 等属性，点操作就不能用了。
我们可以采取： 对象[‘属性’] 方式， 单引号和双引号都阔以
对象[‘属性’] 方式， 单引号和双引号都阔以
也可以用于其他正常属性，比如：
[]语法里面的值如果不添加引号 默认会当成变量解析
[]一定要加上''引号
总结：
没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法
总结：
1. 对象访问属性有哪两种方式？
点形式 对象.属性
[] 形式 对象[‘属性’]
2. 两种方式有什么区别？
点后面的属性名一定不要加引号
[] 里面的属性名一定加引号
后期不同使用场景会用到不同的写法
5. 对象中的方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
let person = {
name: 'andy',
sayHi: function () {
document.write('hi~~')
}
}
person.sayHi()
//这里跟
document.write()// 简直一模一样
1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
6. 对象中的方法
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。
也可以添加形参和实参
没有返回值，就打印该函数就是一个undefined类型！！！
总结：
1. 对象访问方法是如何实现的？
对象.方法()
person.sayHi()
2. 对象方法可以传递参数吗？
可以，跟函数使用方法基本一致
1. 4 遍历对象
目标：能够遍历输出对象里面的元素
遍历对象
for 遍历对象的问题：
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
一般不用这种方式遍历数组、主要是用来遍历对象
for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
由于 k 是变量, 所以必须使用 [ ] 语法解析
一定记住：
k
是获得对象的
属性名
，
对象名[k]
是获得
属性值
遍历对象：
总结：
1. 遍历对象用那个语句？ for in
2. 遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？
获得对象属性是 k
获得对象值是 obj[k]
案例
遍历数组对象
需求：请把下面数据中的对象打印出来：
// 定义一个存储了若干学生信息的数组
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
let student = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
for (let k in student) {
for (let key in student[k]) {
document.write(`${student[k][key]} `)
}
document.write(`<br>`)
}
需求：根据以上数据渲染生成表格
分析：
1. 打印表格 头部和尾部
2. 中间的行遍历数组，然后填充对象数据
<!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>
.front th {
font-weight: 400;
}
th,
td {
width: 100px;
height: 30px;
text-align: center;
}
.second {
background-color: aliceblue;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<script>
let student = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
document.write(`<table border="1" cellspacing="0">`)
document.write(`
<tr class="front">
<th colspan="5">学生列表</th>
</tr>
<tr class="second">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
`)
let i = 1
for (let k in student) {
// for (let key in student[k]) {
document.write(`
<tr>
<td>${i++}</td>
<td>${student[k].name}</td>
<td>${student[k].age}</td>
<td>${student[k].gender}</td>
<td>${student[k].hometown}</td>
</tr>
`)
}
document.write(`</table>`)
</script>
</body>
</html>1.5 内置对象
目标：学会调用JavaScript为我们准备好的内置对象
1.5 内置对象-内置对象是什么？
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
思考：我们之前用过内置对象吗？
document.write()
console.log()
1.5 内置对象-Math
介绍：
Math对象是JavaScript提供的一个“数学”对象
作用：
提供了一系列做数学运算的方法
Math对象包含的方法有：
random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值
//属性
console.log(Math.PI)
//方法
//ceil 天花板 向上取整
console.log(Math.ceil(1.1)) //2
console.log(Math.ceil(1.5)) //2
console.log(Math.ceil(1.9)) //2
// floor 地板 向下取整
console.log(Math.floor(1.1)) //1
console.log(Math.floor(1.5)) //1
console.log(Math.floor(1.9)) //11.5 内置对象-生成任意范围随机数
Math.random() 随机数函数， 返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）
如何生成0-10的随机数呢？
Math.floor(Math.random() * (10 + 1))
如何生成5-10的随机数？
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(4, 8))Math.round()四舍五入 就是要比较看离当前位置的 左右整数哪个更加接近！！！
方法的调用和方法的新增：
let person = {
name: '小红',
age: 18,
singing: function () {
console.log('两只老鼠，两只老鼠，跑得快，跑得快……')
},
run: function () {
console.log('我跑的非常快……')
}
}
// 方法的调用
person.run()
let user = {}
// 新增属性
user.name = '小明'
// 新增方法
user.move = function () {
console.log('移动了一小点的距离……')
}
console.log(user)
user.move()
null 是一个空对象:
也就是说：
null ===let user = {}
案例 随机点名案例
需求：请把
[‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号
②： 数组[随机数] 生成到页面中
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])
需求：请把
[‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是
不允许重复显示
分析：
①：利用随机函数随机生成一个数字作为索引号
②：数组[随机数] 生成到页面中
③：数组中删除刚才抽中的索引号
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let n = arr.length
for (let i = 0; i < n; i++) {
let random = Math.floor(Math.random() * arr.length)
document.write(arr[random])
arr.splice(random, 1)
}案例 猜数字游戏
需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束
let sum = Math.floor(Math.random() * 11)
// alert(sum)
while (1) {
let num = prompt('请输入一个数字')
if (sum > num) {
alert(`猜大了`)
}
else if (sum < num) {
alert(`猜小了`)
}
else {
alert(`猜对了`)
break
}
}案例 生成随机颜色
需求：
该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
分析：
提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符,需要用到数组，
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
提示: rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字
步骤：
①：如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。
②：如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字符串rgb(255,255,255)格式
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
let num = +prompt(`请输入你要输入的值`)
document.write(Boolean(num))
if (Boolean(num)) {
let str = '#'
for (let i = 0; i < 6; i++) {
let sum = Math.floor(Math.random() * 16)
console.log(sum)
str += arr[sum]
}
console.log(str)
}
else {
let str = 'rgb('
for (let i = 0; i < 3; i++) {
let sum = Math.floor(Math.random() * 256)
str += sum
if (i < 2) str += ','
}
str += ')'
console.log(str)
}
需求：根据数据渲染列表页面
分析：
①：根据数据来渲染页面
<!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>
<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
},
]
// <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>
document.write(` <div class="box-bd">
<ul class="clearfix">`)
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>
`)
}
document.write(`
</ul>
</div>
</div>`)
</script>
</body>
</html>目标：知道一些术语，让自己更专业
拓展- 基本数据类型和引用数据类型
目标：了解基本数据类型和引用数据类型的存储方式
简单类型又叫做基本数据类型或者
值类型
，复杂类型又叫做
引用类型
。
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
1. 简单类型的内存分配
值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中
2. 复杂类型的内存分配
引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
eg:
对于不同类型的数据类型，直接进行赋值构造，都是进行浅拷贝，那么直接进行拷贝地址，然后进行覆盖值的大小
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
