JS基础回顾

JS基础

数据类型

值类型(基本类型)：String(字符串)、Number(数值)、Boolean(布尔)、Null(空)、Undefined(未定义)、Symbol(ES6新增)

引用数据类型(对象类型)：Object(对象)、Function(函数)、Array(数组)、以及两个特殊的对象：RegExp(正则)、Date(日期)

事件相关

• 事件传播模式：

  • 捕获模式：当事件发生时，该事件首先被最外层元素接受到，然后依次向内层元素传播。（由外向内）
  • 冒泡模式：当事件发生时，该事件首先被最内层元素接受到，然后依次向外层元素传播。（由内向外）

• 声明方式：element.addEventListener(event, function, useCapture)

  • event：事件名（注意：不要使用"on"前缀。例如使用"click",而不是使用"onclick"）
  • function：执行函数（回调参数e）
  • **useCapture：布尔值（true-捕获模式，false/默认-冒泡模式）

• addEventListener说明：参考

  • 语法：

      addEventListener(type, listener); 
      addEventListener(type, listener, options);
      addEventListener(type, listener, useCapture);
    

  • options：一个指定有关 listener 属性的可选参数对象
    • capture 可选：一个布尔值，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
    • once 可选：一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
    • passive 可选：一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。
    • signal 可选：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。

      // >> 一次性移除多个任何类型的监听器
      let controller = new AbortController();
      elm1.addEventListener("click", () => {console.log(1) }, { signal: controller.signal });
      elm2.addEventListener("dblclick", () => {console.log(2) }, { signal: controller.signal });
      elm3.addEventListener("click", () => {console.log(3) }, { signal: controller.signal });
      controller.abort()
      

异步相关

• XMLHttpRequest：（XHR）对象用于与服务器交互 参考

  • 调用示例：

    let xhr = new XMLHttpRequest();
    xhr.open("get", "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json");
    xhr.addEventListener("loadend", (e) => { });
    xhr.addEventListener("readystatechange", (e) => {
    	if (xhr.readyState === 4 && xhr.status === 200) {
    		console.info("响应结果", xhr.response)
    	}
    });
    xhr.send(null);
    

  • 常用属性：

    timeout：超时时间
    status：响应中的数字状态码（0:请求完成前,200:代表一个成功的请求）
    readyState：当前所处的状态(0:代理被创建，但尚未调用open()方法;1:open()方法已经被调用;2:send()方法已经被调用，并且头部和状态已经可获得;4:下载操作已完成)
    response：响应的正文
    responseText：在一个请求被发送后，从服务器端返回文本。
    responseType：responseType 是一个枚举字符串值，用于指定响应中包含的数据类型。
    

• Promise： 参考

  • 术语：Promise 有三种状态：
    待定（pending）：初始状态，既没有被兑现，也没有被拒绝。这是调用 fetch() 返回 Promise 时的状态，此时请求还在进行中。
    已兑现（fulfilled）：意味着操作成功完成。当 Promise 完成时，它的 then() 处理函数被调用。
    已拒绝（rejected）：意味着操作失败。当一个 Promise 失败时，它的 catch() 处理函数被调用。

  • 常用操作：

    • Promise.all()：合并多个异步函数的调用