JavaScript入门——（6）对象

1、什么是对象

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

用来详细的描述某个事物，例如描述一个人

• 人有姓名、年龄、性别等信息、还有 吃饭睡觉打代码等功能
• 如果用多个变量保存则比较散，用对象比较统一
• 

比如描述 班主任 信息：

• 静态特征（姓名、年龄、身高、性别、爱好）=>可以使用数字，字符串，数组，布尔类型等表示
• 动态行为（点名，唱，跳，rap）=> 使用函数表示

2、对象使用

2.1 对象声明语法

let 对象名 = {}

let 对象名 = new Object()

2.2 对象有属性和方法组成

属性：信息或叫特征（名词）。比如 手机尺寸、颜色、重量等

方法：功能或叫行为（动词）。比如 手机打电话、发短信、玩游戏…

let 对象名 = {
    属性名 : 属性值,
    方法名 : 函数
}

2.3 属性 

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

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

练习：请声明一个产品对象，里面包如下信息：

要求：

商品对象名字：goods

商品名称命名为：name

商品编号：num

商品毛重：weight

商品产地：address

2.4 对象使用 

对象本质是无序的数据集合，操作数据无非就是 增 删 改 查 语法：

 

2.4.1 属性 - 查

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

语法：  对象名.属性

简单理解就是获得对象里面的属性值

2.4.2 属性-改 

语法： 对象名.属性 = 新值

2.4.3 属性-增 

语法：对象名.新属性 = 新值

2.4.4 属性-删（了解） 

语法：delete 对象名.属性

2.4.5 练习 

要求：

1. 请将商品名称里面的值修改为：小米 10 PLUS
2. 新增一个属性颜色 color 为‘粉色’
3. 请以此页面打印输出所有的属性值

使用2.3属性里面的练习来修改

2.4.6 属性-查的另外一种写法 

对于多词属性或者 - 等属性，点操作就不能用了。

可以采取：对象['属性']方式，单引号和双引号都可以

2.5 对象中的方法 

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

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

 声明对象，并添加了若干方法后，可以使用 . 调用对象中的函数，称为方法调用

也可以添加形参和实参

let person = {
    name : 'andy',
    sayHi : function (){
        document.write('hi~~')
    }
}
// 对象名.方法名()
person.sayHi()

注意：千万别忘了给方法名后面加小括号

练习： 给对象增加唱歌和跳舞的方法，并打印输出

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

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

3、遍历对象

for遍历对象的问题：

对象没有像数组一样的length属性。所有无法确定长度

对象里面是无序的键值对，没有规律。不像数组里面有规律的下标

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

• 一般不用这种方式遍历数组、主要是用来遍历对象
• for in语法中的 k 是一个变量，在循环的过程中依次代表对象的属性名
• 由于k是变量，所以必须使用 [] 语法解析
• 一定记住：k是获得对象的属性名，对象名[k] 是获得 属性值 

3.1 遍历数组对象 

需求：请把下面数据中的对象打印出来：

// 定义一个存储了若干学生信息的数组

let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]

需求：根据以上数据渲染生成表格

 

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

4、内置对象

4.1 内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

例如：document.write()、console.log()

4.2 内置对象Math

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

属性

作用：提供了一系列做数学运算的方法

Math对象包含的方法有：

• Math.PI：获取圆周率 console.log(Math.PI)
• random：生成0-1之间的随机数（包含0不包括1）
• ceil：向上取整
• floor：向下取整
• max：找最大数
• min：找最小数
• pow：幂运算 Math.pow(4,2) // 求 4 的 2 次方
• abs：绝对值
• sqrt：平方根 Math.sqrt(16)
• Math - JavaScript | MDN (mozilla.org)

4.3生成任意范围随机数

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

4.4 随机点名案例

需求：请把['赵云','黄忠','关羽','张飞','马超','刘备','曹操']随机显示一个名字到页面中，但是不允许重复显示

分析：

①：利用随机函数随机生成一个数字作为索引号

②：数组[随机数]生成到页面中

③：数组中删除刚才抽中的索引号

4.5 猜数字案例 

需求：程序随机生成1-10之间的一个数字，用户输入一个数字

分析：

①：如果大于该数字，就提示，数字猜大了，继续猜

②：如果小于该数字，就提示，数字猜小了，继续猜

③：如果猜对了，就提示猜对了，程序结束

DOCTYPE html>
    
    
    
   
    

猜数字游戏设定次数 

DOCTYPE html>
    
    
    
    

 4.6 生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是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之间的数字

DOCTYPE html>
    
    
    
 
    
    

5、 学成在线页面数据渲染列表页面

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

分析：根据数据来渲染页面

DOCTYPE html>
    
    
    
    
    
    
    
        
            
精品推荐
            查看全部