【JS】Web APIs BOM与正则表达式详解

一、JavaScript 组成结构及执行机制

1.1 JavaScript 由三大核心部分组成：

ECMAScript - 语言基础核心
- 定义变量、数据类型、运算符
- 控制结构（分支、循环）
- 函数、对象等基础语法
Web APIs - 浏览器提供的操作接口
- DOM（文档对象模型）：操作HTML元素
- BOM （浏览器对象模型）：操作浏览器窗口

1.2 JS执行机制

JavaScript是单线程语言，采用同步和异步任务处理机制。
同步任务在主线程上执行，异步任务（如事件、资源加载、定时器）在任务队列中等待。
事件循环（event loop）负责将任务队列中的任务放到主线程执行

二、BOM（浏览器对象模型）详解

2.1 Window 对象

顶级全局对象：所有全局变量、函数、对象都是window的属性
特性：
- 调用window属性和方法时可省略window.前缀
- var定义的全局变量会成为window的属性
- 页面中每个标签页都是一个window对象

2.2 定时器函数

延迟函数 setTimeout

javascript 复制代码

// 语法：setTimeout(回调函数, 延迟毫秒数)：延迟指定时间后执行一次回调函数
let timerId = setTimeout(() => {
    console.log('延迟执行');
}, 2000);

// 清除延时函数
clearTimeout(timerId);

// 注意事项：
// 1. 延迟函数需要等待，后面代码先执行
// 2. 返回值为定时器编号（正整数）

间歇函数 setInterval

javascript 复制代码

// 语法：setInterval(回调函数, 间隔毫秒数)：每隔指定时间就执行一次回调函数
let intervalId = setInterval(() => {
    console.log('每隔1秒执行');
}, 1000);

// 清除间歇函数
clearInterval(intervalId);

定时器对比

函数	执行次数	清除方法	返回值	用途
`setTimeout`	执行一次	clearTimeout(timerId)	定时器ID	延迟执行，如倒计时结束
`setInterval`	重复执行	clearInterval(timerId)	定时器ID	周期性执行，如计时器

2.3 Location 对象

location对象用于操作URL地址，常用属性和方法如下：

属性/方法	说明	示例
`href`	获取或设置完整的URL地址，用于跳转。	`location.href = 'https://example.com`
`search`	获取地址中携带的参数，即`?`后面部分。	`?name=value&age=20`
`hash`	获取地址中的哈希值，即`#`后面部分。	`#section1`
`reload()`	刷新当前页面，参数为true时强制刷新（忽略缓存）。	`location.reload(true)`

javascript 复制代码

// 1. href属性 - 获取或设置完整URL（可跳转页面）
console.log(location.href);
location.href = 'https://www.example.com';

// 2. search属性 - 获取?后的查询参数
console.log(location.search); // ?name=value

// 3. hash属性 - 获取#后的哈希值
console.log(location.hash); // #section

// 4. reload()方法 - 刷新页面
location.reload(); // 普通刷新
location.reload(true); // 强制刷新（忽略缓存）

2.4 Navigator 对象

navigator对象记录了浏览器的相关信息，常用userAgent属性检测浏览器版本和平台。

javascript 复制代码

// 检测浏览器信息
(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://m.itcast.cn'; // 跳转移动版
    }
})();

2.5 History 对象

history对象用于管理历史记录，常见方法：

back()：后退。
forward()：前进。
go(参数)：前进或后退指定页面，正数前进，负数后退。

javascript 复制代码

// 前进后退控制
history.back();     // 后退一页
history.forward();  // 前进一页
history.go(-1);     // 后退一页（参数为负数）
history.go(1);      // 前进一页（参数为正数）

三、本地存储机制

3.1 localStorage（长期存储）

作用：长期保留在本地浏览器中，即使刷新或关闭页面也不会丢失。
特性：以键值对形式存储字符串，容量约5M。
语法：
- 存储：localStorage.setItem(key, value)
- 获取：localStorage.getItem(key)
- 删除：localStorage.removeItem(key)

