一、Window 对象
- BOM(浏览器对象模型)
- window 对象是一个全局对象,也可以说是JavaScript中的顶级对象;
- 像 document、alert()、console.log() 这些都是 window 的属性,基本 BOM 的属性和方法都是 window 的;
- 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法;
- window 对象下的属性和方法调用的时候可以省略 window,如
window.alert()
一般只写alert()
。
- 定时器 —— 延时函数
JavaScript内置的一个用来让代码延迟执行的函数:setTimeout(回调函数, 等待的毫秒数)
。- 延迟函数只执行一次;间歇函数每隔一段时间就执行一次,除非手动清除。
- 清除延迟函数:
clearTimeout(延时函数)
,如:let timer = setTimeout(回调函数, 等待时间); clearTimeout(timer)
。 - 每一次调用延时器都会产生一个新的延时器。
- JS 执行机制
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。单线程意味着所有任务需要排队,前一个任务结束才会执行后一个任务。这样导致的问题是:如果JS执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
为了解决这个问题,利用多核CPU的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS中出现了同步和异步。- 同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
- 异步:在执行一个任务的同时,还可以执行其他任务。
- 同步任务:同步任务都在主线程上执行,形成一个执行栈。
- 异步任务:JS 的异步是通过回调函数实现的。异步任务添加到任务队列(也称消息队列)中。一般异步任务有三种类型:
- 普通事件:如
click、resize
等; - 资源加载:如
load、error
等; - 定时器:
setInterval、setTimeout
等。
- 普通事件:如
- 事件循环(Event Loop): 事件循环是一个持续运行的过程,它负责检查调用栈和任务队列的状态。当调用栈为空时,事件循环会将任务队列中的任务依次推入调用栈执行,直到调用栈再次为空。
事件循环的运行过程:
- 执行全局同步代码,将同步任务推入调用栈执行。
- 当遇到异步任务时,将其放入任务队列,并继续执行同步任务。
- 当调用栈为空时,事件循环检查微任务队列,执行其中的任务。
- 微任务执行完成后,事件循环检查任务队列,将任务队列中的任务推入调用栈执行。
- 重复以上步骤,直至任务队列和微任务队列均为空。
微任务队列存放的是需要在当前任务执行结束后立即执行的任务,如Promise的回调函数。微任务队列的优先级高于任务队列,即使在任务队列中有待执行的任务,也会先执行完微任务队列中的任务。
- location 对象
location 的数据类型是对象,它拆分保存了URL地址的各个部分。
常用属性和方法:href
属性:获取完整的的 URL 地址(如:https://www.baidu.com/
),对其赋值可用于地址的跳转。search
属性:获取地址中的参数,符号?
及后面的部分。hash
属性:获取地址中符号#
及后面的部分。reload()
方法:刷新当前页面location.reload()
,括号中传入参数true
会强制刷新。
- navigator 对象
navigator 的数据类型是对象,它记录了浏览器自身的相关信息。
常用userAgent
属性检测浏览器的版本和平台。// 检测浏览器信息 !(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 = 'http://yidongduan.com'; } })()
- history 对象
history 的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等。
常用属性和方法:back()
方法:后退,网页将会返回上一个页面(如果有的话)。forward()
方法:前进,网页将会返回下一个页面(如果有的话)。go(参数)
方法:参数为数字,若是history.go(-1)
,则相当于history.back()
;若是history.go(1)
则相当于history.forward()
。
二、本地存储
- 本地存储
- 本地存储的数据存储在浏览器中;
- 设置、读取方便,刷新页面数据也不丢失;
- 容量较大,sessionStorage 和 localStorage 约 5M 左右;
- 本地存储只能存储字符串类型数据。
- localStorage
localStorage将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。
特性:- 可以多窗口(页面)共享(同一浏览器可以共享);
- 以键值对的形式存储使用。
语法: - 存储数据:
localStorage.setItem(key, value)
,即使存储时传入的值时数字,在取出时得到的也会是字符串型数据; - 读取数据:
localStorage.getItem(key)
; - 删除数据:
localStorage.removeItem(key)
。
- sessionStorage
特性:- 生命周期为关闭浏览器窗口;
- 在同一个窗口(页面)下数据可以共享;
- 以键值对的形式存储使用;
- 用法和localStorage基本相同,
sessionStorage.setItem(key, value), sessionStorage.getItem(key), sessionStorage.getItem(key)
。
- 存储复杂数据类型
数据转换:JSON.stringify(复杂数据类型)
:将复杂数据类型转换为JSON字符串,转换之后可以使用本地储存。JSON.parse(JSON字符串)
:将JSON字符串转为对象。
const obj = { name: '张三', age: '18', gender: '男' } // 将对象转换为JSON字符串存储到localStorage中 const str = JSON.stringify(obj) localStorage.setItem('obj', JSON.stringify(obj)) // JSON字符串的键值对都是用双引号包裹起来的 console.log(typeof str, str); // 输出:string {"name":"张三","age":"18","gender":"男"} // 将取出的JSON字符串转换为对象 const obj2 = JSON.parse(localStorage.getItem('obj')); console.log(typeof obj2, obj2); // 输出:object {name: '张三', age: '18', gender: '男'}
三、处理数组
- map方法迭代数组
map()方法可以遍历数组处理数据,并返回新的数组。map也称映射,指两个元素的集之间元素相互对应的关系。
语法:数组名.map(function(ele, index))
,function关键字可以省略,不需要index参数时也可省略index。 - join方法
join()方法用于把数组中所有的元素转换成一个字符串。
数组元素通过括号中的参数连接,括号中没有参数则默认连接符为逗号,
,参数为空字符串(''
)表示没有连接符。
语法:数组名.join('连接符')
const arr = ['apple', 'banana', 'cherry'];
const arr2 = ['red', 'yellow', 'pink'];
const newArr = arr.map((item, index) => {
console.log(index, item); // 依次输出:0 'apple';1 'banana';2 'cherry'
return item + ' ' + arr2[index]; // 对应位置的元素拼接,遍历结束后返回新数组
});
console.log(newArr); // 输出:['apple red', 'banana yellow', 'cherry pink']
console.log(newArr.join()); // 输出:apple red,banana yellow,cherry pink
console.log(newArr.join('|')); // 输出:apple red|banana yellow|cherry pink
四、正则表达式
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。常用于表单验证(匹配)、过滤敏感词(替换)、提前字符串的一部分(提取)。
- 正则表达式的使用
- 定义正则表达式语法:
const 变量名 = /表达式/
:其中/ /
是正则表达式的字面量。 - 查找:
正则表达式名.test(被查找的原字符串)
或正则表达式名.exec(被查找的原字符串)
。
const str = 'Hello World!'; const str1 = '你好,世界!'; // 创建正则表达式,中间的不需要引号 const reg = /o/; // 匹配字符'o' const reg1 = /好/; // 匹配字符'好' // 匹配:使用test()方法,返回true或false console.log(reg.test(str)); // 输出:true // 匹配:使用exec()方法,返回匹配的结果,是一个数组,如果没有匹配到返回null // 匹配到的结果是一个数组,第一个元素是匹配到的字符串,index是匹配到的字符串的索引, // input是原字符串,第四个元素是匹配到的分组 console.log(reg1.exec(str1)); // 输出:['好', index: 3, input: '你好,世界!', groups: undefined]
- 定义正则表达式语法:
- 元字符
元字符(特殊字符)是一些具有特殊含义的字符,极大提高了匹配时的灵活性。-
边界符(位置符,以什么开头和以什么结尾):
^
匹配开始的字符,$
匹配结尾的字符。// ^ 表示匹配字符串的开始位置, /^a/ 表示匹配字符串的开始位置是a console.log(/^a/.test('apple')); // true console.log(/^a/.test('happy')); // false // $ 表示匹配字符串的结束位置, /a$/ 表示匹配字符串的结束位置是a console.log(/a$/.test('cba')); // true console.log(/a$/.test('abc')); // false // ^$ 一起使用, /^$/ 表示匹配空字符串,/^abc$/ 表示精准匹配abc console.log(/^$/.test('')); // true console.log(/^$/.test('abc')); // false console.log(/^abc$/.test('abc')); // true console.log(/^abc$/.test('abcc')); // false
-
量词(表示重复次数):
量词 说明 *
前面的字符重复零次或多次(count >= 0) +
前面的字符重复一次或多次(count >= 1) ?
前面的字符重复零次或一次(count = 0 或 count = 1) {n}
前面的字符重复n次(count = n) {n,}
前面的字符重复n次或更多次(count >= n)(逗号两侧不能有空格) {n,m}
前面的字符重复n ~ m 次(n <= count <= m)(逗号两侧不能有空格) // * 表示出现0次或多次 console.log(/^a*$/.test(''), /^a*$/.test('a'), /^a*$/.test('aa')); // true true true // + 表示出现1次或多次 console.log(/^a+$/.test(''), /^a+$/.test('a'), /^a+$/.test('aa')); // false true true // ? 表示出现0次或1次 console.log(/^a?$/.test(''), /^a?$/.test('a'), /^a?$/.test('aa')); // true true false // {n} 表示出现n次 console.log(/^a{2}$/.test(''), /^a{2}$/.test('a'), /^a{2}$/.test('aa'), /^a{2}$/.test('aaa')); // false false true flase // {n,} 表示出现n次或n次以上 console.log(/^a{2,}$/.test(''), /^a{2,}$/.test('a'), /^a{2,}$/.test('aa'), /^a{2,}$/.test('aaa')); // false false true true // {n,m} 表示出现n次到m次 console.log(/^a{1,2}$/.test(''), /^a{1,2}$/.test('a'), /^a{1,2}$/.test('aa'), /^a{1,2}$/.test('aaa')); // false true true false
-
字符类:
.
表示匹配除换行符之外的任意一个字符;[]
字符集合,匹配方括号中的任意一个字符,方括号中的字符的可写类型有:写法 说明 [abc]
匹配a、b、c中的任意一个字符 [a-z]
范围:匹配 a ~ z 共26个小写英文字母中的任意一个 [a-zA-Z0-9]
范围:匹配大小写英文字母和数字0~9中的任意一个 [^abc]
取反:匹配方括号中除了^后面的字符之外的任意一个字符 // . 匹配除换行符之外的任意一个字符 console.log(/^.$/.test('a')); // true console.log(/^.$/.test('\n')); // false console.log(/^a.c$/.test('abc')); // true // [] 匹配方括号中的任意一个字符,如[abc]匹配a、b、c中的任意一个字符 console.log(/^[abc]$/.test('a')); // true console.log(/^[abc]$/.test('abc')); // false // 范围:- 匹配方括号中的范围,如[a-z]匹配a到z中的任意一个字符 console.log(/^[a-z]$/.test('a')); // true console.log(/^[abc0-5]$/.test('4')); // true // 取反:^ 匹配方括号中除了^后面的字符之外的任意一个字符 console.log(/^[^abc]$/.test('d')); // true console.log(/^[^a-cA-C0]$/.test('0')); // false
-
预定义类:某些常见模式的简写方式:
写法 说明 \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]
其中,
\n
匹配换行符,\r
匹配回车符,\t
匹配制表符,\v
匹配垂直制表符,\f
匹配换页符。
-
- 修饰符
修饰符约束正则执行的某些细节行为,如是否取反大小写、是否支持多行匹配等。写在正则表达式的最后。i
表示匹配时字母不区分大小写;g
表示匹配所有满足正则表达式的结果(查找所有匹配而非在找到第一个匹配后停止);m
表示执行多行匹配
console.log(/a/.test('A')); // false console.log(/a/i.test('A')); // true console.log('aBCaBC'.replace(/a/g, 'A')); // ABCABC console.log(/d/m.test('abc\nabcd')); // true // i g 可以同时使用,但是 m 不能和 i 同时使用,否则会报错 console.log('aBCABC'.replace(/a/ig, 'D')); // DBCDBC