文章目录
BOM
BOM(Browser Object Model ) 是浏览器对象模型
- window对象是一个全局对象,也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
js执行机制
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后
再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
多线程
- 同步、异步
- 同步任务
同步任务都在主线程上执行,形成一个执行栈。 - 异步任务
JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
1、普通事件,如 click、resize 等
2、资源加载,如 load、error 等
3、定时器,包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中(任务队列也称为消息队列。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
location对象
- location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
- 常用属性和方法:
- href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
- search 属性获取地址中携带的参数,符号 ?后面部分
- hash 属性获取地址中的啥希值,符号 # 后面部分
- reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
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 办公系统中见到。)
本地存储
本地存储介绍
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage和localStorage约 5M 左右
- 常见的使用场景:
- https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
本地存储分类- localStorage
目标: 能够使用localStorage 把数据存储的浏览器中
- 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
- 特性:
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
- 语法
存储数据:
localStorage.setItem(key)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
- 浏览器查看本地数据:
- 特性:
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage 基本相同
存储复杂数据类型
目标: 能够存储复杂数据类型以及取出数据
- 本地只能存储字符串,无法存储复杂数据类型.
- 解决:需要将复杂数据类型转换成JSON字符串,在存储到本地
- 语法:JSON.stringify(复杂数据类型)
- 将复杂数据转换成JSON字符串 存储 本地存储中
- 将复杂数据转换成JSON字符串 存储 本地存储中
- 问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用
- 解决:把取出来的字符串转换为对象
- 语法:JSON.parse(JSON字符串)
- 将JSON字符串转换成对象 取出 时候使用
- 将JSON字符串转换成对象 取出 时候使用
正则表达式
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象
- 正则表达式在 JavaScript中的使用场景:
- 例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)
- 比如用户名:
/^[a-z0-9_-]{3,16}$/
- 过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。
语法
- 定义正则表达式语法:
- 其中 / / 是正则表达式字面量
- 其中 / / 是正则表达式字面量
- 判断是否有符合规则的字符串:
- test() 方法 用来查看正则表达式与指定的字符串是否匹配
语法: - 比如
- 如果正则表达式与指定的字符串匹配 ,返回true,否则false
- test() 方法 用来查看正则表达式与指定的字符串是否匹配
- 检索(查找)符合规则的字符串:
- exec() 方法 在一个指定字符串中执行一个搜索匹配
- 语法
- 如果匹配成功,exec() 方法返回一个数组,否则返回null
元字符
- 元字符(特殊字符)
是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。- 比如,规定用户只能输入英文26个英文字母,普通字符的话 abcdefghijklm……
- 但是换成元字符写法: [a-z]
- 参考文档:
- MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- 正则测试工具:https://tool.oschina.net/regex
分类
- 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
- 量词 (表示重复次数)
- 字符类 (比如 \d 表示 0~9)
边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
如果 ^ 和 $ 在一起,表示必须是精确匹配
量词
量词用来 设定某个模式出现的次数
注意: 逗号左右两侧千万不要出现空格
字符类:
[ ]
匹配字符集合- 后面的字符串只要包含 abc 中任意一个字符,都返回 true 。
- 后面的字符串只要包含 abc 中任意一个字符,都返回 true 。
[ ]
里面加上 - 连字符- 使用连字符 - 表示一个范围
- 比如:
- [a-z] 表示 a 到 z 26个英文字母都可以
- [a-zA-Z] 表示大小写都可以
- [0-9] 表示 0~9 的数字都可以
- 使用连字符 - 表示一个范围
[ ]
里面加上 ^ 取反符号[^a-z]
匹配除了小写字母以外的字符
.
匹配除换行符之外的任何单个字符- 预定义:指的是 某些常见模式的简写方式。
修饰符
- 语法
- i 是单词 ignore 的缩写,正则匹配时字母不区分大小写
- g 是单词 global 的缩写,匹配所有满足正则表达式的结果
RegExp(正则表达式)
RegExp 对象用于将文本与一个模式匹配。