【JavaScript】

插件

---

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发（TAB栏）

https://www.swiper.com.cn/

JavaScript

介绍

JavaScript （是什么？）

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用（做什么？）

网页特效 (监听用户的一些行为让网页作出对应的反馈)

表单验证 (针对表单数据的合法性进行判断)

数据交互 (获取后台的数据, 渲染到前端)服务端编程 (node.js)

JavaScript的组成（有什么？）

ECMAScript:

​ 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等

Web APIs :

​ DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

​ BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JS执行机制

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

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

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

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

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

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

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

同步

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

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

同步任务

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

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。

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

异步任务

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

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

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

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

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

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

页面输入输出语法

注意：alert() 和 prompt() 它们会跳过页面渲染先被执行

输入

对话框

prompt("内容")

输出

向body内输出内容

document.write("要输出的内容")	//单引号双引号皆可

弹出警告对话框

alert("要输出的内容")

控制台打印

console.log("控制台打印")

变量

声明

let 变量名

命名规则

1.不能用关键字

2.只能用下划线、字母、数字、$组成，且数字不能开头

3.字母严格区分大小写

常量

当某个变量永远不会改变的时候，就可以使用 const 来声明

常量的值无法被修改

const 常量名 = 赋值

数组

数组是将一组数据存储在一个变量上

声明

let arr = []

let arr = new Array()

增删改查

查询

	数组名称[下标]
	列：arr[1]

修改(重新赋值)

	数组[下标]=新值
	列：arr[1]="郭富城"

添加

将一个或多个元素添加到数组的末尾
	数组.push(内容)
	列：arr.push("郭富城")

将一个或多个元素添加到数组的开头
	数组.unsshift(内容)
	列：arr.unshift("郭富城")

删除

从数组中删除最后一个元素
	数组.pop()
	列：arr.pop()

从数组中删除第一个元素
	数组.shift()
	列：arr.shift()

删除指定元素
	数组.splice(下标,删除的个数)
	列：arr.splice(2,3)

map迭代数组

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

独特的遍历方法

	//先创建一个数组
	let arr = ['1001','小王','男','曹县']
    //a为遍历的数据,b为下标
    arr.map(function(item){		//item是数组里的每一个值
        console.log(item)		//如果再给一个参数，还可以获得下标
    	return '内容'
    })

join方法

用于把数组中的所有元素转换一个字符串

	数组名.join('分割方式')	//默认分割方式为逗号 ,
例:
	//先创建一个数组
	let arr = ['1001','小王','男','曹县']
    console.log(arr.join('&'))	//用&进行分割
	/*这个时候打印的数据就成为了一个字符串，且以&分割
		1001&小王&男&曹县
	*/

数据类型

JS数据类型整体分为 “基本数据类型” 和 “引用数据类型”

（JS是弱数据类型）

基本数据类型

number 数字型

​ 可以是整数、小数、正数、负数

​ 当计算错误时，会返回NaN，且任何对NaN的操作都会返回NaN

​ NaN代表一个不正确的或者一个未定义的数学操作。比如运算中包含了非数字内容

string 字符串型

通过单引号（ ‘’） 、双引号（ “”）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别

boolean 布尔型

​ flase 或 true

underfined 未定义型

定义变量未给值就是 undefined

如果检测变量是undefined就说明没有值传递过来

null 空类型

如果一个变量里面确定存放的是对象，如果还没准备好对象，可以放个null

引用数据类型

object 对象

声明

	let 对象名 = {}
列：
    let person = {}

	let 对象名 = new Object{}
列：
    let person = new Object{}

对象的使用

	let 对象名 = {
        属性名:属性值,
        方法名:函数
    }
列:
	let sudents = {
        name:`小王`,
        eat:function(){
          console.log(`吃`)  
        }
    }
    //若想调用eat方法,如果方法里有打印,则外边直接调用(不套打印),如果方法里是return,则外部调用时可以(套打印),如若里面有打印,调用时再套了打印,则第二个会打印undefined

