五：以理论结合实践方式梳理前端 ES 6+ ——

全局对象

全局属性	属性描述
Infinity	代表正的无穷大的数值。
NaN	指示某个值是不是数字值。
undefined	指示未定义的值

函数	描述	函数	描述
decodeURI()	解码某个编码的 URI	isNaN()	检查某个值是否是数字
decodeURIComponent()	解码一个编码的 URI 组件	Number()	把对象的值转换为数字
encodeURI()	把字符串编码为 URI	parseFloat()	解析一个字符串并返回一个浮点数
encodeURIComponent()	把字符串编码为 URI 组件	parseInt()	解析一个字符串并返回一个整数
escape()	对字符串进行编码	String()	把对象的值转换为字符串
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行	unescape()	对由 escape() 编码的字符串进行解码
isFinite()	检查某个值是否为有穷大的数

拷贝右侧地址：https://www.baidu.com/s?wd=码云，放入浏览器地址栏输入框中，变成：
https://www.baidu.com/s?wd=%E7%A0%81%E4%BA%91
这个就是浏览器自动将中文转码了
encodeURIComponent('码云') === "%E7%A0%81%E4%BA%91" 由于浏览器地址栏不能识别中文，需要将中文转换为 unicode 码
------------------------------------------------------------------------------------------------------------
eval("var a = 1"); console.log(a);                           // 1 用于声明 a 变量并赋值
var item = eval("({b:2})");                                  // item = {b:2}
var num = NaN; isNaN(num);                                 // true
var num = 100; isNaN(num);                                 // false
var str = 'hello world'; escape(str);                        // hello%20world
var str = 'hello%20world'; unescape(str);                    // "hello world"
var str = '0.26ab'; parseFloat(str);                     // 0.26
var str = 'cd0.26ab'; parseFloat(str);                       // NaN
var str = '0.26a34'; parseFloat(str);                        // 0.26
var str = '1.56ab'; parseInt(str);                           // 1 不会四舍五入，只截取整数位

数学函数

数学属性	属性描述	数学属性	属性描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）	LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
LN2	返回 2 的自然对数（约等于0.693）	PI	返回圆周率（约等于3.14159）
LN10	返回 10 的自然对数（约等于2.302）	SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）	SQRT2	返回 2 的平方根（约等于 1.414）

Math.E;                              // 2.718281828459045
Math.LN2;                           // 0.6931471805599453
Math.LN10;                          // 2.302585092994046
Math.LOG2E;                         // 1.4426950408889634
Math.LOG10E;                        // 0.4342944819032518
Math.PI;                            // 3.141592653589793
Math.SQRT1_2;                       // 0.7071067811865476
Math.SQRT2;                         // 1.4142135623730951

方法	描述	方法	描述
abs(x)	返回 x 的绝对值	log(x)	返回数的自然对数（底为e）
acos(x)	返回 x 的反余弦值	max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值
asin(x)	返回 x 的反正弦值	min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值	pow(x,y)	返回 x 的 y 次幂
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）	random()	返回 0 ~ 1 之间的随机数
ceil(x)	对数进行上舍入	round(x)	四舍五入
cos(x)	返回数的余弦	sin(x)	返回数的正弦
exp(x)	返回 Ex 的指数	sqrt(x)	返回数的平方根
floor(x)	对 x 进行下舍入	tan(x)	返回角的正切

Math.abs(-7.25);                 // 7.25
Math.ceil(1.4)                      // 2 向上取整
Math.floor(1.6);                    // 1 向下取整
Math.round(2.5);                    // 3 四舍五入
Math.max(5,10);                     // 10 最大值
Math.min(5,10);                     // 5 最小值
Math.random();                      // 0.1741323729201285 随机数
Math.atan2(8,4);                    // 1.1071487177940904 求弧度
Math.sin(3);                        // 0.1411200080598672 正弦值
Math.cos(3);                        // -0.9899924966004454 余弦值
Math.tan(90);                       // -1.995200412208242 正切值
Math.asin(0.5);                     // 0.5235987755982989 反正弦值
Math.acos(0.5);                     // 1.0471975511965979 反余弦值
Math.atan(2);                       // 1.1071487177940904 反正切值
Math.pow(4,3);                      // 64 次方数
Math.sqrt(9);                       // 3 开方数
Math.exp(1);                        // 2.718281828459045 求指数
Math.log(2);                        // 0.6931471805599453 求对数

