一、关于Bom
-
window对象是一个全局对象,也可以说是JavaScript中的顶级对象
-
像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
-
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
-
window对象下的属性和方法调用的时候可以省略window
1.定时函数
-
JavaScript内置的一个用来让代码延迟执行的函数,叫
setTimeout
-
语法:
setTimeout(回调函数,等待的毫秒数)
-
setTimeout仅仅执行一次,平时省略window
-
清除延迟函数:
let timer=setTimeout(回调函数,等待的毫秒数); clearTimeout(timer);
2.间歇函数
-
语法:
setInterval(回调函数,间隔的毫秒数);
-
清除间歇函数
let interval=setInterval(回调函数,间隔时间毫秒数) clearInterval(interval);
两种定时器对比:执行的数次的差别
-
延时函数:只执行一次
-
间歇函数:每隔一段时间执行一次,除非手动清除;
二、JS执行机制
JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
-
普通事件,如 click、resize 等
-
资源加载,如 load、error 等
-
定时器,包括 setInterval、setTimeout 等
重点:Js执行的顺序
-
先执行执行栈中的同步任务
-
异步任务放入任务队列中。
-
一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
三、location对象
-
location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
-
常用的属性和方法:
-
href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
-
search 属性获取地址中携带的参数,符号 ?后面部分
-
hash 属性获取地址中的啥希值,符号 # 后面部分
-
reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
-
-
location也是属于window的,完整调用方式:window.location
四、navigatior对象
-
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' } }
-
五、history对象
-
history的数据类型是对象,主要管理历史记录,搞对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
-
常用属性和方法:
history对象方法 作用 back() 可以后退功能 forward() 前进功能 go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面 -
history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。
六、本地存储
-
数据存储在用户浏览器中;
-
设置、读取方便、甚至页面刷新不丢失数据;
-
容量较大、sessionStorage和localStorage约5M左右;
1.本地存储分类-localStorage
-
作用:可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在;
-
特性:
-
可以多窗口(页面)共享(同一浏览器可以共享)
-
以键值对的形式存储使用
-
-
语法:
-
存储数据:
localStorage.setItem(key,value)
-
获取数据:localStorage.getItem(key)
-
删除数据:localStorage.removeItem(key)
-
注意:浏览器中查看localStorage的内容,在检查-应用-local Storage中查看;
2.本地存储分类-sessionStorage
-
特性:
-
生命周期为关闭浏览器窗口;
-
在同一个窗口(页面)下数据可以共享;
-
以键值对的形式存储使用;
-
用法跟localStorage基本相同;
-
-
语法:
-
存储数据:
sessionStorage.setItem(key,value)
-
删除数据:sessionStorage.removeItem(key)
-
获取数据:sessionStorage.getItem(key)
-
注意:本地存储只能存储字符串数据类型;
3. 存储复杂数据类型
-
本地只能存储字符串,无法存储复杂数据类型
-
可以将复杂数据类型转成json字符串,存储到本地
-
语法:
const obj={ uname:"huangyueze", age:19, gender:"男" } //存储 localStorage.setItem("goods",JSON.stringify(goods)); //取出来 const obj1=JSON.parse(localStorage.getItem("goods"))
4. 拼接字符串的新思路(效率更高,开发常用的写法)
- 利用map()和json()数组方法实现字符串拼接;
-
map()方法的使用
-
数组map方法,处理数据并且返回一个对应的数组;
-
用法:
-
const arr = ["red", "blue", "black"];
const newArr = arr.map(function (ele, index) {
console.log(ele); //数组元素
console.log(index); //数组索引号
return ele + "颜色";
});
console.log(newArr); // ['red颜色','blue颜色','green颜色']
-
map()也称为映射,指两个元素的集合之间元素相互“对应”的关系;
-
map()重点在于有返回值,forEach没有返回值;
-
json方法
-
用于把数组转换成字符串
-
用法:
const arr = ["red", "blue", "black"]; //参数为空,表示默认用逗号分隔 console.log(arr.join()); //red,blue,black //分隔符是用空字符串代替 console.log(arr.json(""));
-
七、正则表达式
-
正则表达式是用于匹配字符串中字符串组合的模式。在JavaScript中,正则表达式也是对象。
-
通常用来查找、替换那些复合正则表达式的文本,大部分语言都有正则表达式;
1. 正则表达式
-
判断是否有符合规则的字符串,语法
test()
-
定义正则表达式语法
const 变量名=/表达式/
-
判断是否有符合规则的字符串:
regObj.test(被检测的字符串);
示例:
const str = "我们学习前端,希望学习前端能够高薪毕业!!"; //1、定义规则 const reg = /前端/; //2.是否匹配 console.log(reg.test(str)); //true
-
-
检索(查找)符合规则的字符串 :
exec()
-
语法:
regObj.exec(被检测字符串)
-
返回的是一个字符串;
-
2. 元字符
-
普通字符:大多数的字符仅能通过描述他们本身,这些字符称作普通字符,例如字母喝数字;
-
元字符(特殊字符):具有一些特殊的含义的字符,可以极大提高灵活性和强大的匹配功能;
例如:
-
规定用户只能输入英文26个英文字母,普通字符的话abcdefghijklm…
-
但是换成元字符写法:[a-z]
为了方便记忆和学习,我们对众多的元字符进行了分类:
-
边界符:表示位置、开头和结尾,必须用什么开头、用什么结尾;
-
量词:表示重复次数;
-
字符类:比如\d表示0~9;
-
边界符
-
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符;
边界符 说明 ^ 表示匹配行首的文本(以谁开始) $ 表示匹配行尾的文本(以谁结束) 如果“^”和“$”同时出现,表示精确匹配;意味着两个字符串一模一样才匹配;
-
-
量词
-
量词用来设定某个模式出现的次数;
量词 说明 * 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复N到m次 注意:逗号之间不能有空格!!
-
-
字符类
-
【】匹配字符合集
- 后面的字符串只要包含【】中任意一个字符,都返回true;
-
2. 【】里面加上“-”连字符,表示一个范围
console.log(/^[a-z]$/.test("c")//true
3. 【】里面加上 ^ 取反符号,比如匹配小写
4. .点代表匹配除换行符之外的任何单个字符
-
字符类-预定义类
预定义:指的是某些常见模式的简写方式
预定类 说明 \d 匹配0-9之间的任意数字,相当于[0-9] \D 匹配所有0-9以外的字符,相当于[^0-9] \w 匹配任意的字母,数字和下划线,相当于[A-Za-z0-9_] \W 匹配所有字符、数字和下划线以外的字符,相当于[^A-Za-z0-9_] \s 匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f] \S 匹配非空格的字符,相当于[^\t\r\n\v\f] 举例:
日期格式:^\d{4}-\d{1,2}-\d{1,2}
-
修饰符
-
修饰符约束正则执行的某些细节行为,如是否区分大小写,是否支持多行匹配;
-
语法:/表达式/修饰符
-
i是单词ignore的缩写,正则匹配时字符不区分大小写;
-
g是单词global的缩写,匹配所有满足正则表达式的结果;
console.log(/a/i.test("a")); //true console.log(/a/i.test("A")); //true
-
-
替换replace替换
语法:字符串.replace(/正则表达式/,‘替换的文本’);
正则表达式里面的或与与用|和&来连接
八、常用事件
事件名称 | 常用于组件 | 作用 |
---|---|---|
change | input | 检测输入内容是否改变 |
click | 所有组件 | 点击事件 |
submit | form | 表单提交事件 |
mouseover | 所有组件 | 鼠标经过事件 |
mouseenter | 所有组件 | 鼠标进入事件 |
mouselevel | 所有组件 | 鼠标离开事件 |
mousemove | 组件 | 鼠标移动 |