增删改查

查询

	对象.属性
列:
	students.name

	对象['属性']
列:
	students['name']

修改

	对象.属性 = 新值
列:
	students.name = `小王`

添加

	对象.新属性 = 新值
列:
	students.age = 18

删除

	delete 对象.属性
列:
	delete students.age

遍历对象

	for(let 属性 in 对象){	//属性一般写k或key
        console.log(属性)	//打印属性名
        console.log(对象[属性])	//打印属性的值
    }
列:
	for(let key in obj){
        console.log(key)
        console.log(obj[key])
    }

数据类型的转换

隐式转换

+号作为正号解析可以转换成数字型（ - * / 都可以）

任何数据和字符串相加结果都是字符串

显示转换

转换为数字型

	Number(数据)
/*1.转成数字类型
  2.如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
  3.NaN也是number类型的数据，代表非数字*/

	parseInt(数据)	//只保留整数

	parseFloat(数据)	//可以保留小数

转换为字符型

	String(数据)

	变量.toString(进制)

运算符

一元运算符

符号	作用
++	让变量的值 +1
–	让变量的值 -1

当在前面时为前置自增，先进行+1再运算

当在后面时为后置自增，先运算再+1

（自减和自增相同）

比较运算符

符号	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于等于右边
<=	左边是否小于等于右边
==	左右两边值是否相等
===	左右两边是否类型和值都相等
!==	左右两边是否不全等

比较结果为boolean类型，即只会得到 true 或 false

逻辑运算符

符号	名称	特点
&&	逻辑与	符号两边都为true结果才为true	一假则假
||	逻辑或	符号两边有一个true就为true	一振则真
!	逻辑非	true变false，false变true	真变假，假变真

运算符优先级

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ – ！
3	算数运算符	先* / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后||
7	赋值运算符	=
8	逗号运算符	，

语句

分支语句

if语句

单分支
	if(条件){
       	满足条件要执行的代码
    }

双分支
	if(条件){
		满足条件要执行的代码
	}else{
		不满足条件执行的代码
	}

多分支
	if(条件1){
		代码1
	}else if(条件2){
		代码2
	}else{
		代码n
	}

三元运算符

	条件 ? 满足条件执行的代码 : 不满足条件执行的代码
列：
	a<b?alert(`a`):document.write(`b`)

switch语句

	switch(){
        case 值1:
            代码1
            break;
       	case 值2:
            代码2
            break;
        default:
            //没有全等的（===）则执行default里的代码
            代码n
            break;
    }

循环语句

while循环

	while(循环条件){		//可写true一直循环
        要重复执行的代码(循环体)
    }

for循环

	for(变量起始值;终止条件;变量变化量){	//可写(;;)一直循环
        循环体
    }
列：
	for(let i=0;i<10;i++){
        //打印1到10的值
        cosole.log(i)
    }

退出循环

退出本次循环，继续下一次循环

	continue

退出整个循环

	break

Math内置对象

属性	作用	举例
Math.PI	3.1415926	就是一个具体的值
Math.ceil	向上取整	Math.ceil(1.1)
Math.floor	向下取整	Math.floor(1.1)
Math.max	找最大数	Math.max(1,3,4,2)
Math.min	找最小数	Math.min(1,3,4,2)
Math.pow	幂运算
Math.abs	绝对值

随机数

取0~1之间的随机数

	Math.random()	//取0~1之间的随机数

生成N~M之间的随机数

	Math.floor(Math.random() * (M - N + 1)) + N
	//生成N~M之间的随机数

选择器

选择匹配的第一个元素

选择匹配的第一个元素,（一个 HTMLElement对象）

如果没有匹配到，则返回null。

只能获取普通标签文本的值,不可以获取input的

	document.querySelector(`css选择器`)
	//里面可以写html标签(例:div),类选择器(例:.active),id选择器(例:#active),但都必须加上引号

选择匹配的多个元素

