JavaScript Web APIs

变量声明

• const优先，不用var

• 有了变量先给一个const，如果发现它后面是要被修改的，再改为lets

• 对于引用数据类型，const声明的变量，里面存的不是值，而是地址

web APIs作用

使js去操作html和浏览器

分类

1. DOM文档对象模型

2. BOM浏览器对象模型

DOM树

• 将HTML文档以树状结构直观的表现出来

• 文档树直观的体现了标签与标签之间的关系

DOM对象

浏览器根据HTML标签生成的JS对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上

核心思想：把网页内容当作对象来处理

document对象：是DOM里提供的一个对象他提供的属性和方法都是用来访问和操作网页内容的，比如document.write()网页所有内容都在document里面

获取DOM对象

根据CSS选择器来获取DOM元素

1. 选择匹配的第一个元素

   1. document.querySelector（'css选择器'）

   2. 参数：包含一个或多个有效的CSS选择器 字符串

   3. 返回值：CSS选择器匹配的第一个元素，一个HTML元素对象

   4. 可以直接修改样式

2. 选择匹配的多个元素

   1. doucument.querySelectorAll(' CSS 选择器 ')

   2. 参数：包含一个或多个有效的CSS选择器 字符串

   3. 返回值：CSS选择器匹配的所有元素，得到的是一个伪数组

      伪数组：①有长度有索引号

      ② 没有pop()和push()等数组方法

      想要得到里面的每一个对象，则需要遍历

   4. 不可以直接修改样式

其他获取DOM元素方法

1. 根据id获取一个元素

   1. document.getElementById(' nav ')

2. 根据标签回去一类元素，获取页面所有的此标签元素

   1. document.getElementByTagName(' div ')

3. 根据类名获取元素，获取页面的所有为此类名的元素

   1. document.getElementByClassName('w ')

操作元素内容

1. 对象.innerText属性

   1. 将文本内容添加/更新到任意标签位置

   2. 显示纯文本，不解析标签

2. 对象.innerHTML属性

   1. 将文本内容添加/更新到任意标签位置

   2. 会解析标签，多标签建议使用模板字符

操作元素属性

1. 常用属性

   1. 语法：对象.属性 = 值

   2. 通过JS设置/修改标签元素属性，比如通过src更换图片，最常见的有：href、src、title

2. 样式属性
   通过JS设置/修改标签元素的样式属性(修改后的样式生成的是行内样式表)，比如通过 轮播图小圆点自动更换颜色样式，点住按钮可以滚动图片，这是移动图片的位置left等等

   1. 通过style属性操作CSS

      1. 语法：对象.style.样式属性 = ' 值 '

      2. 样式属性采用小驼峰命名法

      3. 一定不要忘记加单位

   2. 操作类名（className）操作CSS
      如果修改的样式比较多，直接通过style属性修改比较繁琐，所有借助于CSS类名的形式

      1. 语法：元素.className = ' active '

      2. 注意：①由于class是关键字，所以使用className去代替
         ②className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

   3. 通过classList操作类控制CSS,常用
      为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名

      1. 语法：

         1. 追加一个类：元素.classList.add(' 类名 ')

         2. 删除一个类：元素.classList.remove(' 类名 ')

         3. 切换一个类：元素.classList.toggle(' 类名 ') 有就删掉，没有就加上

3. 表单元素属性
   表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
   正常的有属性有取值的，跟其他的标签属性没有任何区别

   1. 获取：DOM对象.属性名

   2. 设置：DOM对象.属性名 = 新值

   3. 属性：表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示。如果为true 代表添加了该属性 如果是false 代表移除了该属性，比如：disabled、checked、selected

      1. disabled：禁用吗？true false

      2. checked：是否勾选？ true false

4. 自定义属性

   1. 在html5中推出了专门的data-自定义属性

   2. 在标签上一律以data-开头

   3. 在DOM对象上一律以dataset对象方式获取

定时器

间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动区触发，例如：网页中的倒计时

1. 开启定时器：setInterval（函数名，间隔时间）
   页面刷新后，要等待这一个间隔时间，才开始运行这段代码

   1. 作用：每隔一段时间调用这个函数

   2. 单位：间隔单位是 毫秒

   3. 返回：是一个id数字

