一：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 能干什么

ES 6+ 能干什么

声明：写此博文，并不是为了显摆什么，仅是用于个人以后的复习学习，好记性不如烂笔头，东西多了就容易产生混肴，此博汇总了个人的日常工作学习整理内容，多数参考与官方文档，此文适合初学者，觉得对你有所帮助就收藏，对于各路大神大将，就麻烦一下，抬抬“腿”，绕绕道吧！

相信除了此片博文记录 JavaScript 的基础知识外，网上随便一搜索，大把大把的文章，视频教程也一大把，博主也是看着别人（例：阮大神的网络日志）的文章视频学习过来的，只是把自己的学习心得记录下来，关于如何去做学习关联笔记，博主觉得不要边看教程编写笔记，这种方式不好，即使你过后再去复习，你所能得到的知识只会少不会多，再就是边看教程编写笔记，仅是把官方上的一些已有东西给记录下来，并没什么实际意义（^_~~实际工作中都是没事翻翻文档的）。每次看别的大神文章感觉多少都会有些收获，所以，就算是学习笔记，也是需要用心思考、用心去写的。

对于我们工作者来说，学习 JavaScript 是用来工作的，至于为什么学习它，间接的说是提高个人技能水平，提高处理工作项目的开发能力，说直白一点：就是为了拿更高的工资呗~

在这个如火如荼的社会，每天的繁重工作，哪有半点时光给你做学术研究什么的，几乎大多公司的现状都是：市场赶产品，产品赶研发，一切以进度为准。没功夫去深入研究我们学的是什么，它是从哪里来的，它要从哪儿去？哦弥陀佛，产品不要再发 BUG 修复任务啦，快要下班啦~~

呵呵，每到下班前，总是会有一大堆的 BUG 修复任务从测试发过来，从而导致太多的“义务班”啦。打铁还需自身硬，多看别的大神学术研究成功，多积累自身，此文着重记录 JavaScript 重点，避免误区，多方考量

回到问题原点：JavaScript 能干什么？

早期，它是用于处理浏览器不能与访问者进行互动的能力；如今，还可以开发移动 APP 应用（ionic-cordova、react-nactive、weex）、桌面应用（electron-react）以及服务端应用（NodeJs、Koa2），此篇博文仅针对浏览器客户端而言

语言简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

• JavaScript 是一种高级轻量型的 —— 解释性语言，是前端开发工程师用来呈现浏览器实现数据交互行为的一门非编程语言
• JavaScript 是可插入 HTML 页面的脚本代码，可由所有的现代浏览器执行的脚本语言，它不受外界硬件设备、软件应用影响

运行原理

#mermaid-svg-edQEMIwBtxHgbrZZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .error-icon{fill:#552222;}#mermaid-svg-edQEMIwBtxHgbrZZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-edQEMIwBtxHgbrZZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-edQEMIwBtxHgbrZZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-edQEMIwBtxHgbrZZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-edQEMIwBtxHgbrZZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-edQEMIwBtxHgbrZZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-edQEMIwBtxHgbrZZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-edQEMIwBtxHgbrZZ .marker.cross{stroke:#333333;}#mermaid-svg-edQEMIwBtxHgbrZZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-edQEMIwBtxHgbrZZ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .cluster-label text{fill:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .cluster-label span{color:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .label text,#mermaid-svg-edQEMIwBtxHgbrZZ span{fill:#333;color:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .node rect,#mermaid-svg-edQEMIwBtxHgbrZZ .node circle,#mermaid-svg-edQEMIwBtxHgbrZZ .node ellipse,#mermaid-svg-edQEMIwBtxHgbrZZ .node polygon,#mermaid-svg-edQEMIwBtxHgbrZZ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-edQEMIwBtxHgbrZZ .node .label{text-align:center;}#mermaid-svg-edQEMIwBtxHgbrZZ .node.clickable{cursor:pointer;}#mermaid-svg-edQEMIwBtxHgbrZZ .arrowheadPath{fill:#333333;}#mermaid-svg-edQEMIwBtxHgbrZZ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-edQEMIwBtxHgbrZZ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-edQEMIwBtxHgbrZZ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-edQEMIwBtxHgbrZZ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-edQEMIwBtxHgbrZZ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-edQEMIwBtxHgbrZZ .cluster text{fill:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ .cluster span{color:#333;}#mermaid-svg-edQEMIwBtxHgbrZZ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-edQEMIwBtxHgbrZZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}解析 JS 函数用 LLInt 分析解释使用基线编译执行基线代码执行 DFG 代码执行 FTL 代码用DFG编译用FTL编译

组成结构

