JS笔记--Web APIS(下)
# Web APIs - 第5天笔记
## 定时器
-延迟函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：
~~~JavaScript
setTimeout(回调函数, 延迟时间)
~~~
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行。
-间歇函数
setInterval : 每隔一段时间就执行一次
清除延时函数：
~~~JavaScript
clearTimeout(timerId)
~~~
>注意点
>1. 延时函数需要等待,所以后面的代码先执行
>2. 返回值是一个正整数，表示定时器的编号
~~~html
~~~
## location对象
location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象。
| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 |
| search | 属性，获取地址中携带的参数，符号 ？后面部分 |
| hash | 属性，获取地址中的啥希值，符号 # 后面部分 |
| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 |
~~html
~~~
# navigator对象
navigator是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：- 通过 userAgent 检测浏览器的版本及平台
~~~javascript
// 检测 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' }})();
~~~
## histroy
对象history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等**使用场景**history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。
## 本地存储（今日重点）
本地存储：将数据存储在本地浏览器中
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
### localStorage（重点）
作用:数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
特性:以键值对的形式存储，并且存储的是字符串。
### sessionStorage（了解）
特性：- 用法跟localStorage基本相同
- 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
### localStorage 存储复杂数据类型
问题：本地只能存储字符串,无法存储复杂数据类型.
解决：需要将复杂数据类型转换成 JSON字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)
什么是JSON字符串：
- 首先是1个字符串
- 属性名使用双引号引起来，不能单引号
- 属性值如果是字符串型也必须双引号
~~~html
~~~
问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用
解决： 再把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串)
~~~html
~~~
## 数组map 方法
使用场景：map 可以遍历数组处理数据，并且返回新的数组
语法：
~~~javascript
~~~
map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值，forEach没有返回值（undefined）
## 数组join方法
作用：join() 方法用于把数组中的所有元素转换一个字符串
语法：
~~~html
~~~
# Web APIs - 第6天笔记
## 正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）
使用场景：
例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
### 正则基本使用
1. 定义规则
~~~JavaScript
const reg = /表达式/
~~~
- 其中` / / `是正则表达式字面量
- 正则表达式也是`对象 `
2. 使用正则
- `test()方法` 用来查看正则表达式与指定的字符串是否匹配
- 如果正则表达式与指定的字符串匹配 ，返回`true`，否则`false`
~~~html
~~~### 元字符
1. 普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
- 普通字符只能够匹配字符串中与它们相同的字符。 - 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
2. 元字符(特殊字符）
- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
#### 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符!
>如果 ^ 和 $ 在一起，表示必须是精确匹配
~~~html
~~~#### 量词
量词用来设定某个模式重复次数!
注意： 逗号左右两侧千万不要出现空格
~~~html
~~~#### 范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
~~~html
~~~# 替换和修饰符
replace 替换方法，可以完成字符的替换
~~html
~~~修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
## change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
## 判断是否有类
元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false