WebApis知识点案例总结（续2）

Window对象

BOM（浏览器对象模型）

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

javascript 复制代码

    // document.querySelector()
    // window.document.querySelector()
    function fn(){
      console.log(11)
    }
    window.fn()
    var num=10
    console.log(window.num)

定时器-延时函数

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

javascript 复制代码

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

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

javascript 复制代码

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

注意：

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

两种定时器对比：执行的次数

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

5秒钟之后消失的广告

需求：5秒钟之后，广告自动消失

分析：

设置延时函数
隐藏元素

javascript 复制代码

    // 1.获取元素
    const img=document.querySelector('img')
    setTimeout(function(){
      img.style.display='none'
    },5000)

JS执行机制

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

这是因为Javascript这门脚本语言诞生的使命所致---JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除

单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是：如果JS执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

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

同步任务

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

异步任务

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

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

1.普通事件，如click，resize等

2.资源加载，如load，error等

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

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

执行顺序(事件循环)

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

javascript 复制代码

    console.log(1)
    console.log(2)
    setTimeout(function(){
      console.log(3)
    })
    console.log(4)

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

location对象

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

常用属性和方法：

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

html 复制代码

  <script>
    // console.log(location)
    // console.log(location.href)
    // 1.href经常用href 利用js的方法去跳转页界
    location.href='http://www.baidu.com'
  </script>

上面代码在浏览器渲染时会自动跳转至百度页面

search属性获取地址中携带的参数，符号?后面的部分

html 复制代码

<body>
  <form action="">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <button>提交</button>
  </form>
  <script>
    console.log(location.search)
  </script>
</body>

hash属性获取地址中的哈希值，符号#后面部分

html 复制代码

    <a href="#/my">我的</a>
    <a href="#/friend">关注</a>
    <a href="#/download">下载</a>

点击我的a链接之后就会显示哈希值，即#号后面的部分

reload方法用来刷新当前页面，传入参数true时表示强制刷新

5秒之后跳转的页面

需求：用户点击可以跳转，如果不点击，则5秒钟后会自动跳转，要求里面有倒计时。

javascript 复制代码

  // 1.获取元素
    const a=document.querySelector('a')
    // 2.开启定时器
    // 3.声明倒计时变量
    let num=5
    let timerID=setInterval(function(){
      num--
      a.innerHTML=`支付成功<span>${num}</span>秒钟之后跳转到首页`
      // 如果num===0 则停止定时器 并且完成跳转功能
      if(num===0){
        clearInterval(timerID)
        // 4.跳转页面
        location.href='http://www.itcast.cn'
      }
    },1000)

navigator对象

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

html 复制代码

  <script>
        // 检测 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'
      }
    })();
    // !(function () { })();
    !function () { }()
  </script>

常用属性和方法：

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

history对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等

常用属性和方法：

history	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1 前进1个页面，如果是-1 后退1个页面

javascript 复制代码

  const back=document.querySelector('button:first-child')
    const forward=back.nextElementSibling//back的下一个兄弟
    back.addEventListener('click',function(){
      //后退一步
      // history.back()
      history.go(-1)
    })
    forward.addEventListener('click',function(){
      //前进一步
      history.forward()
      history.go(1)
    })

本地存储

介绍

之前写出的页面数据刷新之后页面就没有了

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量数据，HTML5规范提出了相关解决方案

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

分类

localStorage

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

特性：

可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

语法：

存储数据：

javascript 复制代码

localStorage.setltem(key,value)

javascript 复制代码

    // 存储一个名字 'uname' '名字'
    localStorage.setItem('uname','名字')
    // 获取方式 都加引号
    console.log(localStorage.getItem('uname'))
    // 删除本地存储 只删除名字
    localStorage.removeItem('uname')
    // 改 如果原来有这个键，就改，如果没有就增
    localStorage.setItem('uname','red老师')
    // 存一个年龄
    // 本地存储只能存储字符串数据类型
    localStorage.setItem('age',18)
    console.log(localStorage.getItem('age'))

sessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法和localStorage基本相同

存储复杂数据类型

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

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

语法：JSON.stringify(复杂数据类型)

