【JS】Chapter5-对象

站在巨人的肩膀上

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

（五）对象

1. 对象

1.1 对象是什么

• 对象（object）：JavaScript里的一种数据类型
• 可以理解为是一种无序的数据集合，注意数组是有序的数据集合
• 用来描述某个事物，例如描述一个人
  • 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
  • 如果用多个变量保存则比较散，用对象比较统一
• 比如描述 班主任 信息：
  • 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
  • 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

1.2 对象使用

1.2.1 对象声明语法

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

// 声明了一个person的对象
let person = {}

• 实际开发中，我们多用花括号。 {} 是对象字面量

1.2.2 对象有属性和方法组成

• 属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
• 方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…

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

1.2.3 属性

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

console.log(obj.age)        // 查语法
obj.gender = '男'           // 改语法
obj.address = '武汉黑马'    // 增语法
delete obj.gender           // 删语法

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

• 属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔

• 多个属性之间使用英文 , 分隔

• 属性就是依附在对象上的变量（外面是变量，对象内是属性）

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

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

  1. 查询对象
  对象.属性
  
  2. 重新赋值
  对象.属性 = 新值
  
  3. 对象添加新的数据
  对象名.新属性名 = 新值
  
  4. 删除对象中属性
  delete 对象名.属性名
  

  • 改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改

• 查的另外一种写法：

  • 对于多词属性或则 - 等属性，点操作就不能用了。
  • 我们可以采取：对象 [‘属性’] 方式，单引号和双引号都阔以。也可以用于其他正常属性。
  • []语法里面的值如果不添加引号，默认会当成变量解析
  • 例子:

    let obj = {
        'user-name': 'pink老师',
        age: 18,
        gender: '女'
    }
    
    console.log(person.user-name)       // NaN
    console.log(person['user-name'])    // pink老师
    console.log(person['age'])          // 18
    

  • 总结：没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法

1.2.4 对象中的方法

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

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

  • 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  • 多个属性之间使用英文 , 分隔
  • 方法是依附在对象中的函数
  • 方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
• 声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。也可以添加形参和实参。

1.3 遍历对象

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

  let obj = {
      uname: 'andy',
      age: 18,
      sex: '男'
  }
  for(let k in obj) {
      console.log(k)          // 打印属性名
      console.log(obj[k])     // 打印属性值
  }
  

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

1.4 内置对象

1.4.1 内置对象是什么？

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

1.4.2 内置对象-Math

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

1.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

2. 综合案例

2.1 拓展-术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、switch、case、break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一段可执行的代码	If () for()

2.2 拓展- 基本数据类型和引用数据类型

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

2.3 堆栈空间分配区别

1. 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
   • 简单数据类型存放到栈里面
2. 堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
   • 引用数据类型存放到堆里面