2. 关闭定时器：let 变量名 = setInterval(函数名，间隔时间)

   clearInterval(变量名)

事件监听

1. 事件：事件是编程时系统内发生的动作或者发生的事情，比如：用户在网页上单击一个按钮

2. 事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也成为 绑定事件或者注册事件，比如：鼠标经过显示下拉菜单，点击可以播放轮播图等等

   1. 三要素

      1. 事件源：哪个dom元素被事件触发了

      2. 事件类型：用什么方式触发，比如：鼠标单击click、鼠标经过mouseover

      3. 事件调用的函数：要做什么事

3. 语法：

   1. 元素对象.addEventListener（'事件类型'，要执行的函数）

   2. 事件什么时候触发，什么时候调用函数，触发一次执行一次函数

4. 事件监听版本

   1. DOM L0：事件源.on事件 = function(){}

   2. DOM L2：事件源.addEventListener(事件，事件处理函数)

   3. 区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

   4. DOM L3：在DOM L2的基础上重新定义了这些事件，也添加了一些新事件类型

5. 事件类型

   1. 鼠标事件：鼠标触发

      1. click：鼠标点击

      2. mouseenter：鼠标经过

      3. mouseleave：鼠标离开

   2. 焦点事件：表单获得光标

      1. focus：获得焦点

      2. blur：失去焦点

   3. 键盘事件：键盘触发

      1. keydown：键盘按下触发

      2. keyup：键盘弹起触发

   4. 文本事件：表单输入触发

      1. input：用户输入事件