返回匹配的所有元素,（NodeList 对象集合）

不可以直接修改， 只能通过遍历的方式给里面的元素做修改

只能获取普通标签文本的值,不可以获取input的

	document.querySelectorAll(`css选择器`)
	//里面可以写html标签(例:div),类选择器(例:.active),id选择器(例:#active),但都必须加上引号
/*
	例：document.querySelectorAll(`ul li`)
*/	

得到的是一个伪数组：

 有长度有索引号的数组

 但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得

通过id获取

	document.getElementById('id名')

通过标签获取

	document.getElementsByTagName('标签名')

通过类名获取

	document.getElementsByClassName('类名')

操作元素内容

两者的效果是一样的,都可以进行内容的修改或添加

唯一的区别在于innerHTML可以解析标签,而innerText不能

	对象.innerText = '内容'
例:	info.innerText = '我真帅'

	对象.innerHTML = '内容'
例：	info.innerHTML = '我真<strong>帅</strong>'

操作元素的属性

常用属性

	对象.属性 = '值'
	//常用的属性有href、title、src等
例:	info.src = './img/a.jpg'

样式属性

类名操作

将选中元素的类名进行添加/修改/删除

通过className操作

	元素.className = '类名'
//会覆盖原有的类名，可通过拼接字符串的方式添加(先获取原有的类名)，这样相对于十分麻烦

通过classList操作（不会影响原有的类名）

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

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

	//切换一个类名（如果有就删除,没有就添加）
	元素.classList.toggle('类名')

自定义属性

类名必须是 data- 开头才可以

	例:	class="data-list"

获取和设置的时候要用 dataset 获取设置

	例:	ind.datxsetList.style = ''

dataset获取过来的是一个对象

定时器

间歇函数

开启定时器

	setInterval(函数,间隔时间)
例:
	setInterval(function(){},1000)
	//可直接写函数,也可以调用函数

关闭定时器

	//需要先用定时器的变量名才能进行关闭
	clearInterval(变量名)
例:
	timer = setInterval(function(){},1000)
	clearInterval(timer)

重新开启定时器

有的时候会把定时器先关闭,然后再打开，比如鼠标悬停时暂停，离开后继续

	//只需要通过变量名重新调用一次即可
例:
	let timer = setInterval(function(){},1000)
	clearInterval(timer)
	timer = setInterval(function(){},1000)

延迟函数

setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行

	setTimeout(回调函数,等待的毫秒数)
例：
	setTimeout(function(){},5000)

清除延时函数

	//需要先有定时器的变量名才能进行关闭
	clearTimeout(变量)
例：
	let timer = setTimeout(function(){},5000)
    clearTimeout(timer)

事件

事件监听

三要素：1.事件源(谁被触发了)

​ 2.事件类型(怎么触发)

​ 3.事件处理程序(触发后要做什么事情)

	元素对象.addEventListener('事件类型',要执行的函数)
例：
	//这是鼠标点击
	test.addEventListener('click',function(){})

事件类型

鼠标事件

举例：

	元素对象.addEventListener('事件类型',要执行的函数)
例：
	//这个是鼠标点击事件
	test.addEventListener('click',function(){})

类型
click	鼠标点击
mouseenter	鼠标经过
mouseleave	鼠标离开
mousemove	鼠标移动

移动事件

pageX 和 pageY 可以获得鼠标相对于页面的位置

鼠标相对于页面的坐标可以通过事件对象e.pageX拿到

盒子相对于页面的位置，可以通过 offsetLeft 拿到

鼠标相对于盒子的距离等于盒子的坐标=鼠标相对于页面的位置-盒子相对于页面的位置

焦点事件

类型
focus	获得焦点
blur	失去焦点

键盘事件

类型
Keydown	键盘按下触发
Keyup	键盘抬起触发

常用于获取按下的键

	变量名.key

文本事件

类型
input	用户输入事件

页面加载事件

