Web APIs 第五天-优快云博客

同步任务

同步任务都在主线程上执行，形成一个 执行栈。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到 任务队列 中（任务队列也称为消息队列）。

1. 先执行执行栈中的同步任务。

2 . 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为

事件循环（event loop ）

location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

l 常用属性和方法：

Ø href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

Ø search 属性获取地址中携带的参数，符号？后面部分

Ø hash 属性获取地址中的啥希值，符号 # 后面部分

Ø reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新（ctrl+f5）

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

Ø 通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })()

histroy对象

history 的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

本地存储

介绍

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性：

Ø 可以多窗口（页面）共享（同一浏览器可以共享）

Ø 以键值对的形式存储使用

语法:

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

浏览器查看本地数据:

改如果原来有这个键，则是改，如果没有这个键是增

本地存储只能存储字符串数据类型，得到的也是字符串数据类型

 // 1. 要存储一个名字  'uname'， 'pink老师'
    // localStorage.setItem('键'，'值')
    localStorage.setItem('uname', 'pink老师')
    // 2. 获取方式  都加引号
    console.log(localStorage.getItem('uname'))
    // 3. 删除本地存储  只删除名字
    // localStorage.removeItem('uname')
    // 4. 改  如果原来有这个键，则是改，如果么有这个键是增
    localStorage.setItem('uname', 'red老师')

    // 我要存一个年龄
    // 2. 本地存储只能存储字符串数据类型
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'))

sessionStorage

特性：

Ø 生命周期为关闭浏览器窗口

Ø 在同一个窗口(页面)下数据可以共享

Ø 以键值对的形式存储使用

Ø 用法跟 localStorage 基本相同

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.

JSON 对象属性和值有引号，而是引号统一是双引号

复杂数据类型存储必须转换为 JSON字符串存储

解决： 需要将复杂数据类型转换成JSON字符串,在存储到本地

语法：JSON.stringify(复杂数据类型)

将复杂数据转换成JSON字符串存储本地存储中

解决： 把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

将JSON字符串转换成对象取出时候使用

数组中map方法迭代数组

作用： map 迭代数组

语法：

map 可以处理数据，并且 返回新的数组

map 也称为映射。 映射是个术语，指两个元素的集之间元素相互“对应”的关系

数组中join方法

作用： join() 方法用于把数组中的所有元素转换一个字符串

语法：

参数：

数组元素是通过参数里面指定的分隔符进行分隔的

   const arr = ['red', 'blue', 'green']
    // 把数组元素转换为字符串
    console.log(arr.join('*'))

Web APIs 第五天

Window对象

BOM

定时器-延时函数

JS执行机制