正则匹配

是一个描述字符模式的对象，主要用来验证客户端的输入数据

使用 RegExp 构造函数：var reg= new RegExp(); 创建一个正则对象，括号内第一个字符参数，表示匹配字符，第二个参数匹配模型
使用字面量格式创建：var reg = //; 直接使用两个反斜杠，中间位匹配参数，后面为匹配模式设置

修饰符	描述
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m	执行多行匹配

var reg = /hi/i, str = 'hi world'; reg.test(str);                    // true
var reg = /hi/g, str = 'Hi world'; reg.test(str);                   // false
var reg = /hi/m, str = 'Hi world, hi world'; reg.test(str);         // true
var reg = /hi/ig, str = 'Hi world'; reg.test(str);                  // true
var reg = /hi/igm, str = 'Hi world, Hi world'; reg.test(str);       // true

表达式		表达式	描述
[abc]	查找方括号之间的任何字符	[A-z]	查找任何从大写 A 到小写 z 的字符
[^abc]	查找任何不在方括号之间的字符	[adgk]	查找给定集合内的任何字符
[0-9]	查找任何从 0 至 9 的数字	[^adgk]	查找给定集合外的任何字符
[a-z]	查找任何从小写 a 到小写 z 的字符	(red\	blue\
[A-Z]	查找任何从大写 A 到大写 Z 的字符

var reg = /[abc]/; str = 'd'; reg.test(str);                     // false
var reg = /[^abc]/; str = 'd'; reg.test(str);                       // true
var reg = /[a-z]/; str = 'd'; reg.test(str);                        // true
var reg = /[A-Z]/; str = 'd'; reg.test(str);                        // false
var reg = /[0-9]/; str = '3'; reg.test(str);                        // true
var reg = /[a-z0-9]/; str = 'd'; reg.test(str);                     // true
var reg = /[A-Z0-9]/i; str = 'd'; reg.test(str);                    // true
var reg = /[a-zA-Z0-9]/; str = 'd'; reg.test(str);                  // true

元字符	描述	元字符	描述
.	查找单个字符，除了换行和行结束符	\0	查找 NULL 字符
\w	查找单词字符	\n	查找换行符
\W	查找非单词字符	\f	查找换页符
\d	查找数字	\r	查找回车符
\D	查找非数字字符	\t	查找制表符
\s	查找空白字符	\v	查找垂直制表符
\S	查找非空白字符	\xxx	查找以八进制数 xxx 规定的字符
\b	匹配单词边界	\xdd	查找以十六进制数 dd 规定的字符
\B	匹配非单词边界	\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”
n$	匹配任何结尾为 n 的字符串
^n	匹配任何开头为 n 的字符串
?=n	匹配任何其后紧接指定字符串 n 的字符串
?!n	匹配任何其后没有紧接指定字符串 n 的字符串

属性	描述	属性	描述
constructor	返回一个函数，该函数是一个创建 RegExp 对象的原型	lastIndex	用于规定下次匹配的起始位置
global	判断是否设置了 “g” 修饰符	multiline	判断是否设置了 “m” 修饰符
ignoreCase	判断是否设置了 “i” 修饰符	source	返回正则表达式的匹配模式

var reg = new RegExp('baidu', 'g'); reg.constructor;                            // ƒ RegExp() { [native code] }
var reg = new RegExp('baidu', 'g'); reg.global;                                    // true
var reg = new RegExp('baidu', 'i'); reg.ignoreCase;                                // false
var reg = /hi/m, str = 'Hi world, hi world'; reg.test(str); reg.lastIndex;      // 0
var reg = new RegExp('baidu', 'i'); reg.multiline;                             // false
var reg = /hi/m, str = 'Hi world, hi world'; reg.test(str); reg.source;         // "hi"

方法	描述
exec()	检索字符串中指定的值。返回找到的值，并确定其位置
test()	检索字符串中指定的值。返回 true 或 false
toString()	返回正则表达式的字符串

var reg = /hi/m, str = 'Hi world, hi world'; reg.exec(str);  // ["hi", index: 10, input: "Hi world, hi world", groups: undefined]
var reg = /hi/m, str = 'Hi world, hi world'; reg.test(str); // true
var reg = new RegExp('baidu', 'g'); reg.toString();            // "/baidu/g"

方法	描述	方法	描述	FF	IE
search()	检索与正则表达式相匹配的值	replace()	替换与正则表达式匹配的子串	1	4
match()	找到一个或多个正则表达式的匹配	split()	把字符串分割为字符串数组	1	4

var str = 'Hi world, hi world'; str.search('hi');           // 10
var str = 'Hi world, hi world'; str.search(/hi/);            // 10
var str = 'Hi world, hi world'; str.match(/hi/i);            // ["Hi", index: 0, input: "Hi world, hi world", groups: undefined]
var str = 'Hi world, hi world'; str.replace('hi', 'hello');  // "Hi world, hello world"
var str = 'Hi world, hi world'; str.replace(/hi/, 'hello');    // "Hi world, hello world"
var str = 'Hi world, hi world'; str.replace(/hi/i, 'hello');// "hello world, hi world"
var str = 'Hi world, hi world'; str.replace(/hi/ig, 'hello');// "hello world, hello world"
var str = '2020/02/20'; str.replace(/([0-9]{4})\/([0-9]{2})\/([0-9]{2})/, '$1-$2-$3'); // "2020-02-20" 每个括号匹配为一个 $ 元素
var tel = '13870243598'; tel.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3');        // "138****3598"
var str = '2020-02-20'; str.split(/-/);                      // ["2020", "02", "20"]

常用正则表达式

验证信息	正则表达式
验证账号：只能使用字母开头，数字混合组成不能低以 6 位高于 20 位	`/^[a-zA-Z][0-9a-zA-Z]{5,19}$/`
验证密码：只能使用字母数字混合组成，不能低于 8 位高于 30 位	/^[0-9a-zA-Z]{8,30}$/
验证码：4 - 6 位数字型、6 - 8 位数字字母混合型	`/^[0-9]{4}$/、/^[0-9]{6}$/、/^[0-9a-zA-Z]{6}$/、/^[0-9a-zA-Z]{8}$/`
验证手机号：手机号码总共 11 位，第一位 1 开头	`/^1[3456789]\d{9}$/`
验证身份证：15 位或 18 位，且有带 X 字符的	`/^\d{6}(18\|19\|20)?\d{2})?\d{2}(0[1-9]\|1[12])(0[1-9]\|[12]\d\|3[01])\d{3}\(\d\|X)$/`
验证邮箱：必须存在 @ 和 . 且两者之间有其他字符	`/^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/`
验证中文名字：两位到四位中文	`/^\[\u0391-\uFFE5]{2,4}$/`
验证域名：服务器 IP 地址	`/^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?$/`
验证地址：网站地址，固定 http:// 或 https://	`/^([a-zA-z]+://[^\s])\|(^http://([\w-]+\.)+[\w-]+([\w-./?%&=])?$$/`

窗口对象

Window 对象是 JavaScript 最大的对象，也是最外围的对象，JavaScript 几乎所有的对象都继承 Window 对象

下属对象	对象描述
window.document	用于控制 HTML dom 节点，堆 HTMML 节点进行操作
window.location	用于获取浏览器当前 URL 信息
window.history	用于处理浏览器缓存历史 URL
window.navigator	用于获取浏览器相关公开信息
window.screen	用于获取客户端显示设备屏幕的信息

地址路径

属性	描述	属性	描述
hash	返回一个URL的锚部分	pathname	返回的URL路径名
host	返回一个URL的主机名和端口	port	返回一个URL服务器使用的端口号
hostname	返回URL的主机名	protocol	返回一个URL协议
href	返回完整的URL	search	返回一个URL的查询部分

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

历史记录

属性	说明
length	返回历史列表中的网址数

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

弹出窗口

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	显示可提示用户输入的对话框

离线缓存

使用过手机 APP 软件的人都有个这样一个经历，第一次下载安装这个 APP 的时候首次登录需要我们手动去输入账号密码，但是在以后的使用中并没有要求我们去输入账号密码，这是因为手机 APP 将我们的账户信息保留在了 APP 本地存储了，所以不需要去录入账号信息了，这样也导致了我们的旧手机不要随便的丢掉或卖掉，一定要将手机恢复到出厂模式，最好是刷机一次再卖或丢，否则含可能被不发分子取巧得到你的许多账户信息，以便盗取你的钱财或物品，下面通过浏览器查看离线存储的几种机制：打开浏览器，按 F12 进入开发者模式，选择下面窗口菜单的 “Application”，就可以看到所有的 Storage

Cookies 机制：是浏览器提供的一种机制，浏览器进入页面会把页面的静态资源缓存到本地硬盘的一个文件夹内，关闭浏览器不会清理缓存
Session 机制：是开发者手动去把浏览器页面的相关信息缓存到本地，离开当前页面，这个缓存会被自动清理
Local 机制（常用）：是开发者手动去把浏览器页面的相关信息缓存到本地，离开当前页面不会自动清理，一定要清理需要手动去清理

计时事件

方法	描述
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout
clearTimeout()	取消由 setTimeout() 方法设置的 timeout

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>文档标题</title>
</head>
<body>setInterval：<input type="text" id="itime" value="0" /><button id="sitime">停止</button><hr />setTimeout：<input type="text" id="ttime" value="0" /><button id=sttime>停止</button><script type="text/javascript">window.onload = function() {var itime = document.getElementById('itime'),ttime = document.getElementById('ttime'),sitime = document.getElementById('sitime'),sttime = document.getElementById('sttime');var vitime = setInterval(function() {itime.value++;}, 1000),vttime = setTimeout(function() {ttime.value = +ttime.value + 10;}, 5000);sitime.onclick = function() { clearInterval(vitime); };sttime.onclick = function() { clearTimeout(vttime); };};</script>
</body>
</html>

方法	描述
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口
stop()	停止页面载入
resizeBy()	按照指定的像素调整窗口的大小
resizeTo()	把窗口的大小调整到指定的宽度和高度
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标

五：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 全局对象相关推荐

十一：以理论结合实践方式梳理前端 React 框架 ———框架架构
前言书明观念从第一代码农写下第一行代码开始到上个世纪的80年代的软件危机,码农一直在考虑一个问题,怎么让代码写起来更容易.更简单.更舒适?抛开大牛.大神(大牛.大神哪那么容易找到啊 _-)级别的人员 ...
二：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 基础语法
ES 6+ 基础语法虽说 JavaScript 是一门非编程式语言,但它又具备编程思想,这也是因为 JavaScript 在设计之初参考了 Java 的设计思路所带来的捆绑思想,也间接的导致了前期的 ...
四：以理论结合实践方式梳理前端 React 框架 ——— React 高级语法
事件处理 react 内置组件的事件处理 react 内置组件是指 react 中已经定义好的,可以直接使用的如 div.button.input 等与原生 HTML 标签对应的组件 <!DOC ...
十：以理论结合实践方式梳理前端 React 框架 ———集成框架
dva 框架简介 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个 ...
九：以理论结合实践方式梳理前端 React 框架 ——— 简述中间件
redux-saga 基本简介中间件是一种独立运行于各个框架之间的代码,以函数的形式存在,连接在一起,形成一个异步队列,可以访问请求对象和响应对象,可以对请求进行拦截处理,再将处理后的控制权向下传递 ...
一：以理论结合实践方式梳理前端 CSS 3 ———真正了解样式表
真的了解 CSS 3 吗在学习 CSS 3 之前,首先要了解的是,什么是 CSS 3.CSS 3 能做什么?学习 HTML 的都知道,HTML 是网页的结构,那么 CSS 就是网页的表现,就像美女和 ...
八：以理论结合实践方式梳理前端 CSS 3 ——— 弹性布局特性
基本概念设置 display: flex; 的元素称为 Flex 容器,其中所有的子元素称为 Flex 项目容器存在两根用于定位的轴,分别是水平的主轴和垂直的交叉轴,项目默认沿主轴排列容器 ...
七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性
样式单位相对长度单位指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器.分辨率 ...
OOAD实践之路——真实案例解析OO理论与实践（五、需求分析之前的故事）
查看本系列全部文章: <OOA&D实践之路--真实案例解析OO理论与实践>索引贴高质量软件的第一要素到目前为止,我们做了很多工作,但是我一直在强调这些都还不是需求分 ...

五：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 全局对象