BOM(浏览器对象模型)
window 对象下包含了 navigator、location、document、history、screen 5个属性,即所谓的 BOM (浏览器对象模型)
定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout 语法:
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window 清除延时函数
结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能
js执行机制
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
同步任务
同步任务都在主线程上执行,形成一个执行栈。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
异步任务
JS 的异步是通过回调函数实现的。 一般而言,异步任务有以下三种类型: 1、普通事件,如 click、resize 等 2、资源加载,如 load、error 等 3、定时器,包括 setInterval、setTimeout 等 异步任务相关添加到任务队列中(任务队列也称为消息队列)。
他们的本质区别: 这条流水线上各个流程的执行顺序不同。
同步和异步
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
经典面试题
window对象
location对象
location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分 常用属性和方法: href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
search 属性获取地址中携带的参数,符号 ?后面部分
hash 属性获取地址中的啥希值,符号 # 后面部分
reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
navigator对象
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息 常用属性和方法: 通过 userAgent 检测浏览器的版本及平台
histroy对象
history 的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等 常用属性和方法:
本地储存
特性:
1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionStorage和localStorage约 5M 左右
localStorage
1、生命周期永久生效,除非手动删除 否则关闭页面也会存在 2、可以多窗口(页面)共享(同一浏览器可以共享)
3,以键值对的形式存储使用
储存数据
localStorage.setItem(key, value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
存储复杂数据类型存储
本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中
JSON.parse(JSON字符串)
将JSON字符串转换成对象 取出 时候使用
sessionStorage(了解)
1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享 3.以键值对的形式存储使用 4.用法跟localStorage 基本相同
自定义属性
固有属性:
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作
自定义属性:
由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API getAttribute('属性名') // 获取自定义属性 setAttribute('属性名', '属性值') // 设置自定义属性 removeAttribute('属性名') // 删除自定义属性
data-自定义属性:
传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头 在DOM对象上一律以dataset对象方式获取
正则表达式
什么是正则表达式?
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象 通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。
举例:
语法:
我们想要查找是否有戴眼镜的人, 怎么做呢? 1.定义规则: 戴眼镜的 2.根据规则去查找:找到则返回 正则同样道理,我们分为两步: 1.定义规则 2.查找 比如:查找下面文本中是否包含字符串 '前端'
定义正则表达式的语法有两种
1.定义正则表达式语法:
其中 / / 是正则表达式字面量 比如:
2.判断是否有符合规则的字符串
test() 方法 用来查看正则表达式与指定的字符串是否匹配
比如:
3.检索(查找)符合规则的字符串:
exec() 方法 在一个指定字符串中执行一个搜索匹配
比如:
元字符
1.普通字符: 大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。 也就是说普通字符只能够匹配字符串中与它们相同的字符。 2.元字符(特殊字符) 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。 比如,规定用户只能输入英文26个英文字母,普通字符的话 abcdefghijklm….. 但是换成元字符写法: [a-z] 3.参考文档: MDN:developer.mozilla.org/zh-CN/docs/… 正则测试工具: tool.oschina.net/regex
1.边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
如果 ^ 和 $ 在一起,表示必须是精确匹配。
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
2. 量词(修饰符) (表示重复次数)
量词用来 设定某个模式出现的次数
3.字符类(占位符) (比如 \d 表示 0~9)
1.[ ] 匹配字符集合
后面的字符串只要包含 abc 中任意一个字符,都返回 true
2.(1)[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围6
比如: [a-z] 表示 a 到 z 26个英文字母都可以 [a-zA-Z] 表示大小写都可以 [0-9] 表示 0~9 的数字都可以
认识:
(2)[ ] 里面加上 ^ 取反符号 比如: [ ^ a - z ] 匹配除了小写字母以外的字符 注意要写到中括号里面
(3) . 匹配除换行符之外的任何单个字符
(4) 预定义:指的是某些常见模式的简写方式
修饰符
1.修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等 语法:
2.i 是单词 ignore 的缩写,正则匹配时字母不区分大小写 g 是单词 global 的缩写,匹配所有满足正则表达式的结果
替换 replace 替换
语法:
\