6. 事件对象

   1. 获取事件对象：

      1. 对象：也是个对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

      2. 可以判断用户按下哪个键，比如按下回车键可以发布新闻

      3. 可以判断鼠标点击了哪个元素，从而做出相应的操作

   2. 如何获取：

      1. 语法：元素.addEventListener('click',function(e){}

      2. 这里第一个参数e就是事件对象，一般命名为event、ev、e

      3. 在事件绑定的回调函数的第一个参数就是事件对象

   3. 事件对象常用属性：

      1. type：获取当前事件类型

      2. clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置

      3. offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

      4. key：用户按下的键盘键的值
         现在不提倡使用keyCode

      5. target：可返回时间的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口

      6. tagName：元素标签名字

环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
this：用来引用当前执行上下文中的对象。其值在代码运行时根据汉书的调用方式动态绑定。

1. 全局上下文中的this

   1. 全局作用域中，this指向全局对象。

   2. 在浏览器中，this通常指向window对象

   3. 在Node.js中，它指向global对象

2. 函数中的this

   1. 普通函数中的this

      1. this的值由调用时的上下文决定。

      2. 默认，指向全局对象，除非函数是作为对象的方法调用的

   2. 对象方法中的this

      1. this会指向调用该方法的对象

   3. 构造函数中的this

      1. this指向新创建的实例对象

      2. 当使用new关键字调用一个函数时，JavaScript会创建一个新的对象，并将this绑定到该新对象上

   4. 箭头函数中的this

      1. 箭头函数不会自己绑定this

         1. 它会继承自外层（定义时）的上下文

         2. 意味着箭头函数中，this的值取决于箭头函数定义时的作用域，而不是调用时的上下文

         3. showThis是一个箭头函数，不会绑定obj作为this，而是继承自全局上下文，输出window对象

         const obj = {
            name:'JavaScript',
            showThis: ()=>{
                   console.log(this)
            }
         }
         obj.showThis()

3. this的绑定方法

   1. call方法

      1. 允许你为函数指定调用时的this，并执行该函数

      2. call的第一个参数是要绑定的this值，后续参数则是函数的参数

   2. apply方法

      1. 与call类似，但它接受的是一个参数数组，而不是单独的参数列表

   3. bind方法

      1. bind不会立即调用函数，而是返回一个新的函数，并将this永久绑定到指定的对象

      2. 通常用于需要在将来调用时绑定this的场景

回调函数

如果当函数A做为参数传递给函数B时，我们称函数A为回调函数

简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见：setInterval（fn,1000）

addEventListener('click', function(){})

事件流

1. 事件流指的是事件完整执行过程中的流动路径

   1. 假设页面里有个div，当触发事件时，会经历两个阶段

   2. 两个阶段

      1. 捕获阶段 从父到子

      2. 冒泡阶段 从子到父

   3. 过程

      1. 事件捕获=>事件目标阶段=>事件冒泡

      2. 实际工作以事件冒泡为主

2. 事件捕获

   1. 概念

      1. 从DOM的根元素开始去执行对应的事件（从外到里）

      2. 事件捕获需要写对应代码才能看到效果

   2. 代码

      1. DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

   3. 说明

      1. addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

      2. 若传入false代表冒泡阶段触发，默认就是false

      3. 若是用L0事件监听，则只有冒泡阶段，没有捕获

3. 事件冒泡

   1. 概念

      1. 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中其次被触发。这一过程被称为事件冒泡

      2. 简单理解：当一个元素触发事件时，会依次向上调所有父级元素的同名事件

      3. 事件冒泡是默认存在的

      4. L2事件监听第三个参数是false，或者默认都是冒泡

4. 阻止冒泡

   1. 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

   2. 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

   3. 前提：阻止事件冒泡需要拿到事件对象

   4. 语法：事件对象.stopPropagation

   5. 注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

5. 阻止默认行为

   1. 我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转

   2. 语法：事件对象.preventDefault()

6. 解绑事件

   1. on事件方法，直接使用null覆盖就可以实现事件的解绑

   2. 注意：匿名函数无法解绑

7. 鼠标经过事件

   1. mouseover和mouseout会有冒泡效果

   2. mouseenter和mouseleave没有冒泡效果（推荐）

两种注册事件的区别

1. 传统on注册（L0）

   1. 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）

   2. 直接使用null覆盖就可以 实现事件的解绑

   3. 都是冒泡阶段执行的

2. 事件监听注册（L2）

   1. 语法：addEventListener（事件类型，事件处理函数，是否使用捕获）

   2. 后面注册的事件不会覆盖前面注册的事件（同一个事件）

   3. 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

   4. 必须使用removeEventListener（事件类型，事件处理函数，获取捕获或者冒泡阶段）解绑事件

   5. 匿名函数无法被解绑

事件委托

1. 事件委托是利用事件流的特征解决一些开发需求的知识技巧

2. 优点：减少注册次数，可以提高程序性能

3. 原理：

   1. 事件委托其实是利用事件冒泡的特点

   2. 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

4. 如何找到真正触发的元素？

   1. 事件对象.target.tagName

其他事件

1. 页面加载事件

   1. 加载外部资源（如图片、外联CSS和JavScript等）加载完毕时触发的事件

      1. 有些时候需要等页面资源全部处理完了做一些事情

      2. 老代码喜欢把script写在head中，这时候直接找dom元素找不到

   2. 事件名：load

      1. 监听页面所有资源加载完毕

         1. 给windo添加load事件window.addEventListener('load',function(){})

         2. 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

   3. 事件名：DOMContentLoaded

      1. 当初始的HTML文档被完全加载和解析完成之后，

         DOMContentLoaded事件被触发，

         而无需等待样式表、图像等完全加载

      2. 监听页面DOM加载完毕

         1. 给document添加DOMContentLoaded事件

2. 元素滚动事件

   1. 滚动条在滚动的时候持续触发的事件

   2. 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

   3. 事件名：scroll

   4. 监听整个页面滚动

      1. 给window或document添加scroll事件

      2. 监听某个元素的内部滚动直接给某个元素加即可

   5. 使用场景

      1. 我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，就可以使用scroll来检测滚动的距离

   6. 获取位置

      1. scrollLeft和scrollTop属性

         1. 获取被卷去的大小

         2. 获取元素内容往左，往上滚出去看不到的距离

         3. 这两个值是可读写的

      2. document.doucumentElement.scrollTop

         1. document.documentElement是获取html元素的方式

3. 页面尺寸事件

   1. resize：会在窗口尺寸改变的时候触发事件

      1. 检测屏幕宽度：

         1. 获取宽高：获取元素的可见部分宽高（不包含边框，margin，滚动条等）

         2. clientWidth和clientHeight

元素尺寸与位置

1. 使用场景：

   1. 页面滚到到某个元素，就可以做某些事

   2. 通过js的方式，得到元素在页面中的位置

   3. 这样不用去测量和计算了

2. 获取宽高

   1. 获取元素的自身宽高、包含元素自身设置的宽高、padding、border

   2. offsetWidth和offsetHeight

   3. 获取出来的是数值，方便计算

   4. 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

3. 获取位置

   1. 获取元素距离自己定位父级元素的左、上距离

   2. offsetLeft和offsetTop：注意是只读属性

   3. 以带有定位的父级位置为准，如果没有，则以文档左上角为准

日期对象

用来表示时间的对象

• 作用

  • 可以得到当前系统的时间

• 实例化 在代码中发现了new关键字时，一般将这个操作称为实例化

1. 创建一个时间对象并获取时间

   1. 获得当前时间：const date = new Date()

   2. 获得指定时间：cosnt date = new Date('2008-8-8')

• 日期对象方法

  • 使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

1. getFullYear()：获得年份，获取四位年份

2. getMonth()：获得月份，取值为0~11，实际要＋1

3. getDate()：获取月份中的每一天，不同月份取值也不相同

4. getDay()：获取星期，取值为0~6，星期天是0

5. getHours()：获取小时，取值0~23

6. getMinutes()：获取分钟，取值为0~59

7. getSeconds()：获取秒，取值为0~59

8. toLocaleString()：比如：2024/10/19 09:41:21

9. toLocaleDateString()：比如：2024/10/19

10. toLocaleTimeString()：比如：09:42:10

• 时间戳

  • 什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

  • 使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

• 时间戳的算法

1. 将来的时间戳 - 现在的时间戳 = 剩余的时间毫秒数

2. 剩余时间毫秒数 转换为 剩余时间的 年 月 日 时 分 秒 就是 倒计时时间

3. 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

4. 1000ms 转换为就是 0小时0分1秒

• 获取时间戳

1. 使用getTime（）方法

   const date = new Date()
   console.log(date.getTime())

2. 简写 +new Date()

   1. 无需实例化

   2. console.log(+new Date())

3. 使用Date.now()

   1. 无需实例化

   2. 但是只能得到当前的时间戳，前两种可以返回指定时间的时间戳

   3. console.log(Date.now())

4. 转换公式

   1. 计算天数：d = parseInt(总秒数 / 60 /60 /24)

   2. 计算小时：h = parseInt(总秒数/60/60%24)

   3. 计算分数：m = parseInt(总秒数/60%60)

   4. 计算当前秒数：s = parseInt(总秒数%60)

节点操作

• DOM节点：DOM树里每一个内容都称之为节点

• 节点类型：

  • 元素节点：所有的标签 比如body、div，html是根节点

  • 属性节点：所有的属性 比如href

  • 文本节点：所有的文本

  • 其他

• 节点关系：

  • 父子关系

  • 兄弟关系

• 查找节点：返回的都是一个对象

  • 父节点查找：子元素.parentNode

    • parentNode属性

    • 返回最近一级的父节点 找不到返回为null

  • 子节点查找：childNodes，父元素.children

    • childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等

    • children属性：仅获得所有元素节点，返回的是一个伪数组

  • 兄弟关系查找：

    • 下一个兄弟节点：nextElementSibling属性

    • 上一个兄弟节点：previousElementSibling属性

• 增加节点：很多情况下，我们需要在页面中增加元素，比如，点击发布按钮，可以新增一条信息

  • 一般情况下，新增节点，按照如下操作

    • 创建一个新的节点

    • 把创建的新的节点放入到指定的元素内部

  • 创建节点：

    • 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

  • 创建元素节点方法：

    • document.createElement('标签名')

  • 追加节点：

    • 要想在界面看到，还得插入到某个父元素中

    • 插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)

    • 插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素，在哪个元素前面)

