JS高级-异常_Storage_正则

throw关键字

throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息：
throw关键字可以跟上哪些类型呢？
- 基本数据类型：比如number、string、Boolean
- 对象类型：对象类型可以包含更多的信息
但是每次写这么长的对象又有点麻烦，所以我们可以创建一个类：

Error类型

事实上，JavaScript已经给我们提供了一个Error类，我们可以直接创建这个类的对象：
Error包含三个属性：
- messsage：创建Error对象时传入的message；
- name：Error的名称，通常和类的名称一致；
- stack：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack；
Error有一些自己的子类：
- RangeError：下标值越界时使用的错误类型；
- SyntaxError：解析语法错误时使用的错误类型；
- TypeError：出现类型错误时，使用的错误类型；

异常的处理

我们会发现在之前的代码中，一个函数抛出了异常，调用它的时候程序会被强制终止：
- 这是因为如果我们在调用一个函数时，这个函数抛出了异常，但是我们并没有对这个异常进行处理，那么这个异常会继续传递到上一个函数调用中；
- 而如果到了最顶层（全局）的代码中依然没有对这个异常的处理代码，这个时候就会报错并且终止程序的运行；
我们先来看一下这段代码的异常传递过程：
- foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常；
- 但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数；
- 但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中；
- 依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了；

认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：
- localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
- sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

// storage基本使用
    // 1.token的操作
    let token = localStorage.getItem("token")
    if (!token) {
      console.log("从服务器获取token")
      token = "coderwhytokeninfo"
      localStorage.setItem("token", token)
    }

    // 2.username/password的操作
    let username = localStorage.getItem("username")
    let password = localStorage.getItem("password")
    if (!username || !password) {
      console.log("让用户输入账号和密码")
      username = "coderwhy"
      password = "123456"
      // 将token/username/password保存到storage
      localStorage.setItem("username", username)
      localStorage.setItem("password", password)
    }

    // 3.后续的操作
    console.log(token)
    console.log(token.length)
    console.log(token + " 哈哈哈")

localStorage和sessionStorage的区别

我们会发现localStorage和sessionStorage看起来非常的相似。
那么它们有什么区别呢？
- 验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
- 验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
- 验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

Storage常见的方法和属性

Storage有如下的属性和方法：
属性：
- Storage.length：只读属性
  - 返回一个整数，表示存储在Storage对象中的数据项数量；
方法：
- Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
- Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
- Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。
  - 如果key存储，则更新其对应的值；
- Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
- Storage.clear()：该方法的作用是清空存储中的所有key；

什么是正则表达式？

在JavaScript中，正则表达式使用RegExp类来创建，也有对应的字面量的方式：
- 正则表达式主要由两部分组成：模式（patterns）和修饰符（flags）

正则表达式的使用方法

修饰符flag的使用

// 创建正则
const re1 = /abc/ig
const message = "fdabc123 faBC323 dfABC222 A2324aaBc"

// 1.使用正则对象上的实例方法
// webpack -> loader -> test: 匹配文件名
// 正则 -> 拿到文件 -> loader操作
// 1.1.test方法: 检测某一个字符串是否符合正则的规则
if (re1.test(message)) {
  console.log("message符合规则")
} else {
  console.log("message不符合规则")
}

// 1.2.exec方法: 使用正则执行一个字符串
const res1 = re1.exec(message)
console.log("exec", res1)


// 2.使用字符串的方法, 传入一个正则表达式
// 2.1. match方法:
const result2 = message.match(re1) // 如果re1不加g，则只匹配第一个
console.log(result2)

// 2.2. matchAll方法
// 注意: matchAll传入的正则修饰符必须加g
const result3 = message.matchAll(re1)
// console.log(result3.next())
// console.log(result3.next())
// console.log(result3.next())
// console.log(result3.next())
for (const item of result3) {
  console.log(item)
}

// 2.3. replace/replaceAll方法

// 2.4. split方法
const result4 = message.split(re1)
console.log(result4)

// 2.5. search方法
const result5 = message.search(re1)
console.log(result5)