类型
load	监听页面所有资源加载完毕(时间会长,因为是全部加载)
DOMContentLoaded	无需等待样式标、图象等完全加载

load写法

等到页面中资源全都加载完毕了才会执行里面的代码

(不一定要写widows，widows是全部元素，比如给图片就是当图片加载完之后执行)

	windows.addEventListener('load',function(){})

DOMContentLoaded写法

等页面上的html标签加载完毕就执行，要比load执行的要早一些(给document添加)

	document.addEventListener('DOMContentLoaded',function(){})

change事件

change

当内容发生了变化才会触发

	input.addEventListener('DOMContentLoaded',function(){})

滚动事件

滚动特效

在css中添加后，在进行点击电梯导航转换的过程中可以有一个滚动的特效

	html{
        scroll-behavior:smooth;
    }

只要有滚动条就可以添加

类型
scroll

不做设定的话当滚动条1px就会触发(看’‘获取位置’')

windows和document都可以，不过更习惯是windows

	windows.addEventListener('scroll',function(){})

获取卷去大小

scrollLeft和scrollTop （属性）

​  获取被卷去的大小（document.documentElement.scrollTop）

​  获取元素内容往左、往上滚出去看不到的距离

​  这两个值是可读写的

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

	windows.addEventListener('scroll',function(){
        //document.document.documentElement 是html元素获取方式
		const n = document.documentElement.scrollTop
            console.log(n);
        //这个时候可以判断n来进行代码执行
        //比如当n>100的时候显示，小于隐藏
        if(n>=100){
            test.style.display='block'
        }else{
            test.style.display='none'
        }
    })

获取宽高

（直接调用即可，例如div.下方的四个属性）

获取盒子的宽度（包含 width + padding的值）

	clientWidth
    //有点过时，只做了解

	//获取盒子的宽度
	offsetWidth
    //获取盒子的高度
    offsetHeight

获取位置

受定位影响，会寻找最近一级带有定位的祖先元素

注意:body有一个8px的内间距

内容 + padding + border

	//获取盒子到顶部的距离
	offsetTop
    //获取盒子到左侧的距离
    offsetLeft

移动端事件

移动端只有这三个事件

大部分使用在手机上，除非你的电脑可以触屏

事件类型	说明
touchstart	手指触摸屏幕时触发
touchmove	触摸屏幕后移动的时候触发
touchend	离开屏幕时触发

事件委托

将子元素的事件委托给父元素

例如每个小li都有一个点击事件,这个时候可以委托给ul

例:
	document.querySelector('click',function(e){})

能拿到是那一个标签触发父元素的事件

	e.key
通过判断获取到的值来执行事件

判断点击的元素

	e.target.tagName
例:
	判断点击的是否是a标签
	e.target.tagName === 'A'

阻止冒泡

	事件对象.stopPropagation()

阻止元素默认行为

	e.preventDefault()
	e为函数中的参数
例如:阻止提交
	const test = document.querySelector('type:submit')
	test.addEventListener('submit',function(e){
        //这个时候html中的提交按钮就禁止使用了，其他的也可以使用(比如href跳转)
        e.preventDefault()
    })

内置对象

时间对象

得到当前时间

传参的格式–》‘2022-4-8 12:00:00’

	new date()

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

符例一个得到现在时间的函数

function getNowTime(){
    const date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let day = date.getDate()
    let h = date.getHours()
    h = h<10 ? '0'+h : h
    let m = date.getMinutes()
    m = m<10 ? '0'+m : m
    let s = date.getSeconds()
    s = s<10 ? '0'+s : s
    return `${year}年${month}月${day}日${h}:${m}:${s}`
}

	//这个可以直接获取时间格式，不过年月日是2002/01/01格式的
	date.toLocaleString()
	//这个只获取年月日
	date.toLocaleDateString()
	//这个只获取时间(自动补零)
	date.toLocaleTimeString()

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一个特殊的计量时间的方式

算法为:

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

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

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

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

获取时间戳

//第一种方法:(这种需要先手动实例化)
	const date = new Date();
    console.log(date.getTime());
//第二种方法:
	console.log(+new Date)
//第三种方法:
	/*无需实例化
	但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳*/
	console.log(Date.now())

倒计时

附上倒计时函数

// 函数封装 getCountTime
    function getCountTime() {
      // 1. 得到当前的时间戳
      const now = +new Date()
      // 2. 得到将来的时间戳
      const last = +new Date('2022-4-1 18:30:00')
      // console.log(now, last)
      // 3. 得到剩余的时间戳 count  记得转换为 秒数
      const count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
      // m = parseInt(总秒数 / 60 % 60);     //   计算分数
      // s = parseInt(总秒数 % 60);   
      // let d = parseInt(count / 60 / 60 / 24)               //   计算当前秒数
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60)
      s = s < 10 ? '0' + s : s
      console.log(h, m, s)

      //  5. 把时分秒写到对应的盒子里面
      document.querySelector('#hour').innerHTML = h
      document.querySelector('#minutes').innerHTML = m
      document.querySelector('#scond').innerHTML = s
    }