• 克隆节点：

  • 特殊情况下，新值节点，按照如下操作

    • 复制一个原有的节点

    • 把复制的节点放入到指定的元素内部

  • 元素.cloneNode(布尔值)

    • cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

    • 若为true，则代表克隆时会包含后代节点一起克隆

    • 若为false，则代表克隆时不包含后代节点

    • 默认为false

• 删除节点：若一个节点在页面中已不需要时，可以删除它，在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

  • 语法：父元素.removeChild(要删除的元素)

  • 注意

    • 如不存在父子关系则删除不成功

    • 删除节点和隐藏节点（display：none）有区别：隐藏节点还是存在的，但是删除，是从html里删除节点

M端事件

• 触屏事件touch（也称触摸事件），Android和IOS都有

  • touch对象代表一个触摸点。触摸点可能是一根手指，也可能时一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作

• 常见的触屏事件

  • touchstart：手指触摸到一个DOM元素时触发

  • touchmove：手指在一个DOM元素上滑动时触发

  • touchend：手指从一个DOM元素上移开时触发

Window对象

BOM对象

BOM（Browser Object Model）浏览器对象模型

1. window对象是一个全局对象，也可以说是JavaScript中的顶级对象

2. 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的

3. 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

4. window对象下的属性和方法调用的时候可以省略window