javascript 复制代码

// 存储数据（自动转为字符串）
localStorage.setItem('key', 'value');
localStorage.setItem('user', 'pink老师');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有
localStorage.clear();

// 特点：页面关闭后数据依然存在

3.2 sessionStorage（会话存储）

javascript 复制代码

// 用法与localStorage相同，但：
// 页面关闭时数据自动清除
sessionStorage.setItem('token', 'abc123');

3.3 存储复杂数据类型

JSON序列化方法

方法	作用	输入	输出	示例
`JSON.stringify()`	对象转JSON字符串	JavaScript对象	JSON格式字符串	`{"name":"小明","age":20}`
`JSON.parse()`	JSON字符串转对象	JSON格式字符串	JavaScript对象	`{name: "小明", age: 20}`

javascript 复制代码

// 问题：只能存储字符串
const user = { name: '小明', age: 20 };

// 解决方案：JSON序列化
localStorage.setItem('user', JSON.stringify(user));

// 获取时解析
const userData = JSON.parse(localStorage.getItem('user'));

JSON字符串规则：

必须是字符串类型
属性名和字符串值必须用双引号
示例：{"name":"小明","age":20}

四、数组高级方法

4.1 map() 映射方法

javascript 复制代码

const arr = [1, 2, 3];
const newArr = arr.map((item, index) => {
    return item * 2; // 返回新数组，不改变原数组
});
// newArr: [2, 4, 6]

4.2 join() 连接方法

javascript 复制代码

const arr = ['red', 'green', 'blue'];

arr.join();      // "red,green,blue"（默认逗号分隔）
arr.join('');    // "redgreenblue"（无分隔符）
arr.join('|');   // "red|green|blue"（自定义分隔符）

4.3 其他相关方法

javascript 复制代码

// confirm() 确认对话框
const isOk = confirm('确定要删除吗？');

// 立即执行函数（多种写法）
(function(){})();
(function(){}());
!function(){}();
+function(){}();

五、正则表达式

5.1 基本概念与应用

正则表达式：字符串匹配的模式规则
三大应用场景 ：
1. 验证匹配：表单验证、格式检查
2. 替换过滤：敏感词过滤、格式转换
3. 提取信息：从字符串提取特定部分

5.2 基础语法

javascript 复制代码

// 1. 定义正则
const reg = /表达式/;

// 2. 测试匹配
reg.test('字符串'); // 返回布尔值

// 3. 示例
const reg = /web/;
console.log(reg.test('web前端')); // true

5.3 常用方法对比

方法	作用	返回值	示例
`test()`	测试是否匹配	布尔值	`/web/.test('website') // true`
`exec()`	执行搜索匹配	数组或null	`/web/.exec('website') // ['web']`
`match()`	字符串匹配正则	数组或null	`'website'.match(/web/) // ['web']`
`replace()`	替换匹配内容	新字符串	`'web'.replace(/w/, 'W') // "Web"`

5.4 元字符详解

边界符

元字符	名称	功能	示例	说明
`^`	开始符	匹配字符串的开头	`^web`	匹配以"web"开头的字符串
`$`	结束符	匹配字符串的结尾	`web$`	匹配以"web"结尾的字符串
`^...$`	精确匹配	完全匹配整个字符串	`^web$`	只匹配"web"这个字符串

javascript 复制代码

/^web/    // 以web开头
/web$/    // 以web结尾
/^web$/   // 精确匹配web

量词符

元字符	名称	功能	等价写法	示例
`*`	星号	重复0次或多次	`{0,}`	`a*` 匹配0个或多个a
`+`	加号	重复1次或多次	`{1,}`	`a+` 匹配1个或多个a
`?`	问号	重复0次或1次	`{0,1}`	`a?` 匹配0个或1个a
`{n}`	精确匹配	重复n次	-	`a{3}` 匹配3个a
`{n,}`	最少匹配	重复n次或更多次	-	`a{2,}` 匹配2个或更多a
`{n,m}`	范围匹配	重复n到m次	-	`a{2,4}` 匹配2-4个a

