JavaScript-BOM

154 阅读4分钟

定时器-延时函数

JavaScript内置的一个用来让代码延迟执行的函数

setTimeout(回调函数,等待的毫秒数)

只执行一次

延时器需要等待,后面的代码先执行

每一次调用延时器都会产生一个新的延时器

清除延时函数


let timer=setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

JS执行机制

单线程的执行机制,也就是同一时间只能做一件事

同步 前一个任务结束再执行下一个任务,程序执行顺序与任务排列顺序是一致的、同步的

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

异步 在做一件要花费很长时间的事时可以同时去做另一件事

异步任务 通过回调函数实现,相关添加到任务队列(消息队列)

  • 普通事件:click、resize等
  • 资源加载:load、error等
  • 定时器:setInterval、setTimeout等
事件循环(event loop)
  1. 先执行执行栈中的同步任务
  2. 异步任务放入任务队列中
  3. 一旦执行栈中所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行

location对象

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

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


//得到当前文件的URL地址
console.log(location.href)
//通过JS方式跳转到目标地址
location.href='网页地址'

search 属性获取地址中携带的参数——符号?后面的部分

hash 属性获取地址中的哈希值——符号#后面的部分 会用于不刷新页面,显示不同页面

reload 方法用来刷新当前页面,传入参数true时表示强制刷新

navigator对象

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

history对象

主要管理历史记录,该对象与浏览器地址栏操作相对应,如前进、后退、历史记录等

本地存储

数据存储在用户浏览器中

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

容量较大,约5M左右

只能存储字符串类型

localStorage

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

可以多窗口页面共享(同一浏览器可以共享)

以键值对形式存储使用

存储数据: localStorage.setltem('key','value') 变量不加引号,但要声明

获取数据: localStorage.getltem('key')

删除数据: localStorage.removeltem('key') 删除本地储存,只删除名字

sessionStorage

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

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

以键对值形式存储使用

用法与localStorage基本相同

存储复杂数据类型

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

JSON.stringfy(复杂数据类型)

JSON对象的属性和值都有双引号

再把JSON字符串转换为对象

JSON.parse(JSON字符串)

正则表达式

用于匹配字符串中字符组合的模式

通常用来查找、替换那些符合正则表达式的文本

定义语法

const 变量名=/表达式/

匹配

regObj.test(被检测的字符串) 用来查看正则表达式与指定字符串是否匹配

返回true、false

检查搜索

regObj.exec() 在一个指定字符串中执行一个搜索匹配

匹配成功返回一个数组,否则返回null

元字符

也称为“特殊字符”

  • 边界符(位置符)

表示位置、开头和结尾必须用什么开头,用什么结尾

用来提示字符所处的位置,主要有两个字符

^和$在一起,表示必须是 精确匹配

联想截图_20231205130702.png

  • 量词

设定某个模式出现的次数

逗号左右千万不要有空格

联想截图_20231205152253.png

联想截图_20231205152506.png

联想截图_20231205152720.png

  • 字符类

[ ]匹配字符集合 后面的字符串只要包含abc中任意一个字符,都返回true

- 连字符 表示一个范围

联想截图_20231205161420.png

^ 取反符号 写到[ ]里面取反

. 匹配除换行符之外的任何单个字符

  • 预定义

某些常见模式的简写方式

联想截图_20231205163449.png

  • 修饰符

约束正则执行的某些细节行为,如是否区别大小写、是否支持多行分配

/表达式/修饰符

i是ignore得缩写,正则匹配时字母不区分大小写

g是global的缩写,匹配满足使用正则表达式的结果(全局匹配)

字符串.replace(/正则表达式(被替换)/,'替换的文本')

过滤敏感词

联想截图_20231205170909.png