定时器-延时函数 setTimeout

JavaScript中内置的一个用来让代码延迟执行的函数

• 语法：setTimeout（回调函数，等待的毫秒数）

• setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

• 清除延时函数:

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

• 注意:

  • 延时器需要等待，所以后面的代码先执行

  • 每一次调用延时器都会产生一个新的延时器

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

  • 延时函数只执行一次

  • 间歇函数每隔一段时间就执行一次，除非手动清除

js执行机制

1. JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

2. 因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。

   比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

3. 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。

   这样所导致的问题：如果JS执行时间过长，这样会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4. 为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步

• 同步

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

    比如：做饭的同步做法：先烧水煮饭。等水开了（10分钟之后），再去切菜，炒菜

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

• 异步

  • 在做一件事情时，需要花费很长时间，在做这件事的同时，还可以去处理其他事情。

    比如：做饭的异步做法：在烧水的同时，利用这10分钟，去切菜，炒菜

  • 异步任务：相关添加到任务队列中（任务队列也称为消息队列）

    • JS的异步是通过回调函数实现的

    • 一般分为三种类型

      1. 普通事件：如click、resize等

      2. 资源加载：如load、error等

      3. 定时器：包括setInterval、setTimeout等

• 同异步的本质区别

  • 这条流水线上各个流程的执行顺序不同

• js执行机制：

  1. 先执行执行栈中的同步任务

  2. 异步任务放入任务队列中

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

• 事件循环event loop：

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

location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

• 常用属性和方法

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

     1. console.log(location.href)
        可以获得当前文件URL地址

     2. location.href = 'https://www.itcast.cn'
        可以通过JS方式跳转到目标地址

  2. search 属性

     1. 获取地址中携带的参数，符号？后面的部分

     2. console.log(location.search)

  3. hash属性

     1. 获取地址中的哈希值，符号#后面部分

     2. 经常用于不刷新页面，显示不同页面，比如网易云音乐

     3. console.log(location.search)

  4. reload()方法：

     1. 用来刷新当前页面，传入参数true时表示强制刷新，类似Ctrl+f5

navigation对象

• navigation的数据类型是对象，该对象下记录了浏览器自身的相关信息

• 常用属性和方法

• 通过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的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

• 常用属性和方法

  1. back()：可以后退功能

  2. forward()：前进功能

  3. go(参数)：前进后退功能 参数如果是1前进1个页面 如果是-1 后退1个页面

本地存储

特性：

1. 数据存储在用户浏览器中

2. 设置、读取方便、甚至页面刷新不丢失数据

3. 容量较大，sessionStorage和localStorage约5M左右

• 本地存储分类

  • localStorage

    • 作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在

    • 特性：

      1. 可以多窗口（页面）共享（同一浏览器可以共享）

      2. 以键值对的形式存储使用

      3. 只能存储字符串数据类型

    • 语法：

      1. 存储数据：localStorage.setItem('key','value')

      2. 获取数据：localStorage.getItem('key')

      3. 删除数据：localStorage.removeItem('key')

      4. 修改数据：localStorage.setItem('key','value')
         如果原来有这个键，就是改；如果原来没有这个键，就是增

  • sessionStorage

    • 特性：

      1. 生命周期为关闭浏览器窗口

      2. 在同一个窗口（页面）下数据可以共享

      3. 以键值对的形式存储使用

      4. 用法跟localStorage基本相同