注意： 量词 {n,m} 中的逗号左右两侧不能有空格。

javascript 复制代码

/w*/      // 重复0次或多次
/w+/      // 重复1次或多次
/w?/      // 重复0次或1次
/w{3}/    // 重复3次
/w{3,}/   // 重复3次或更多
/w{3,5}/  // 重复3到5次
// 注意：逗号两侧不能有空格

字符类

普通字符

元字符	名称	功能	示例	说明
`[...]`	字符集合	匹配方括号内任意字符	`[abc]`	匹配a、b或c
`[a-z]`	范围集合	匹配指定范围内的字符	`[a-z]`	匹配任意小写字母
`[A-Z]`	大写范围	匹配大写字母	`[A-Z]`	匹配任意大写字母
`[0-9]`	数字范围	匹配数字	`[0-9]`	匹配任意数字
`[^...]`	取反集合	匹配除了方括号内的字符	`[^abc]`	匹配非a、b、c的字符
`.`	点号	匹配除换行符外任意字符	`a.c`	匹配a和c之间任意一个字符

组合字符

字符类组合	功能	示例	说明
`[a-zA-Z]`	匹配所有字母	`[a-zA-Z]`	匹配任意字母
`[a-zA-Z0-9]`	匹配字母和数字	`[a-zA-Z0-9]`	匹配任意字母或数字
`[^a-z]`	匹配非小写字母	`[^a-z]`	匹配任意非小写字母

预定义字符

预定义类	等价写法	功能	示例	说明
`\d`	`[0-9]`	匹配数字	`\d{3}`	匹配3位数字
`\D`	`[^0-9]`	匹配非数字	`\D+`	匹配非数字序列
`\w`	`[A-Za-z0-9_]`	匹配单词字符	`\w{5,}`	匹配5位以上单词字符
`\W`	`[^A-Za-z0-9_]`	匹配非单词字符	`\W`	匹配特殊符号
`\s`	`[\t\r\n\v\f]`	匹配空白字符	`\s+`	匹配空白序列
`\S`	`[^\t\r\n\v\f]`	匹配非空白字符	`\S+`	匹配非空白序列

javascript 复制代码

/[abc]/           // 匹配a、b、c中的任意一个
/[a-z]/           // 匹配任意小写字母
/[A-Za-z0-9]/     // 匹配字母和数字
/[^abc]/          // 匹配除了a、b、c的字符

// 预定义类
/\d/              // 匹配数字 [0-9]
/\D/              // 匹配非数字 [^0-9]
/\w/              // 匹配单词字符 [A-Za-z0-9_]
/\W/              // 匹配非单词字符
/\s/              // 匹配空白字符
/\S/              // 匹配非空白字符

5.5 修饰符

修饰符	全称	功能	语法示例	说明
`i`	ignore case	忽略大小写	`/web/i`	匹配"Web"、"WEB"、"web"
`g`	global	全局匹配	`/a/g`	匹配所有"a"，而非第一个
`ig` 或 `gi`	组合修饰符	忽略大小写且全局匹配	`/web/gi`	匹配所有忽略大小写的"web"

javascript 复制代码

// i - 忽略大小写
/abc/i.test('ABC'); // true

// g - 全局匹配
'hello world'.replace(/o/g, '0'); // "hell0 w0rld"

// 组合使用
/abc/gi  // 全局匹配且忽略大小写

5.6 字符串替换

javascript 复制代码

const str = '前端开发，学习前端';
const newStr = str.replace(/前端/g, 'Web');
// newStr: "Web开发，学习Web"

5.7 表单验证相关