节点

DOM节点

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

分为：元素节点(比如div标签)、属性节点(比如class属性)、文本节点(比如标签里的文字)

查找节点

父节点

只能获取最近一级的节点

	元素.parentNode
	//可以在后方多次添加再获取一层

子节点

得到的是伪数组，选择的是亲儿子

	元素.children

兄弟节点

上一个兄弟

	元素.previousElementSibling

下一个兄弟

	元素.nextElementSibling

创建节点

	document.createElement('要创建的标签')
例:
	document.createElement('div')

增加节点

追加节点，作为最后一个元素

	父元素.appendChild(要插入的元素)
例：
	document.appendChild(li)	//这里的li是创建出来的节点名

插入到某个子元素前面

	父元素.insertBefore(要插入的元素,在哪个元素前面)
例:
	//放到第一个子元素的前面
	ul.insertBefore(li,ul.children[0])	//这里的li是创建出来的节点名

克隆节点

	//如果里面什么都不写，那么只会克隆标签，想要内容一起克隆，只需要在小括号里添加true即可
	//true为克隆时会包含后代节点一起克隆
	//false为克隆时不包含后代节点，默认为false
	元素.cloneNode()
例：
	div.cloneNode(true)

删除节点

若一个节点在页面中已不在需要，可以删除它

在JS原生DOM操作中，要删除的元素必须通过父元素删除

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

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

删除节点和隐藏节点（display:none）是有区别的:隐藏节点还是存在的，但是删除，则是从html中删除节点

window对象

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

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

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

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

BOM

BOM是浏览器对象模型

Location对象

href属性

可以进行赋值，常用于多少秒后跳转到某个页面

	//通过js的方式跳转网页
	location.href = '网址'

search属性

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

	location.search
例：
	//比如网址为https://www.jd.com/?cu=true&utm_source
	//那么调用后就会从?开始截取后面所有的部分

hash属性

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

	location.hash
例:
	//类似于search，不过是从#开始截取

reload属性

刷新当前页面，相当于于F5功能

	location.reload()	//当括号里为true时为强制刷新

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

history对象

只做了解，因为现在的浏览器自己就已经具备前进后退的功能

对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

本地存储

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

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

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

localStorage

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

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

以键值对的形式存储使用

存储数据

简单数据类型

	localStorage.setItem('key','value')
例:
	localStorage.setItem('uname','小许')

复杂数据类型

	//需要先把对象转换为jons字符串
	localStorage.setItem('key',JSON.stringify(对象名))
例:
	//创建一个对象
	let obj ={
        "id":"1001",
        "name":"Jack",
        "sex":"man"
    }
    //前面的asd是传的时候起的名
    localStorage.setItem('asd',JSON.stringify(obj))

获取数据

	localStorage.getItem('key')
