27 对象

27.1 对象的简介和声明

对象（object）是JavaScript里的一种数据类型，可以理解为是一种无序的数据集合。

对象声明语法

let 对象名 = {}
let 对象名 = new Object()

//例子
let person = {}

{} 是对象字面量

对象有属性和方法组成

  • 属性：数据描述性的信息称为属性
  • 方法：功能或叫行为。
let 对象名 = {
  属性名: 属性值,
  方法名: 方法值
}

27.2 对象的属性

let obj = {
  uname: 'pink老师',
  age: 18,
  gender: '女'
}

注：属性名可以使用 “” 或 ’’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

27.3 对象的操作（增删改查）

  • 查：查询对象：对象.属性名或：对象['属性名']
  • 改：重新赋值 对象.属性名 = 属性值
  • 增：对象添加新的数据，对象名.新属性名 = 新属性值
  • 删：删除对象中属性，delete 对象名.属性名
let obj = {
    uname: 'pink老师',
    'user-name': 'pink',
    age: 18,
    gender: '女'
}

//属性查询1
console.log(obj.uname);
console.log(obj.age);
//属性查询2
console.log(obj['user-name']);

//属性修改
obj.gender = '男'
console.log(obj.gender);

//属性增加
obj.hobby = '足球'
console.log(obj.hobby);

//属性删除
delete obj.age
console.log(obj);

27.4 对象的方法

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

//对象和其方法的声明
let person = {
    name: 'andy',
    sayHi: function () {  //这里的小括号放形参
        document.write('hi~~')
    }
}

//方法的调用 对象名.方法名
person.sayHi() //小括号放实参

方法名可以使用 “” 或 ’’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

27.5 遍历对象

for 遍历对象的问题：

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

遍历对象的语法

//声明对象
let obj = {
     uname: 'andy',
    age: 18,
     sex: '男'
}

//遍历对象
for (let k in obj) {
    console.log(k)      //打印属性名 : uname、age、sex
    console.log(obj[k]) //打印属性值：andy、18、男
}
  • for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
  • 由于 k 是字符串, 所以必须使用 [ ] 语法解析
  • k 是获得对象的属性名， 对象名[k] 是获得 属性值

案例

渲染学生信息表格。需求：请把下面数据中的对象打印出来：

断点调试

图24.1: 断点调试

详见：示例

27.6 内置对象

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

思考：我们之前用过内置对象吗？

  • document.write() 。document是对象，write()是方法
  • console.log()。console是对象，log()是方法

27.6.1 内置对象-Math

介绍：Math对象是JavaScript提供的一个“数学”对象

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

Math对象包含的方法有：

  • random：生成0-1之间的随机数（包含0不包括1）
  • ceil：向上取整
  • floor：向下取整
  • round：四舍五入。Math.round(2.5) //3。注：R里面是四舍六入五成双
  • max：找最大数
  • min：找最小数
  • pow：幂运算
  • abs：绝对值

详见：示例

生成任意范围随机数

Math.random() 随机数函数， 返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）

语法

//生成一个[0,1)的随机数
Math.random()

//生成随机整数
Math.floor(Math.random() * (10 - 0 + 1) +0      //生成0-10的随机整数
Math.floor(Math.random() * (10 - 5 + 1)) + 5     //生成5-10的随机整数
Math.floor(Math.random() * (N - M + 1)) + M   //生成M-N之间的随机整数

//生成M-N之间随机整数的函数
function getRandomInt(M, N){
    return Math.floor(Math.random() * (N - M + 1)) + M
}

案例1

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

详见：示例

案例2

猜数字游戏。需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字

  1. 如果大于该数字，就提示，数字猜大了，继续猜
  2. 如果小于该数字，就提示，数字猜小了，继续猜
  3. 如果猜对了，就提示猜对了，程序结束

详见：示例

改进：要求每个用户最多只能猜三次。

详见：示例

案例3

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

详见：示例

学成在线案例

详见：示例