Web APIs

最新推荐文章于 2025-03-31 10:06:50 发布

笨比2号

最新推荐文章于 2025-03-31 10:06:50 发布

阅读量147

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_62289159/article/details/133097873

版权

Web APIs

补充知识

变量声明

let和const中，const优先，尽量使用const
1.const语义化更好
2.很多变量声明的时候就知道不会更改
3.实际开发中也是，如react框架，基本const
数组类型也可以改成const，数组的地址不变，所以数组不变，只是存放在堆的值改变了。但是如果给数组重新赋值，数组会改变

一.DOM-获取元素

1.Web API基本认知

(1).作用和分类

作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

(2).DOM

DOM：是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门来操作网页内容的功能

(3).DOM树

将HTML文档以树状结构直观的表现出来。
描述网页内容关系的名词。
作用：文档树直观的体现了标签与标签之间的关系

(4).DOM对象

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

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

document对象：
是DOM里提供的一个对象
所有它提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里面

2.获取DOM对象

(1)根据css选择器获取

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

document.querySelector('css选择器')

参数：
包含一个或多个有效的css选择器字符串
返回值：
css选择器匹配的第一个元素，一个htmlelement对象

2.选择匹配的多个元素

document.querySelectorAll('css选择器')

参数：
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的NodeList对象集合

我们得到的是一个伪数组：
有长度有索引号的数组
但是没有pop()push()等数组方法
想要得到里面每一个对象，则需要遍历(for)的方式获得

3.操作元素内容

(1)对象.innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

//获取元素
const box = document.querySelector('.box')
//修改文字内容  对象.innerText 属性
console.log(box.innerText)  // 获取文字内容
box.innerText = '我是一个盒子'  // 修改文字内容
box.innerText = '<strong>我是一个盒子</strong>'  // 不解析标签

(2)对象.innerHTML属性

将文本内容添加/更改到任意标签位置
会解析标签，多标签建议使用模板字符

//innerHTML 解析标签
console.log(box.innerHTML)
// box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>'

4.操作元素属性

(1)操作元素常用属性

可以通过JS设置/修改标签元素属性，比如通过src更换图片
最常见的属性比如：hrer、title、src等
语法：

对象.属性=值

例子：

// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性   对象.属性 = 值
img.src = './images/2.webp'
img.title = '1111'

(2)操作元素样式属性

1.通过style属性操作css
语法：

对象.style.样式属性=值

举例

// 1. 获取元素
const box = document.querySelector('.box')
//2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'

(3)操作类名操作css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：

//active是一个css类名
元素.className='active'

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

(4)通过classList操作类控制css

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

语法：

//追加一个类，类名不加.，并且是字符串
元素.classList.add('类名')
//删除一个类，类名不加.，并且是字符串
元素.classList.remove('类名')
//切换一个类，有就删掉，没有就加上
元素.classList.toggle('类名')

(5)操作表单元素属性

获取：DOM对象.属性名
设置：DOM独享.属性名=新值

1 获取元素
const uname = document.querySelector('input')
2. 获取值  获取表单里面的值 用的  表单.value
console.log(uname.value) // 电脑
console.log(uname.innerHTML)  innertHTML 得不到表单的内容
3. 设置表单的值
uname.value = '我要买电脑'
console.log(uname.type)
uname.type = 'password'

表单属性中添加就有效果，移除没有效果，一律用布尔值表示，如果是true，代表加入了该属性，如果是false代表移除了该属性

// 1. 获取
const ipt = document.querySelector('input')
// console.log(ipt.checked)  // false   只接受布尔值
ipt.checked = true
// ipt.checked = 'true'  // 会选中，不提倡  有隐式转换
// 1.获取
const button = document.querySelector('button')
// console.log(button.disabled)  // 默认false 不禁用
button.disabled = true   // 禁用按钮

(6)自定义属性

标准属性：标签天生自带的属性
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<body>
  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1
    console.log(one.dataset.spm)  // 不知道
  </script>
</body>

5.定时器-间歇函数

(1)开启定时器

setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒

注意：
函数名字不需要加括号
定时器返回的是一个id数字

(2)关闭定时器

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

二.DOM-事件基础

1.事件监听(绑定)

(1)定义

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

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

(2)事件监听

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
事件调用的函数：要做什么事

举例：

// 需求： 点击了按钮，弹出一个对话框
// 1. 事件源   按钮  
// 2.事件类型 点击鼠标   click 字符串
// 3. 事件处理程序 弹出对话框
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
	alert('你早呀~')
})

(3)事件类型

鼠标事件：鼠标触发
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件：表单获得光标
focus 获得焦点
blur 失去焦点

键盘事件：键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发

文本事件：表单输入触发
input 用户输入事件

(4)焦点事件

举例：

  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('focus', function () {
      console.log('有焦点触发')
    })
    input.addEventListener('blur', function () {
      console.log('失去焦点触发')
    })
  </script>

(5)键盘事件

举例：

    //键盘事件
    input.addEventListener('keydown', function () {
      console.log('键盘按下了')
    })
    input.addEventListener('keyup', function () {
      console.log('键盘弹起了')
    })

(6)文本事件

举例：

    input.addEventListener('input', function () {
      console.log(input.value)
    })

2.事件对象

(1)获取事件对象

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

使用场景：
判断用户按下哪个键，比如按下回车键可以发布新闻
判断鼠标点击了哪个元素，从而做响应的操作

事件对象在事件绑定的回调函数的第一个参数
一般命名为event、ev、e

  <button>点击</button>
  <input type="text">
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function (e) {
      console.log(e)
    })

(2)常见属性

type：获取当前的时间类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode(旧的)

举例：

    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      // console.log(11)
      // console.log(e.key)
      if (e.key === 'Enter') {
        console.log('我按下了回车键')
      }
    })

3.环境对象

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

每个环境都有this，普通函数里面的this指向的是window

函数的调用方式不同，this指代的对象也不同
谁调用，this就是谁，是判断this指向的粗略规则

举例：

    btn.addEventListener('click', function () {
      console.log(this)  // btn 对象
      btn.style.color = 'red'
      this.style.color = 'red'
    })

4.回调函数

如果将函数A作为参考传递给函数B时，我们称函数A为回调函数
简单理解：当一个函数当作参数来传递给另外一个函数的时候，这个函数就是回调函数

三.事件进阶

1.事件流

(1)事件流与两个阶段说明

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

有两个阶段：捕获阶段、冒泡阶段

捕获阶段是从父到子，冒泡阶段是从子到父，实际工作以冒泡为主

(2)事件捕获

概念：从DOM的根元素开始去执行对应的事件（从外到里）
事件捕获需要写对应代码才能看到效果
代码：

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

说明：
addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用L0事件监听，则只有冒泡阶段，没有捕获

(3)事件冒泡

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

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

事件冒泡是默认存在的
L2事件监听第三个参数时false，或者默认都是冒泡

(4)阻止冒泡

把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法：

事件对象.stopPropagation()

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

(5)解绑事件

on事件方式，直接使用null覆盖on就可以(on是老版写法)

btn.onclick=function(){
	alert('点击了')
}
btn.onclick=null

addEventListener方式，必须使用：
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])

例如：

function fn(){
	alert('点击了')
}
btn.addEventListener('click',fn)
btn.removeEventListener('click',fn)

注意：匿名函数无法被解绑

(6)鼠标经过事件：

鼠标经过事件；
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)

2.事件委托

(1)特点

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

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

原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

实现：事件对象.target.tagName可以获得真正触发事件的元素
例子：

// 点击每个小li 当前li 文字变为红色
    // 按照事件委托的方式  委托给父级，事件写到父级身上
    // 1. 获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      // alert(11)
      this.style.color = 'red'
      console.dir(e.target) // 就是我们点击的那个对象
      e.target.style.color = 'red'
      // 我的需求，我们只要点击li才会有效果
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })

(2)阻止元素默认行为

e.preventDefault()

    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止默认行为  提交
      e.preventDefault()
    })