• 存储复杂数据类型

  • 本地只能存储字符串，无法存储复杂数据类型

    • 解决：

      1. 需要将复杂数据类型转换成JSON字符串，再存储到本地

      2. 语法：

         • 转换为字符串：JSON.stringify(复杂数据类型)

    • 问题：

      1. 因为本地存储里面取出来的时字符串，不是对象，无法直接使用

      2. 解决：

         • 把取出来的字符串转换为对象

         • 语法：JSON.parse(JSON字符串)

正则表达式

正则表达式（Regular Expressions）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象

通常用来查找、替换那些复合正则表达式的文本，许多语言都支持正则表达式

• 作用：

  1. 匹配：例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框可以输入中文

  2. 替换：过滤掉页面内容中的一些敏感词

  3. 提取：从字符串中获取我们想要的特定部分

• 语法：

  1. 定义规则

     • const 变量名 = /表达式/

     • 其中/ / 是正则表达式字面量

  2. 判断是否有符合规则的字符串

     • test()方法：用来查看正则表达式与指定的字符串是否匹配

       1. 语法：定义规则的变量名.test(被检测的字符串)

       2. 如果正则表达式与指定的字符串匹配，返回true，否则false

  3. 检索（查找）符合规则的字符串

     • exec()方法：在一个指定字符串中执行一个搜索匹配，如果匹配成功，返回的是一个数组，否则返回null

元字符：

1. 普通字符：大多数的字符仅能够描述它们自身，这些字符称作普通字符，例如所有的字母和数字。也就是说，欧统字符只能够匹配字符串中与它们相同的字符。

2. 特殊字符（元字符）：

   • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能

     1. 比如，规定用户只能输入英文26个英文字母，普通字符abcdefghijklmn......，但是换成元字符写法：[a-z]

   • 参考文档：MDN、正则测试工具https://tool.oschina.net/regex

元字符分类

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

  1. ^ 表示匹配行首的文本（以谁开始）

  2. $ 表示匹配行尾的文本（以谁结束）

  3. 如果^和$在一起，表示必须是精确匹配

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

  1. + 重复一次或更多次

  2. * 重复零次或更多次

  3. ？ 重复零次或一次

  4. {n} 重复n次

  5. {n, } 重复n次或更多次

  6. {n,m} 重复n到m次，逗号左右两侧千万不能有空格

• 字符类（比如\d表示0~9）

  1. [ ] 匹配字符集合：比如/[abc]/,后面的字符串只要包含abc中任意一个字符，都返回true，只能三选一

  2. [ ]里面加上 - 连字符：使用连字符 - 表示一个范围

     1. 比如，[a-z]表示a到z26个英文字母都可以

     2. [a-zA-Z]表示大小写都可以

     3. [0-9]表示0~9的数字都可以

  3. [ ]里面加上^取反符号：

     1. 比如[^a-z]匹配除了小写字母以外的字符

     2. 注意要写到中括号里面

  4. . 匹配除换行符之外的任何单个字符

  5. 预定义类，指的是某些常见模式的简写方式

     • \d 匹配0-9之间的任一数字，相当于[0-9]，比如：日期格式：^\d{4} - \d{1,2} - \d{1,2}

     • \D 匹配所有0-9之外的字符，相当于[^0-9]

     • \w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9]

     • \W 除所有字母、数字和下划线以外的字符相当于[^A-Za-z0-9]

     • \s 匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\v\f]

     • \S 匹配非空格的字符，相当于[^\t\r\v\f]

修饰符

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

• 语法：/表达式/修饰符，比如：console.log(/a/i.test('a'))

• i是单词ignore的缩写，正则匹配时字母不区分大小写

• g是单词global的缩写，匹配所有满足正则表达式的结果

• 替换：replace替换

  • 语法：字符串.replace(/正则表达式/，'替换的文本')