一，正则表达式
1.正则概念
正则表达式的定义
正则表达式：正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
正则表达式的作用
给定的字符串是否符合正则表达式的过滤逻辑(匹配)
可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)
强大的字符串替换能力(替换)
正则表达式的特点
灵活性、逻辑性和功能性非常的强
可以迅速地用极简单的方式达到字符串的复杂控制
对于刚接触的人来说，比较晦涩难懂
2.正则的组成
特殊字符
普通数字，字母，中文，符号，特殊字符......
常用元字符
| 元字符 |
说明 |
| \d |
匹配至少有一个数字 |
| \D |
匹配至少任意一个非数字的字符 |
| \w |
匹配至少一个字母或数字或下划线 |
| \W |
匹配至少有一个不是字母，数字，下划线 |
| \s |
匹配至少任意的空白符 |
| \S |
匹配至少一个不是空白符的字符 |
| . |
匹配至少有一个非换行符 |
| ^ |
表示匹配行首的文本(以谁开始) ^\d |
| $ |
表示匹配行尾的文本(以谁结束)\d$ |
限定符
| 限定符 |
说明 |
| * |
重复零次或更多次\d* /^ab*$/：表示一个字符串有一个a后面跟着零个或若干个b。（"a", "ab", "abbb",……）； |
| + |
重复一次或更多次\d+ / ab+/：表示一个字符串有一个a后面跟着至少一个b或者更多； |
| ? |
重复零次或一次 /^ab?$/：表示一个字符串有一个a后面跟着零个或者一个b； |
| {n} |
至少重复n次 |
| {n,} |
重复n次或更多次 |
| {n,m} |
重复n到m次 |
其他符号
[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思 [0-9]
[^] 匹配除中括号以内的内容
\ 转义符： \的用法 \ 主要是用法是在正则表达式中的特殊符号转换为它本身的意思
| 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
() 从两个直接量中选择一个，分组
例如：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5] 匹配汉字
3.创建正则对象
1、字面量创建
var reg1 = /\d/;
2、构造函数创建
var regObj1 = new RegExp(/\w/);
4.正则匹配
RegExp.prototype.test()
语法：regexObj.test(str)
参数：str 用来与正则表达式匹配的字符串
返回值：如果正则表达式与指定的字符串匹配 ，返回true；否则false。
5.正则提取
String.prototype.match()
语法：str.match(regexp)
参数：regexp
一个对象。如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 。如果你没有给出任何参数并直接使用match() 方法 ，你将会得到一 个包含空字符串的 ：[""] 。
返回值：
如果使用g标志，则将返回与完整正则表达式匹配的所有结果（Array），但不会返回捕获组，或者未匹配 null。
如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。 在这种情况下，返回的项目将具有如下所述的其他属性，或者未匹配 null。
附加属性：
如上所述，匹配的结果包含如下所述的附加特性。
groups: 一个捕获组数组 或 （如果没有定义命名捕获组）。
index: 匹配的结果的开始位置
input: 搜索的字符串.一个，其内容取决于global（g）标志的存在与否，如果未找到匹配则为。
参数
| 标志 |
说明 |
| i |
忽略大小写 |
| g |
全局匹配 |
| gi |
全局匹配+忽略大小写 |
6.正则替换
String.prototype.replace()
replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。
原字符串不会改变。
语法：str.replace(regexp|substr, newSubStr|function)
参数：regexp (pattern)
一个 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr (pattern)
一个将被 newSubStr 替换的 。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
newSubStr (replacement)
用于替换掉第一个参数在原字符串中的匹配部分的。该字符串中可以内插一些特殊的变量名。参考下面的。
function (replacement)
一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的。
返回值：
一个部分或全部匹配由替代模式所取代的新的字符串。
使用字符串作为参数
| 变量名 |
代表的值 |
| $$ |
插入一个 "$"。 |
| $& |
插入匹配的子串。 |
| $` |
插入当前匹配的子串左边的内容。 |
| $' |
插入当前匹配的子串右边的内容。 |
| $n |
假如第一个参数是 对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始 |
函数为参数
| match |
匹配的子串。（对应于上述的$&。） |
| p1,p2, ... |
假如replace()方法的第一个参数是一个 对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用 /(\a+)(\b+)/ 这个来匹配，p1 就是匹配的 \a+，p2 就是匹配的 \b+。 |
| offset |
匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 'abcd'，匹配到的子字符串是 'bc'，那么这个参数将会是 1） |
| string |
被匹配的原字符串。 |
| NamedCaptureGroup |
命名捕获组匹配的对象 |
二，HTML5的web存储
HTML5 web 存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储用户的浏览数据。
1.localStorage 对象
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
下面的实例展示了用户点击按钮的次数。
if (localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
2.sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
三，函数的防抖（debounce)与节流（throttle)
函数防抖（debounce）
短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 非立即执行版 function debounce(func, wait) { let timer; return function() { let context = this; // 注意 this 指向 let args = arguments; // arguments中存着e if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args) }, wait) } } |
使用
| 1 |
content.onmousemove = debounce(count,1000); |
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
| // 立即执行版 function debounce(func, wait) { let timer; return function() { let context = this; // 这边的 this 指向谁? let args = arguments; // arguments中存着e if (timer) clearTimeout(timer); let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait) if (callNow) func.apply(context, args); } } |
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
节流(throttle)
指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思，会稀释函数的执行频率。
同样有两个版本，时间戳和定时器版。
| // 时间戳版 function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } } |
使用方式如下：
| 1 |
content.onmousemove = throttle(count,1000); |
在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 定时器版 function throttle(func, wait) { let timeout; return function() { let context = this; let args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } } |
在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。
我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。