JavaScript 基础

第十五章 对象

对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

一、什么是对象

• 对象（object）：JavaScript里的一种数据类型
• 可以理解为是一种无序的数据集合， 注意数组是有序的数据集合

二、对象使用

1. 语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

2. 属性和访问

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

1. 属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 属性就是依附在对象上的变量
4. 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。

扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

3. 方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，我称之为方法调用。

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

4. null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测它的类型时，结果为 object。

三、遍历对象

for 遍历对象的问题：

• 对象没有像数组一样的length属性,所以无法确定长度
• 对象里面是无序的键值对, 没有规律。不像数组里面有规律的下标

let obj = {uname: 'pink'
}
for(let k in obj) {// k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'// obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组 因为 k 是 字符串

案例：打印学生信息

学生信息
将数据渲染到页面中...
学生列表
序号
姓名
年龄
性别
家乡

四、内置对象

回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

除了 console 对象外，JavaScritp 还有其它的内置的对象

1. Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

• 介绍：Math对象是JavaScript提供的一个“数学”对象
• 作用：提供了一系列做数学运算的方法
• Math对象包含的方法有：
  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • max：找最大数
  • min：找最小数
  • pow：幂运算
  • abs：绝对值

2. 生成任意范围随机数

• 如何生成N-M之间的随机数
  • Math.floor(Math.random() * (M - N + 1)) + N

3. 案例：随机点名

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号
②： 数组[随机数] 生成到页面中
③：数组中删除刚才抽中的索引号

4. 案例：猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束
分析：
①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句

5. 生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
①：如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色
②：如果参数传递的是false，则输出一个随机rgb的颜色
③：格式： function getRandomColor(flag){ }
console.log(getRandomColor(true)) //#ffffff
console.log(getRandomColor(false)) //rgb(255,255,255)
分析：
提示：16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-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)格式

五、拓展

1. 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

• 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
• 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

2. 堆栈空间分配区别

2.1 栈（操作系统）

由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面

2.2 堆（操作系统）

存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面

3. 简单类型的内存分配

• 值类型（简单数据类型）： string ，number，boolean，undefined，null
• 值类型变量的数据直接存放在变量（栈空间）中

4. 复杂类型的内存分配

• 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
• 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

第十六章 综合案例：学成在线页面渲染

需求：根据数据渲染列表页面

精品推荐
查看全部