因为本地存储里面取出来的是字符串，不是对象，无法直接使用，故还要将字符串转为对象

javascript 复制代码

    // 1.复杂数据类型存储必须转换为JSON字符串存储
    localStorage.setItem('obj',JSON.stringify(obj))
    // JSON对象 属性和值有引号 而且引号统一是双引号
    // {"uname":"pink老师","age":18,"gender":"女"}
    // 取
    console.log(localStorage.getItem('obj'))
    console.log(typeof localStorage.getItem('obj'))//string
    // 2.把JSON字符串转换为对象
    console.log(JSON.parse(localStorage.getItem('obj')))

综合案例---学生就业统计表

需求：录入学生信息，页面刷新数据不丢失

渲染业务

根据持久化数据渲染页面

核心步骤：

1.读取localstorage本地数据

如果有数据则转换为对象放到变量里面一会使用它渲染页面
如果没有则用默认空数组[]
为了测试效果，可以先把initData存入本地存储看效果·

2.根据数据渲染页面，遍历数组，根据数据生成tr，里面填充数据，最后追加给body

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

利用map()和join()数组方法实现字符串拼接

数组中map()方法迭代数组

使用场景：

map可以遍历数组处理数据，并且返回新的数组

map也称为映射。映射是个术语，指两个元素的集之间元素相互"对应"的关系

map重点在于有返回值，forEach没有返回值
javascript 复制代码
    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颜色']
数组中join方法

作用：

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

语法：
javascript 复制代码
    const arr=['red颜色','blue颜色','green颜色']
    console.log(arr.join(''))//red颜色 blue颜色 green颜色
参数：

数组元素是通过参数里面指定的分隔符进行分隔的，

空字符串（''）,则所有元素之间都没有任何字符，

括号为空则默认逗号分隔

数组中map+join方法渲染页面思路：

map遍历数组处理数据生成tr，返回一个数组

利用map和join渲染页面新思路：

2.根据数据渲染页面，遍历数组，根据数组生成tr，里面填充数据，最后追加给tbody

渲染业务要封装成一个函数render
我们使用map方法遍历数组，里面更换数据，然后会返回有数据的tr数组
通过join方法把map返回的数组转换为字符串
把字符串通过innerHTML赋值给tbody