3.其他事件

(1)页面加载事件

加载外部资源(如图片、外联css和js等)加载完毕时触发的事件

使用场景：
有时候只需要等页面资源全部处理完了做一些事情
老代码喜欢把js写在head中，这时候直接找dom元素找不到

事件名：load

例子：

    // 等待页面所有资源加载完毕，就回去执行回调函数
    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(11)
      })
    })

    img.addEventListener('load', function () {
      // 等待图片加载完毕，再去执行里面的代码
    })

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

另外一种方法：当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded
监听页面DOM加载完毕：
给document添加DOMContentLoaded
document.addEventListener(‘DOMContentLoaded’, function () {}

    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(11)
      })
    })

(2)页面滚动事件

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

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

事件名：scroll
监听整个页面滚动：

window.addEventListener('scroll',function()){
	//执行的操作
}

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

属性：scrollLeft和scrollTop
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的，数字型，不带单位

(3)页面尺寸事件

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

window.addEventListener('resize',function()){
	//执行的代码
}

检测屏幕宽度：

window.addEventListener('resize',function(){
	let w=document.documentElement.clientWidth
	console.log(w)
})

获取元素宽高：
获取元素的可见部分宽高(不包含边框，margin，滚动条等)
clientWidth和clientHeight

4.元素尺寸与位置

(1)获取宽高和位置

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

获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值，方便计算
注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性

(2)element.getBoundingClientRect()

获取位置：
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置

四.DOM-节点操作

1.日期对象

(1)日期对象

日期对象：用来表示时间的对象
作用：得到当前系统时间

(2)实例化

在代码中发现了new关键字时，一般将这个操作成为实例化
在创建一个时间对象并获取时间

获得当前时间

const data=new Date()

获得指定时间

const data=new Data('2022-5-1 8:30:00')

(3)日期对象方法

方法：
getFullYear() 获得年份，四位
getMonth() 获得月份取值0~11
getDate() 获取月份中的每一天不同月份取值也不相同
getDay() 获取星期取值0~6
getHours() 获取小时取值0~23
getMinutes() 获取分钟取值0~59
getSeconds() 获取秒取值为0~59

(4)时间戳

使用场景：计算倒计时效果

定义：是指1970年1月1日0时0分0秒起至现在的毫米数，是一种特殊的计量时间的方式

算法：
将来的时间戳-现在的时间戳=剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳2000ms-现在时间戳1000ms=1000ms
1000ms转换为就是0小时0分1秒

1.使用getTime()方法

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

2.使用+new Date()方法，无需实例化

console.log(+new Date())
console.log(+new Date('2022-4-1 18:30:00'))

3.使用Date.now()，无需实例化，但是只能得到当前时间戳，前两种可以指定

console.log(Date.now())

2.节点操作

(1)DOM节点

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

节点类型：
元素节点：所有的标签，比如body、div。html是根节点
属性节点：所有的属性，比如href
文本节点：所有的文本
其他

(2)查找节点

父节点查找：
parentNode属性
返回最近一级的父节点，找不到返回null

子元素.parentNode

子节点查找：
childNodes：
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children属性：
仅获得所有元素节点
返回的还是一个伪数组

父元素.children

兄弟节点查找：
下一个兄弟节点：
nextElementSibling属性
上一个兄弟节点：
previousElementSibling属性

(3)增加节点

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

1.创建节点
即创建一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：

创建一个新的元素节点：
document.createElement('标签名')

2.追加节点
要想再界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素：

父元素.appendChild(要插入的元素)

插入到父元素中某个元素的前面：

父元素.insertBefore(要插入的元素,在哪个元素前面)

(3)克隆节点

复制一个原有的节点
把复制的节点放入到指定的元素内部

克隆节点：

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

(4)删除节点

删除节点必须通过父元素
语法：

父元素.removeChild(要删除的元素)

注：
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none)有区别：隐藏节点还是存在的，删除节点是从html中删除

3.M端事件

