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

发布时间:2023年12月22日

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 怎么查看文档
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() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

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

文章来源:https://blog.csdn.net/2301_80008556/article/details/135161970
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。