事件	触发时机	应用场景
`change`	值改变且失去焦点时	表单验证、实时保存
`input`	值改变时立即触发	实时搜索、即时验证
`submit`	表单提交时	最终验证、数据提交
`blur`	失去焦点时	字段验证、提示显示

change 事件

javascript 复制代码

input.addEventListener('change', function() {
    // 内容变化且失去焦点时触发
    // checkbox/radio状态改变立即触发
});

类名检测--contains()

javascript 复制代码

// 检查元素是否包含某个类
element.classList.contains('active'); // 返回布尔值

HTML5 验证属性

html 复制代码

<input type="text" required>
<!-- required: 必填字段，支持H5的浏览器会自动验证 -->

5.8 节流阀模式

javascript 复制代码

// 防止频繁点击（短信验证码示例）
let flag = true;
button.addEventListener('click', function() {
    if (!flag) return;
    
    flag = false;
    let count = 5;
    
    button.disabled = true;
    button.textContent = `${count}秒后重新发送`;
    
    const timer = setInterval(() => {
        count--;
        button.textContent = `${count}秒后重新发送`;
        
        if (count <= 0) {
            clearInterval(timer);
            button.disabled = false;
            button.textContent = '发送验证码';
            flag = true;
        }
    }, 1000);
});

六、实用技巧与最佳实践

6.1 数据ID自增策略

javascript 复制代码

// 新数据的ID = 最后一条数据的ID + 1
const newId = arr.length ? arr[arr.length - 1].id + 1 : 1;

6.2 日期格式化

javascript 复制代码

const now = new Date().toLocaleString();
// 格式：2023/10/27 下午3:30:45

6.3 事件委托优化

javascript 复制代码

// 为动态元素统一绑定事件
tbody.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
        const id = e.target.dataset.id;
        // 执行删除操作
    }
});

6.4 数据持久化最佳实践

javascript 复制代码

// 1. 读取时提供默认值
const data = JSON.parse(localStorage.getItem('data')) || [];

// 2. 修改后立即保存
function saveData() {
    localStorage.setItem('data', JSON.stringify(data));
    render(); // 重新渲染
}

// 3. 删除前确认
if (confirm('确定删除吗？')) {
    // 执行删除
}

七、综合应用：学生就业统计表

核心功能实现

数据管理：CRUD操作（增删改查）
本地存储：数据持久化
表单验证：非空检查、格式验证
动态渲染：数组map+join生成HTML
事件处理：提交、删除、确认

关键代码片段

javascript 复制代码

// 1. 初始化数据
const data = JSON.parse(localStorage.getItem('data')) || [];

// 2. 渲染函数（使用map+join）
function render() {
    const html = data.map(item => `
        <tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td><a href="#" data-id="${item.id}">删除</a></td>
        </tr>
    `).join('');
    
    tbody.innerHTML = html;
}

// 3. 添加数据
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 验证
    if (!validate()) return;
    
    // 添加
    const newItem = {
        id: data.length ? data[data.length - 1].id + 1 : 1,
        ...getFormData(),
        time: new Date().toLocaleString()
    };
    
    data.push(newItem);
    saveAndRender();
});

// 4. 删除数据（事件委托）
tbody.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
        const id = parseInt(e.target.dataset.id);
        const index = data.findIndex(item => item.id === id);
        
        if (index > -1 && confirm('确认删除？')) {
            data.splice(index, 1);
            saveAndRender();
        }
    }
});

总结

本文档系统梳理了Web APIs BOM和正则表达式的核心知识点，涵盖：

BOM操作：窗口控制、导航、历史记录
存储机制：localStorage、sessionStorage及JSON处理
数组方法：map、join等高级函数
正则表达式：语法、元字符、应用场景
表单交互：验证、事件处理、用户体验优化

掌握这些知识点，能够有效处理前端开发中的浏览器交互、数据管理和表单验证等常见需求，提升开发效率和应用质量。