移动端有自己独特的地方，比如触屏事件touch(也称触摸事件)，Android和IOS都有
触屏事件touch(也称摸屏事件)
touch对象代表一个触摸点，触摸点可能是一根手指，有可能是一根触屏笔，触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作
常见触屏事件如下：
touchstart：手指触摸到一个DOM元素时触发
touchmove：手指在一个DOM元素上滑动时触发
touched：手指从一个DOM元素上移开时触发

举例：

    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
      console.log('开始摸我了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
      console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
      console.log('一直摸，移动')
    })

4.JS插件

就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果

swiper插件：www.swiper.com.cn

五.BOM-操作浏览器

1.window对象

(1)BOM(浏览器对象模型)

BOM：浏览器对象模型

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

(2)定时器-延时函数

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

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

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

清除延时函数：

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

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

(3)JS执行机制

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

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

同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜

异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

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

异步任务
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。

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

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)。

(4)location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

经常加herf 利用js的方式跳转页面
//得到当前文件的URL地址
console.log(location.href)
//可以通过js方式跳转到目标地址
location.href='http://www.itcast.cn'

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

console.log(location.search)

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

console.log(location.hash)

后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

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

<button class="reload">刷新</button>
const reload=document.querySelector('.reload')
reload.addEventListener('click',function(){
	loaction.reload()
	//强制刷新 类似 ctrl+f5
})

(5)navigator对象

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

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

// 检测 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' }
})()

(6)history对象

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

常用属性和方法：
back()：可以后退功能
forward()：前进功能
go(参数)：前进后退功能，参数如果是1，前进1个页面，如果是-1，后退1个页面

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

2.本地存储

(1)本地存储的介绍

以前我们页面写的数据一刷新页面就没有了，是不是？
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右
常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

(2)本地存储分类-localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

语法:
存储/修改数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

本地存储只能存储字符串类型

(3)本地存储分类-sessionStorage

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

(3)存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.
解决：需要将复杂数据类型转换成JSON字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)

解决：把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串)

cosnt obj=JSON.parse(localStorage.getItem('goods'))

(4)数组map和join方法

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

 const arr1 = [10, 20, 30]
    const newArr1 = arr1.map(function (item) {
      return item + 10
    })
    console.log(newArr1)

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

    const arr = ['red', 'blue', 'green']
    // 把数组元素转换为字符串
    console.log(arr.join('*')) //用*来分割

六.正则表达式

1.介绍

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

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

正则表达式在 JavaScript中的使用场景：
例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
比如用户名:

/^[a-z0-9_-]{3,16}$/

过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

2.语法

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

const 变量名 = /表达式/

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

2.判断是否有符合规则的字符串
test() 方法用来查看正则表达式与指定的字符串是否匹配

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

    const str = '我们在学习前端，希望学习前端能高薪毕业'
    // 正则表达式使用：
    // 1. 定义规则
    const reg = /前端/
    // 2. 是否匹配
    // console.log(reg.test(str))  // true

3.检索（查找）符合规则的字符串：
exec() 方法在一个指定字符串中执行一个搜索匹配

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

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

3.元字符

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

元字符(特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
但是换成元字符写法： [a-z]

为了方便记忆和学习，我们对众多的元字符进行了分类：
边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
量词（表示重复次数）
字符类（比如 \d 表示 0~9）

1.边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
^：表示匹配行首的文本(以谁开始)
$：表示匹配行尾的文本(以谁结束)
如果 ^ 和 $ 在一起，表示必须是精确匹配。要匹配的和里面的一模一样

2.量词
量词用来设定某个模式出现的次数
*：重复零次或更多次
+：重复一次或更多次‘
?：重复零次或一次
{n}：重复n次
{n,}：重复n次或更多次
{n,m}：重复n到m次
注意：逗号左右两侧千万不要出现空格

3.字符类：
[ ] 匹配字符集合
后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

console.log(/[abc]/.test('andy'))

[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围
[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以

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

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

预定义：指的是某些常见模式的简写方式
\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]

4.修饰符

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

语法：

/表达式/修饰符

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

替换replace:

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