Window对象

1.BOM对象

  • BOM是浏览器对象模型，是浏览器提供的对象模型，用于操作浏览器窗口。

  • 全局对象，document、location、navigator、history都是window的属性。

2.定时器-延时函数

  • setTimeout：延时执行一次，返回值是一个定时器ID。
    1
    2
    3
    setTimeout(() => {
        console.log('延时执行')
    }, 1000)
  • 清除延时函数
    1
    clearTimeout(timer)

3.JS执行机制

  • 浏览器有两个引擎：JS引擎和渲染引擎。
  • 单线程执行，同一时间只能执行一个任务。
  • 同步和异步任务：同步任务会阻塞后续任务，异步任务不会阻塞后续任务。
  • 同步任务在主线程执行，形成一个执行栈。
  • 异步任务相关会放到任务队列中，等待主线程空闲时执行。
  • 异步任务有三种类型：普通事件、资源加载、定时器。
  • 一旦执行栈中所有的同步任务执行完毕，就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
  • 事件循环：主线程从任务队列中读取事件，这个过程是循环不断的，所以叫事件循环。

4.location对象

  • location的数据类型是对象，拆分并保存了URL地址的各个组成部分
  • location对象的属性：
    • href：获取或设置整个URL地址。
    • protocol：获取或设置协议部分。
    • host：获取或设置主机部分。
    • hostname：获取或设置主机名。
    • port：获取或设置端口号。
    • pathname：获取或设置路径部分。
    • search：获取或设置查询部分，以?开头。
    • hash：获取或设置哈希部分，以#开头。
    • .reload()：重新加载页面,true强制从服务器加载，false从缓存加载。

5.navigator对象

  • navigator对象包含了浏览器的信息，比如浏览器的名称、版本、操作系统等。
  • userAgent属性：检测浏览器的版本及平台。
    1
    2
    3
    4
    5
    6
    7
    8
    !(function (){
        const userAgent = navigator.userAgent
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
        if(android||iphone) {
            location.href = 'https://www.baidu.com'
        }
    })()

6.history对象

  • history对象管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
  • back()：后退
  • forward()：前进
  • go()：前进或后退，1为前进，-1为后退。

本地存储

  • 起因：存在需要存储在本地的数据。
  • HTML5提供了两种本地存储方式：localStorage和sessionStorage，约5MB左右。
  • 数据存储在用户浏览器中，设置、读取方便、页面刷新不会丢失。

本地存储分类

  • localStorage：永久存储，除非手动删除。可以跨窗口，以键值对的形式存储，只能存储字符串。
    1
    2
    3
    localStorage.setItem(key, value)
    localStorage.getItem(key)
    localStorage.removeItem(key)
  • sessionStorage：会话存储，关闭浏览器窗口后自动删除。在同一个窗口下可以共享数据。

存储复杂数据类型

  • 想要存储对象，需要先将对象转换为字符串，再存储。
    1
    2
    3
    4
    const obj = {name: 'Tom', age: 18}
    localStorage.setItem('obj', JSON.stringify(obj))
    const objStr = localStorage.getItem('obj')
    const obj = JSON.parse(objStr)
    其中，JSON.stringify()将对象转换为字符串，JSON.parse()将字符串转换为对象。

利用map方法和join方法实现字符串的拼接

map方法：遍历数组，返回一个新数组,map也称为映射，指两个元素的集之间元素相互对应的关系，map重点有返回值，forEach没有返回值。

1
2
3
const arr = [1, 2, 3, 4, 5]
const newArr = arr.map(item => item * 2) // [2, 4, 6, 8, 10]
const newArr2 = arr.map((item,index)=>item+index)

join方法：将数组中的所有元素连接成一个字符串，返回一个字符串。

1
2
const arr = [1, 2, 3, 4, 5]
const str = arr.join('-') // 1-2-3-4-5，默认是逗号