4_js函数的进阶与常用对象的使用

day04_js函数的进阶与常用对象的使用

1. 作用域

• 作用域：指的就是变量的有效范围

2. 什么是作用域链

• 作用域链：在访问变量的时候是按照就近原则

3. 简单的理解类和对象

3.1 对象的相关概念

• 从用户登录的角度理解为什么需要对象

• 我们为什么要使用对象

  • 1.封装数据

  • 2.传递数据

  • 3.可以把一些通用的操作封装到对象中去。

  • .......

3.2 创建对象的三种方式

• 方式一：

  var userZS = {
   ? ?//  左边表示对象的属性，右边表示对象的值
   ? ?name: "张三",
   ? ?gender: "男",
   ? ?birthyear: 19920918,
   ? ?addr: "老虎坡",
   ? ?isMarried:"否",
   ? ?salary: function() {
   ? ? ? ?return 15000;
   ?  }
  }
  ?
  // 如果是通过对象封装的数据，可以直接通过.属性获取。
  console.log(userZS.name);
  console.log(userZS.isMarried);
  //对象中还可以封装函数。
  console.log(userZS.salary());
  //总结：对象的功能是非常强大的。

• 方式二：

  • 利用new关键字创建对象：var zs = new Obect();

• 扩展方式三：

  • 需求：我们要创建多个同类型的用户怎么实现呢？

  • 构造函数：就是用来构造（初始化）对象的。

    • this：谁调用有this的函数，那么this就代表谁。

      • zs.salary(15000) //this == 张三

      • lisi.salary(16000) // this == 李四

      • wangwu.salary(17000) // this == 王五

3.3 对象的遍历

• 课堂案例：06.遍历对象的属性和方法.html

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

4. JS的常用内置对象

4.1 什么是内置对象

• 思考：为什么会有内置对象呢?

• JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

• 课堂案例：07.封装工具类.html

• 课堂案例：08.使用现有的工具类.html

4.2 怎么查看文档

• JavaScript 标准内置对象 - JavaScript | MDN

4.3 Math对象

• Math对象，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

4.4 日期对象

• 创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。

• 使用Date实例化日期对象

  new Date(); //用过了
  new Date(value);
  new Date(dateString); //用过了   
    var date2 = new Date("2022-09-22 16:22:15");
  new Date(year, monthIndex [, day [, hours [, minutes 
                          [, seconds [, milliseconds]]]]]); 

• • 时间戳：以整数值来表示时间（比如2022-09-26 10:08:27 就对应 1664158107981）

  • 计算规则：表示自 1970 年 1 月 1 日 00:00:00 到当前时间的毫秒数

  • Date.now() ：返回当前系统的时间戳

  • Date.parse("Mon Sep 26 2022 10:16:21 GMT+0800") ：将字符串格式的日期转换为时间戳

5 数组相关对象

5.1 检测是否为数组

• instanceof运算符

  • instanceof可以判断一个对象是否是某个构造函数的实例

    function Car(make, model, year) {
     ?this.make = make;
     ?this.model = model;
     ?this.year = year;
    }
    const auto = new Car('Honda', 'Accord', 1998);
    ?
    console.log(auto instanceof Car);
    // expected output: true
    ?
    console.log(auto instanceof Object);
    // expected output: true

• Array.isArray()

  • Array.isArray() 用于确定传递的值是否是一个 Array

    Array.isArray([1, 2, 3]); ?// true
    Array.isArray({foo: 123}); // false
    Array.isArray('foobar'); ? // false
    Array.isArray(undefined); ?// false
    当检测 Array 实例时，Array.isArray 优于 instanceof

5.2 数组元素的添加和删除

• • push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

  • pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

  • shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

  • unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

  • 为什么这些方法都是操作的头和尾？