#mermaid-svg-iDH2DopPk1hJF6jV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .error-icon{fill:#552222;}#mermaid-svg-iDH2DopPk1hJF6jV .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iDH2DopPk1hJF6jV .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-iDH2DopPk1hJF6jV .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iDH2DopPk1hJF6jV .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iDH2DopPk1hJF6jV .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iDH2DopPk1hJF6jV .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iDH2DopPk1hJF6jV .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iDH2DopPk1hJF6jV .marker.cross{stroke:#333333;}#mermaid-svg-iDH2DopPk1hJF6jV svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iDH2DopPk1hJF6jV .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .cluster-label text{fill:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .cluster-label span{color:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .label text,#mermaid-svg-iDH2DopPk1hJF6jV span{fill:#333;color:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .node rect,#mermaid-svg-iDH2DopPk1hJF6jV .node circle,#mermaid-svg-iDH2DopPk1hJF6jV .node ellipse,#mermaid-svg-iDH2DopPk1hJF6jV .node polygon,#mermaid-svg-iDH2DopPk1hJF6jV .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iDH2DopPk1hJF6jV .node .label{text-align:center;}#mermaid-svg-iDH2DopPk1hJF6jV .node.clickable{cursor:pointer;}#mermaid-svg-iDH2DopPk1hJF6jV .arrowheadPath{fill:#333333;}#mermaid-svg-iDH2DopPk1hJF6jV .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-iDH2DopPk1hJF6jV .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-iDH2DopPk1hJF6jV .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-iDH2DopPk1hJF6jV .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-iDH2DopPk1hJF6jV .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-iDH2DopPk1hJF6jV .cluster text{fill:#333;}#mermaid-svg-iDH2DopPk1hJF6jV .cluster span{color:#333;}#mermaid-svg-iDH2DopPk1hJF6jV div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-iDH2DopPk1hJF6jV :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}JavaScript 组成ECMAS 核心对象基础语法流程结构函数应用面向对象注释调试BOM 浏览器对象数据交互离线存储HTML DOM 对象节点操作节点渲染

• ECMAS 是 JavaScript 核心语法标准，是由 ECMA 组织指定的一套脚本语言的标准，也符合 W3C 标准，目前使用最前沿版本是 ES 6+
• HTML DOM 是 JavaScript 操作网页 HTML 树结构操作上的一套整理节点 API 文档，改变 HTML 树节点对象：内容、样式以及行为控制
• BOM 对象是 JavaScript 操作浏览器对象模型管理的一套整理 窗体 API 文档，用于获取浏览器窗体信息或监听浏览器窗体的一些行为规则

初始体验

回顾一下 HTML 知识，如果我们需要通过一个链接跳转到百度页面，很明显，对于 HTML 而言，只需要使用一个超链接标签就可以，对于这种访问者通过鼠标点击触发的跳转，也可以看成是一次交互，将以下代码赋值生成一个静态的 HTML 网页文档：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 初始体验</title> </head> <body><a href="http://www.baidu.com/" target="_self">百度一下</a><button onclick="window.open('http://www.baidu.com/', '_self')">百度一下</button> </body> </html>

通过以下 HTML 代码执行效果，发现超链接和按钮点击都是同一样的效果——跳转到百度首页，其中按钮使用的是 JS 的方式跳转，代码分析：

• HTML 超链接 a 标签具有 href 属性用于指定链接的目录地址，还有一个 target 指定的链接方式，默认 _self 本窗口打开
• HTML 超链接 a 标签并没有写死 target 就已经默认在本窗口打开方式，说明 超链接 a 标签同样具有一个点击事件去触发链接跳转
• 以面向对象的思维方式可以得到 HTML 的按钮 button 标签同样具有点击事件，只是没有隐藏表现出来，需要使用 onclick 去触发
• 按钮 button 对象触发了点击 onclick 事件，执行了 BOM 浏览器内置对象 window 的 open() 方法，表示窗口以何种方式打开链接

引入方式

• 行内执行：可以直接在 HTML 标签内部直接使用，但前提是需要一个事件去触发它才能被执行
• 标签执行：同样也在 HTML 代码任意区域，通过使用 script 标签来编码，JavaScript 执行代码在 script 元素标签内
• 引入执行：有点类似于 HTML 的样式表 CSS 引入一个外文件，知识对于 JavaScript 的引入还是使用的是 script 元素标签

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 JavaScript 练习</title> </head> <body><script language="javascript">document.write('Hello World'); // document 是一个 BOM，write() 是一个动作，组合表示将 'Hello World' 写到浏览器内</script> </body> </html> -------------------------------------------------------------------------------------------------------------------------------- # demo.js document.write('Hello World');# demo.html 在 HTML 中，通过 script 标签引入 dome.js 文件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 JavaScript 练习</title> </head> <body><script language="javascript" src="./demo.js"></script> </body> </html>

注释语法

JavaScript 注释用来解释某段程序或某行代码是什么意思、什么作用，方便开发者之间的交流，注释内容不会被浏览器解析出来，常用于开发者模式中

• 单行注释：// 后面的代码必须另启行，否则为注释内容
• 多行注释：/**/ 注释内容从 /* 到 */ 之间的内容，也可以用于局部注释
• 文档注释：/**… */ 常用于函数注释，用来解释函数体，类似于一个 API 文档

// document.write('Hello World'); 我已经不需要了这行代码了，这里把它给注释掉了 -------------------------------------------------------------------------------------------------------------------------------- function Person(name, age) {/*这点代码可以使用下方代码替换方式return {name: name,age: age};*/this.name = name;this.age = age; } -------------------------------------------------------------------------------------------------------------------------------- /*** [Person description]* @param {[type]} name [description]* @param {[type]} age [description]*/ function Person(name, age) {this.name = name;this.age = age; }

保留关键字

关键字

abstract	boolean	break	byte	case	catch	char	class	const	continue
debugger	default	delete	do	double	else	enum	export	extends	final
finally	float	for	function	goto	if	implements	import	in	instanceof
int	interface	long	native	new	package	private	protected	public	return
short	static	super	switch	synchronized	this	throw	throws	transient	try
typeof	var	void	volatile	while	with

PS：保留关键字不能用作变量或函数的命名，使用关键字容易导致程序解析错误，会执行保留关键字的动作

总结

以上是生活随笔为你收集整理的一：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 能干什么的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。