首页 计算机科学 前端 JavaScript

# JavaScript 基础 - 第 5 天

知道对象数据类型的特征，能够利用数组对象渲染页面

  • 理解什么是对象，掌握定义对象的语法
  • 掌握数学对象的使用

# 1 - 对象

# 1.1 对象概述

# 1.1.1 什么是对象？

在 JavaScript 中，<span style="color:red;"> 对象是一组无序的相关属性和方法的集合 </span>，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由 <span style="color:red;"> 属性 </span> 和 < span style="color:red;"> 方法 </span> 组成的。

  • 属性：事物的 <span style="color:red;"> 特征 </span>，在对象中用 < span style="color:red;"> 属性 </span > 来表示（常用名词）

  • 方法：事物的 <span style="color:red;"> 行为 </span>，在对象中用 < span style="color:red;"> 方法 </span > 来表示（常用动词）

# 1.1.2 为什么需要对象？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。
如果要保存一个人的完整信息呢？

例如，将“张三疯”的个人的信息保存在数组中的方式为：

let arr = [‘张三疯’, ‘男', 128,154];
           
// 上述例子中用数组保存数据的缺点是：数据只能通过索引值访问，开发者需要清晰的清除所有的数据的排行才能准确地获取数据，而当数据量庞大时，不可能做到记忆所有数据的索引值。
           
// 为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

// 使用对象记录上组数据为：
let obj = {
    name:"张三疯",
    sex:"男",
    age:128,
    height:154
}     

// 用对象 展示 数据 优点： JS中的对象表达结构更清晰，更强大。

# 1.2 创建对象的三种方式

# 1.2.1 利用字面量创建对象

使用对象字面量创建对象：

  • 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；
  • { } 里面采取键值对的形式表示

注意

键：相当于属性名

值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码如下：

1
2
3
4
5
6
7
8
let star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

上述代码中 star 即是创建的对象。

  • 对象的属性

    • 对象中存储具体数据的 "键值对" 中的 "键" 称为对象的属性，即对象中存储具体数据的项

  • 对象的方法

    • 对象中存储函数的 "键值对" 中的 "键" 称为对象的方法，即对象中存储函数的项

提问

  1. 对象属性有顺序吗？

    没有

  2. 属性和值用什么符号隔开？多个属性用什么隔开？

    属性和值用：隔开

    多个属性用，逗号隔开

# 1.2.2 对象的使用

  • 属性 -- 查

    • 对象里面的属性调用：对象。属性名 ，这个小点。就理解为 “的”

    • 对象里面属性的另一种调用方式：对象 [‘属性名’]，注意方括号里面的属性必须加引号

      示例代码如下：

      1
      2
      console.log(star.name)     // 调用名字属性
      console.log(star['name'])  // 调用名字属性

  • 属性 -- 改

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

    1
    2
    3
    4
    5
    6
    7
    8
    let zhangsan = {
        uname: '雪糕老师',
        age: 18,
        gender: '女'
    }
    // 改 把性别的女改为男
    zhangsan.gender = '男'
    console.log(zhangsan)

  • 属性 -- 增

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

    1
    2
    3
    4
    5
    6
    7
    8
    let zhangsan = {
        uname: '雪糕老师',
        age: 18,
        gender: '男'
    }
    // 新增住址 address
    zhangsan.address = '杭州黑马'
    console.log(zhangsan)

  • 属性 -- 删 （了解）

    语法：delete 对象名。属性名

    1
    2
    3
    4
    5
    6
    7
    8
    let zhangsan = {
        uname: '雪糕老师',
        age: 18,
        gender: '女'
    }
    // 删除gender属性
    delete zhangsan.gender
    console.log(zhangsan)

  • 调用对象的方法

    • 对象里面的方法调用：对象。方法名 () ，注意这个方法名字后面一定加括号

      示例代码如下：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      let obj = {
          uname: '刘德华',
          // 方法
          sing: function () {
              console.log('冰雨')
          }
      }
      // 方法调用 对象名.方法名
      obj.sing()
      // 调用方法,注意，一定不要忘记带后面的括号

      // 方法里也可以添加形参和实参
      let obj = {
          uname: '刘德华',
          // 方法
          song: function (x, y) { // x, y 形参  
              console.log(x + y)
          },
          dance: function () { }
      }
      // 方法调用 对象名.方法名
      obj.song(1, 2) // 1, 2 是实参

总结

  1. 对象访问方法是如何实现的？

​ 对象名。方法名 ()

​ 2. 对象方法可以传递参数吗？

​ 可以，跟函数使用方法基本一致

# 1.2.3 变量、属性、函数、方法总结

属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器

  • 变量：单独声明赋值，单独存在

  • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

    方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

    • 函数：单独存在的，通过 “函数名 ()” 的方式就可以调用
    • 方法：对象里面的函数称为方法，方法不需要声明，使用 “对象。方法名 ()” 的方式就可以调用，方法用来描述该对象的行为和功能。

# 1.3 null

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

# 1.4 遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
for...in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：
for (变量 in 对象名字) {
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

  • 代码示例

    1
    2
    3
    4
    5
    6
    7
    8
    let obj = {
        uname: 'pink',
        age: 18
    }
    for (var k in obj) {
        console.log(k);      // 这里的 k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
    }

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

# 2. 内置对象

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

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

# 2.1 查文档

查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过 MDN/W3C 来查询。

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/

如何学习对象中的方法

  • 查阅该方法的功能
  • 查看里面参数的意义和类型
  • 查看返回值的意义和类型
  • 通过 demo 进行测试

# 2.2 Math 对象

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

# 属性

  • Math.PI，获取圆周率

1
2
// 圆周率
console.log(Math.PI);

# 方法

  • Math.random，生成 0 到 1 间的随机数

1
2
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

  • Math.ceil，数字向上取整

1
2
// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

  • Math.floor，数字向下取整

1
2
// 舍弃小数部分，整数部分不变
Math.floor(4.68)

  • Math.round，四舍五入取整

1
2
3
// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)

  • Math.max，在一组数中找出最大的

1
2
// 找出最大值
Math.max(10, 21, 7, 24, 13)

  • Math.min，在一组数中找出最小的

1
2
// 找出最小值
Math.min(24, 18, 6, 19, 21)

  • Math.pow，幂方法

1
2
3
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

  • Math.sqrt，平方根

1
2
// 求某数的平方根
Math.sqrt(16)

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

# 3 - 简单数据类型和复杂数据类型

# 2.1 简单数据类型

​ 简单类型（基本数据类型、值类型）：在存储时变量中存储的是值本身，包括 string ，number，boolean，undefined，null

# 2.2 复杂数据类型

​ 复杂数据类型（引用类型）：在存储时变量中存储的仅仅是地址（引用），如 Object、Array、Date 等；

# 2.3 堆栈

  • 堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型 (对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

  • 简单数据类型的存储方式

    值类型变量的数据直接存放在变量（栈空间）中

  • 复杂数据类型的存储方式

    引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中