javascript 复制代码

    function render() {
      // (1). 利用map遍历数组，返回对应tr的数组
      const trArr = arr.map(function (ele, index) {
        return `
          <tr>
            <td>${ele.stuId}</td>
            <td>${ele.uname}</td>
            <td>${ele.age}</td>
            <td>${ele.gender}</td>
            <td>${ele.salary}</td>
            <td>${ele.city}</td>
            <td>${ele.time}</td>
            <td>
              <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
      })

      console.log(trArr)
      // (2). 把数组转换为字符串 join
      // (3). 把生成的字符串追加给tbody 
      tbody.innerHTML = trArr.join('')
      // 显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()

新增业务

点击新增按钮，页面显示新的数据

核心步骤：

给form注册提交事件，要阻止默认提交事件（阻止默认行为）事件对象.preventDefault()
非空判断如果年龄，性别，薪资有一个值为空，则return返回'输入不能为空'中断程序
给arr数组追加对象，里面存储表单获取过来的数据
渲染页面，重置表单（reset()方法）

javascript 复制代码

    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    // 2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      // 2.2 非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
      arr.push({
        // 处理 stuId：数组最后一条数据的stuId + 1      
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()//得到当前时间
      })
      // 2.4 渲染页面和重置表单（reset()方法）
      render()
      this.reset() // 重置表单

      // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
      localStorage.setItem('data', JSON.stringify(arr))
    })

删除业务

点击删除按钮，可以删除对应的数据

核心步骤：

采用事件委托的形式，给tbody注册点击事件
得到当前点击的索引号，渲染数据的时候，动态给a链接添加自定义属性data-id="0"
根据索引号，利用splice删除数组这条数据
重新渲染页面
把最新arr数组存入本地存储

javascript 复制代码

  // 3. 删除业务
    // 3.1 采用事件委托形式，给 tbody 注册点击事件
    tbody.addEventListener('click', function (e) {
      // 判断是否点击的是删除按钮  A 链接
      if (e.target.tagName === 'A') {
        // alert(11)
        // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
        console.log(e.target.dataset.id)

        // 确认框 确认是否要真的删除
        if (confirm('您确定要删除这条数据吗？')) {
          // 3.3 根据索引号，利用 splice 删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          // 3.4 重新渲染页面 
          render()
          // 3.5 把最新 arr 数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })

关于stuid的处理

新增加序号应该是最后一条数据的stuid+1
但是要判断，如果没有数据则是直接赋值为1，否则就采取上面的做法

javascript 复制代码

stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1

总代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '迪丽热巴',
        age: 22,
        salary: '12000',
        gender: '女',
        city: '北京',
        time: '2099/9/9 08:08:08'
      }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    // (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
    // (2). 如果没有数据，则用 空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      // (1). 利用map遍历数组，返回对应tr的数组
      const trArr = arr.map(function (ele, index) {
        return `
          <tr>
            <td>${ele.stuId}</td>
            <td>${ele.uname}</td>
            <td>${ele.age}</td>
            <td>${ele.gender}</td>
            <td>${ele.salary}</td>
            <td>${ele.city}</td>
            <td>${ele.time}</td>
            <td>
              <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
      })

      console.log(trArr)
      // (2). 把数组转换为字符串 join
      // (3). 把生成的字符串追加给tbody 
      tbody.innerHTML = trArr.join('')
      // 显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()

    // 2. 新增业务
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    // 2.1 form表单注册提交事件，阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      // 2.2 非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
      arr.push({
        // 处理 stuId：数组最后一条数据的stuId + 1      
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()//得到当前时间
      })
      // 2.4 渲染页面和重置表单（reset()方法）
      render()
      this.reset() // 重置表单

      // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
      localStorage.setItem('data', JSON.stringify(arr))
    })

    // 3. 删除业务
    // 3.1 采用事件委托形式，给 tbody 注册点击事件
    tbody.addEventListener('click', function (e) {
      // 判断是否点击的是删除按钮  A 链接
      if (e.target.tagName === 'A') {
        // alert(11)
        // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
        console.log(e.target.dataset.id)

        // 确认框 确认是否要真的删除
        if (confirm('您确定要删除这条数据吗？')) {
          // 3.3 根据索引号，利用 splice 删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          // 3.4 重新渲染页面 
          render()
          // 3.5 把最新 arr 数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })

  </script>
</body>

</html>

正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式，也是对象
通常用来查找，替换那些符合正则表达式的文本，许多语言都支持正则表达式

正则表达式在JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母，数字或者下划线，昵称输入框中可以输入中文（匹配）比如用户名：/[a-z0-9_-]3,16)$/
过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

作用：

表单验证（匹配）
过滤敏感词（替换）
字符串中我们想要的部分（提取）

语法：

定义规则

查找

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

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

javascript 复制代码

const 变量名=/表达式/ //其中/ /是表达式字面量

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

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

语法：

javascript 复制代码

 regObj.test(被检测的字符串)

javascript 复制代码

    const str='我们在学习前端 希望学习前端可以高薪毕业'
    // const 变量名=/表达式/
    // 正则表达式使用:
    const reg=/前端/
    // 1.定义规则
    // 2.是否匹配
    // regObj.test(被检测的字符串)
    console.log(reg.test(str));//true

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

exec()方法在一个指定字符串中执行一个搜素匹配

javascript 复制代码

regObj.exec(被检测字符串)

如果匹配成功，exec()方法返回一个数组，否则返回null

元字符

普通字符：

大多数的字符能够描述他们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能匹配字符串中与他们相同的字符

元字符(特殊字符)：

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

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

参考文档

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

正则测试工具: http://tool.oschina.net/regex

为了方便记忆和学习，我们对众多的元素进行了分类：

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

正则表达式的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

量词（表示重复次数）

用来设定某个模式出现的次数

量词	说明
*	重复0次或更多次
+	重复一次或更多次
？	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

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

（1）[]匹配字符集合

1.后面的字符串只要包含abc中任意一个字符，都返回true。

javascript 复制代码

    console.log(/[abc]/.test('andy'))//true
    console.log(/^[abc]$/.test('ab'))//false 精确匹配 只可以有一个
    console.log(/[abc]/.test('ab'))//true 
    console.log(/^[abc]{2}$/.test('ab'))//true

2.[]里面加上-连字符

javascript 复制代码

console.log(/^[a-z]$/.test('c'))//true

使用连字符-表示一个范围

[a-z]表示a到z26个英文字母都可以
[a-zA-Z]表示1大小写都可以
[0-9]表示0~9的数字都可以
[a-zA-Z0-9]表示只可以输入英文字母大小写和数字0-9

例如：腾讯QQ号：

javascript 复制代码

^[1-9][0-9]{4,}$(腾讯QQ从10000开始)//重复四次 离他最近的重复四次

3.[]里面加上^符号

比如：

[^a-z]匹配除了小写字母以外的字符，注意要写到中括号里面

(2).匹配除换行符之外的任何单个字符

用户名验证案例

需求:用户名要求用户英文字母，数字，下划线或者短横线组成，并且用户名长度为6~16位

分析：

首先准备好这种正则表达式模式/^[a-zA-Z0-9-_]{6,16}$/
当表单失去焦点就开始验证。
如果符合正则规范，则让后面的span标签加right类
如果不符合正则规范，则让后面的span标签添加wrong类

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        const reg=/^[a-zA-Z0-9-_]{6,16}$/
        const input=document.querySelector('input')
        const span=input.nextElementSibling
        input.addEventListener('blur',function(){
            console.log(reg.test(this.value))
            if(reg.test(this.value)){
                span.innerHTML='输入正确'
                span.className=('right')
            }
            else {
                span.innerHTML='请输入6~16位的英文数字下划线'
                span.className=('error')
            }
        })
    </script>
</body>

</html>

(3)预定义：指的是某些常见模式的简写方式

预定类	说明
\d	匹配0-9之间的任一数字相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母，数字和下划线，相当于[A-Za-z0-9_]
\W	除所有字母，数字和下划线，相当于[^A-Za-z0-9_]
\s	匹配空格（包括换行符，制表符，空格符等）相当于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[^\t\r\n\v\f]

javascript 复制代码

日期格式:^\d{4}-\d{1,2}-\d{1,2}

修饰符

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

语法：

javascript 复制代码

/表达式/修饰符

i是ignore的缩写，正则匹配时字母不区分大小写
g是global的缩写，匹配所有满足正则表达式的结果

替换replace替换

语法：

javascript 复制代码

字符串.replace(/正则表达式/,'替换的文本')

javascript 复制代码

    const str='java是一门编程语言,学完java工资很高'
    const re=str.replace(/java/ig,'前端')//全局替换 没有g只能替换一个
    const re=str.replace(/java|JAVA/g,'前端')//全局替换 没有g只能替换一个

    console.log(re)

过滤敏感词

需求：要求用户不能输入敏感字

分析：

用户输入内容
内容进行正则替换查找，找到敏感词，进行**
要全局替换使用修饰符g

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
  <div></div>
  <script>
    const tx=document.querySelector('textarea')
    const btn=document.querySelector('button')
    const div=document.querySelector('div')
    btn.addEventListener('click',function(){
      // tx.value.replace(/激情|基情/,'**')
      div.innerHTML=tx.value.replace(/激情/g,'**')
    })
  </script>
</body>
</html>

WebApis知识点案例总结（续2）

Window对象

BOM（浏览器对象模型）

定时器-延时函数

5秒钟之后消失的广告

JS执行机制

同步任务

异步任务

执行顺序(事件循环)

location对象

5秒之后跳转的页面

navigator对象

history对象

本地存储

介绍

分类

localStorage

sessionStorage

存储复杂数据类型

综合案例---学生就业统计表

渲染业务

数组中map()方法 迭代数组

数组中join方法

数组中map+join方法渲染页面思路：

新增业务

删除业务

关于stuid的处理

正则表达式

语法：

定义规则

查找

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

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

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

元字符

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

量词（表示重复次数）

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

（1）[]匹配字符集合

(2).匹配除换行符之外的任何单个字符

(3)预定义：指的是某些常见模式的简写方式

修饰符

替换replace替换

数组中map()方法迭代数组