例:
	//比如向浏览器里面存了一个key:age,value:20
	localStorage.setItem('age','20')
	//那么在获取的时候可以通过key的值来获取到相对性value的值
    console.log(localStorage.getItem('age'))

复杂数据类型

	JSON.parse(localStorage.getItem('key'))
例：
	//例如取上面的那个ads
	console.log(JSON.parse(localStorage.getItem('ads')))

删除数据

	localStorage.removeItem('key')
例：
	//删除key值为uname的数据
	localStorage.removeItem('uname')

正则

https://c.runoob.com/front-end/854/

正则表达式是用于匹配字符串中字符组合的模式

作用：

1.表单验证（匹配）

2.过滤敏感词（替换）

3.字符串中提取我们想要的部分（提取）

定义规则

	const 变量名 = /表达式/	// / /是正则表达式字面量
例：
	const reg = /牛逼/

判断

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

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

	规则.test(被检测的字符串)
例:
	//要检测的字符串
	const str = '真牛逼'
    //规则
    const reg = /牛逼/
    //检测
    console.log(reg.test(str))	//这里返回的式true

exec()方法 用于检索（查找）符合规则的字符串，找到返回数组，否则为 null

	规则.exec(被检测的字符串)	
例:
	//要检测的字符串
	const str = '真牛逼'
    //规则
    const reg = /牛逼/
    //检测
   console.log(reg.exec(str))	//这里返回的是一个数组

元字符

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

参考文档：

http://tool.oschina.net/regex

边界符

表示位置，开头和结尾，必须用什么开头，用什么结尾

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

例如：

	console.log(/^哈/.test('二哈'))
	//这个不是以哈为开头,返回false

	console.log(/$哈/.test('哈个头啊'))
	//这个不是以哈为结尾,返回false	

精确匹配

必须与正则完全一致才会返回true

	console.log(/^哈$/.test('哈哈'))		//false
	console.log(/^哈$/.test('哈'))		//true

量词

表示重复次数

只对挨着的字符进行修饰，例如/^abc*$/ 他只修饰c

符号	说明
*	0次及以上
+	1次及以上
？	1次或者0次
{n}	重复n次，写几次就必须重复几次，其他全为false
{n,}	重复n次或多次，大于等于n
{n,m}	重复n次到m次，n到m之间

例：

	console.log(/^哈$*/.test('哈'))
	console.log(/^哈$+/.test('哈'))
	console.log(/^哈$？/.test('哈'))
	console.log(/^哈{4}？/.test('哈'))
	console.log(/^哈{4,}？/.test('哈'))
	console.log(/^哈{4,7}？/.test('哈'))

字符类

比如 \d 表示 0~9

[]	匹配其中任意一个（具体规则看下面）

例:

	/[abc]/		匹配其中任意一个即可,可多次
	/^[a-c]$/	匹配其中任意一个,且只能为一次
	/^[a-c]{2,}$/	匹配其中任意一个即可,但必须大于等于2	

如果括号里面加上 ^ 便为取反

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

理解一下：

//英文字母,数字,下划线或者短横线组成，并且长度为 6~16位
	/^[a-zA-Z0-9-_]{6,16}$/
//只能输入中文
	/^[\u4e00-\u9fa5]{2,8}$/
//开头必须是1-9，结尾必须是0-9，且不小于4位
    /^[1-9][0-9]{4,}$/	

预定义类

某些常见模式的简写方式

预定类	说明
\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]
.	匹配除换行符之外的任何单个字符
^\d{4}-\d{1,2}-\d{1,2}$	日期格式

修饰符

修饰符	说明
i	正则匹配时字母不区分大小写
g	匹配所有满足正则表达式的结果

	/表达式/修饰符
例:
	/a/i.test('a')

替换

	字符串.replace(/正则表达式/,'替换的文本')	//但只能匹配第一个
	字符串.replace(/正则表达式/ig,'替换的文本')	//不分大小写且全局匹配
例:
	const str = 'java工资高'
	const re = str.replace(/java/,'前端')
    console.log(re)	//前端工资高