JS中的本地数据存储和正则表达式

Window对象

• window对象是一个全局对象，也可以说是JavaScript中的顶级对象
• 像document，alert(),console.log()这些都是window的属性，基本BOM的属性和方法都是window的
• 所有通过var定义在全局作用域中的变量，函数都会变成window对象的属性和方法
• window对象下的属性和方法调用的时候可以省略window

BOM(浏览器对象模型)

BOM是浏览器对象模型

定时器-延时函数

• JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout
  语法：

    setTimeout(回调函数，等待的毫秒数);

• setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
• 清除延时函数：(在调用递归的某种特殊情况下需要清除)

    let timer = setTimeout(回调函数，等待的毫秒数);
    clearTimeout(timer);

• 注意点：

1. 延时器需要等待，所以后面不的代码先执行
2. 每一次调用延时器都会产生一个新的延时器

• 延时函数和间歇函数的区别：

1. 延时函数：执行一次
2. 间歇函数：每隔一段时间就执行一次，除非手动清除

JS执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致—JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加后删除。
单线程就意为着所有任务需要排队，前一个任务结束才会执行后一个任务。这样导致的问题是：如果JS执行的时间过长就会导致页面渲染不连贯，导致页面渲染加载阻塞的感觉

• 为了解决这个问题，利用多核cpu的计算能力，HTML提出web woker标准，允许JavaScript脚本创建多个线程，于是JS中出现了同步和异步

• 同步：前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排列顺序是一致的

• 异步：在前一个任务的等待过程中可以去执行后一个不需要等待的任务

• 同步任务：同步任务都在主线程上执行，形成一个执行栈

• 异步任务：JS的异步任务是通过回调函数实现的，异步任务添加到任务队列中

• 一般而言，异步任务有一下三种类型：

1. 普通事件，如click，resize等
2. 资源加载，如load，error等
3. 定时器，包括setInterval,setTimeout等

JS的执行机制顺序

1. 先执行执行栈中的同步任务
2. 异步任务放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

• 由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制称为事件循环

location对象

• location 的数据类型是对象，他拆分并保存了URL地址的各个组成部分
• 常用的属性和方法：

1. href属性获取完整的URL地址，对其赋值时用于地址的跳转，语法：

 // 可以得到当前文件URL地址
 console.log(location.href);
 // 可以通过JS的方式跳转到目标地址
 location.href = 'http://www.itcast.cn';

2. search属性获取地址中携带的参数，符号？后面部分
3. hash属性获取地址中的哈希值，符号#后面部分
   后期vue路由的铺垫，经常用于不刷新页面，显示不同页面
4. reload()方法用来刷新当前页面，传入参数true时表示强制刷新

navigator对象

• navigator的数据类型是对象，该对象记录了浏览器自身的相关信息
• 常用的属性和方法：

1. 通过userAgent检测浏览器的版本及平台

history对象

• history的数据类型是对象，主要是管理历史记录，该对象与浏览器地址栏的操作相对应
• 常用的属性和方法：

1. back()----可以后退功能
2. forward()----前进功能
3. go(参数)----前进后退功能，参数是1就是前进，参数是-1就是后退

本地存储

• 数据存储在用户浏览器中
• 设置，读取方便，甚至页面刷新不丢失数据
• 容量较大，sessionStorage和localStorage约5M左右

本地存储分类–localStorage

• 作用：可以将数据永久存储在本地，除非动手删除，否则关闭页面也会存在
• 特性：

1. 可以多窗口(页面)共享(同一浏览器可以共享)
2. 以键值对的形式存储使用
3. 语法：

    // 1. 存储数据
    localStorage.setltem('key','value');
    // 2. 获取数据
    localStorage.getItem('key')

本地存储分类–sessionStorage

• 特性：

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用
4. 用法跟localStorage基本相同

存储复杂数据类型

• 本地只能存储字符串，无法存储复杂数据类型
• 解决方法：需要将复杂数据类型转换成JSON字符串，再存储到本地
• 语法：JSON.stringify(复杂数据类型)
• 成功存入复杂数据类型后，使用JSON.parse()将复杂类型取出

案例拓展的知识点

1. 字符串拼接新思路：（效果更高，开发常用的写法）

• 利用map()和join()数组方法实现字符串拼接
• map可以遍历数组处理，并且返回新的数组，语法：

    const arr = ['red','blue','green'];
    const newArr = arr.map(function (ele,index)  {
        console.log(ele) // 数组元素
        console.log(index) // 数组索引号
        return ele + '演示'
    })
    console.log(newArr)  // ['red颜色'，'blue颜色'，'green颜色']

