【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. 堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
    • 引用数据类型存放到堆里面

你可能感兴趣的:(【HTML,&,CSS,&,JS】相关,javascript,开发语言,前端)