map也称为映射，指的是两个元素集之间相互“对应”的关系
map重点在于有返回值，forEach没有返回值

• join()方法用于把数组中的所有元素转换为一个字符串，语法：

    const arr = ['red颜色','blue颜色','green颜色'];
    console.log(arr.join('')); // red颜色blue颜色green颜色
参数：数组元素是通过参数里面指定的分隔符进行分隔的，若为空字符串('')，则所有元素之间都没有任何字符,默认为逗号

2. confirm()

• 页面会弹出一个警示框，点击确定返回true，点击取消返回false

正则表达式

• 正则表达式是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
• 通常用于查找，替换那些符合正则表达式的文本
• 正则表达式在JavaScript中的使用场景：

1. 例如验证表单：用户表单只能输入英文字母，数字或下划线
2. 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

语法

• JavaScript中正则表达式的语法有两种

1. 定义正则表达式语法：

// const 变量名 = /表达式/;
// / /是正则表达式字面量
    const reg = /前端/;
// test()方法---用来查看正则表达式与指定的字符串是否匹配
    reg.test(被检测的字符串);
    // 如果正则表达式与指定的字符串匹配，返回true，否则false
// exec()方法，在一个指定字符串中执行一个搜索匹配
    reg.exec(被检测的字符串);
    // 如果匹配成功，exec()方法返回一个数组，否则返回null

元字符

1. 普通字符：大多数字符仅能够描述它们本身，这些字符称为普通字符，例如所有的字母和数字，并且也只能匹配字符串中与他们相同的字符
2. 元字符(特殊字符)：是一些具有特殊含义的字符，例如规定用户只能输入26个英文字母，用元字符来写就是—[a-z];

元字符的分类

• 边界符(表示位置，开头和结尾，必须用什么开头，用什么结尾)

1. ^—表示匹配行首的文本(以谁开始)
2. $—表示匹配行尾的文本(以谁结束)
3. 如果^和$在一起，表示必须是精确匹配，即匹配的内容要完全一致

• 量词(表示重复次数)
  量词用来设定某个模式出现的次数

1. *—重复0次或更多次
2. ±–重复一次或更多次
3. ?—重复0次或1次
4. {n}—重复n次
5. {n,}—重复n次或更多次
6. {n,m}—重复n到m次(逗号左右不能有空格)

• 字符类(比如 \d 表示0~9)

1. []匹配字符集合—只要后面的字符串包含[]中的任意一个字符，都返回true，注意：¹$这种情况下是只能选中一个，多余的都是不匹配的
2. [] 里面加上 - 连字符，表示一个范围，例如：[a-zA-Z]表示可以输入大小写的英文字母 QQ号：²[0-9]{4,}$ 表示qq号从10000开始
3. [] 里面加上 ^ 取反符号，例如[^a-z]表示匹配除了小写字母以外的单个字符
4. .匹配除换行符之外的任何单个字符

• 预定义类：指的是某些常见模式的简写方式

1. \d-----匹配0-9之间任一数字，相当于[0-9]
2. \D-----匹配0-9以外的字符，相当于[^0-9]
3. \w-----匹配任意的字母，数字和下划线，相当于[A-Za-z0-9]
4. \W-----匹配除所有字母，数字和下划线以外的字符，相当于[^A-Za-z0-9]
5. \s-----匹配空格(包括换行符，制表符，空格符等)，相当于[\t\r\n\v\f];
6. \S-----匹配非空格的字符，相当于[^\t\r\n\v\f];

修饰符

• 修饰符约束正则执行的某些细节行为，如是否区分大小写，是否支持多行匹配等
• 语法： /表达式/修饰符

1. i是单词ignore的缩写，正则匹配时字母不区分大小写
2. g是单词global的缩写，匹配所有满足正则表达式的结构
3. replace(正则表达式，‘要替换的文本’)

案例知识补充与拓展

1. change事件—主要运用在判断表单的value是否改变，当表单value改变并且失去焦点时，触发该事件
2. classList.contains()-- 查看某个元素是否包含某个类，若有则返回true，没有返回false
3. form表单中的autocomplete属性–HTML autocomplete 属性允许 web 开发人员指定用户代理是否有权限在填写表单字段值时提供自动帮助，并指导浏览器填写该字段的预期信息类型。

---

1. ↩︎

2. 1-9 ↩︎