ES 6+ 能干什么

聲明：寫此博文，并不是為了顯擺什么，僅是用于個(gè)人以后的復(fù)習(xí)學(xué)習(xí)，好記性不如爛筆頭，東西多了就容易產(chǎn)生混肴，此博匯總了個(gè)人的日常工作學(xué)習(xí)整理內(nèi)容，多數(shù)參考與官方文檔，此文適合初學(xué)者，覺得對(duì)你有所幫助就收藏，對(duì)于各路大神大將，就麻煩一下，抬抬“腿”，繞繞道吧！

相信除了此片博文記錄 JavaScript 的基礎(chǔ)知識(shí)外，網(wǎng)上隨便一搜索，大把大把的文章，視頻教程也一大把，博主也是看著別人（例：阮大神的網(wǎng)絡(luò)日志）的文章視頻學(xué)習(xí)過來的，只是把自己的學(xué)習(xí)心得記錄下來，關(guān)于如何去做學(xué)習(xí)關(guān)聯(lián)筆記，博主覺得不要邊看教程編寫筆記，這種方式不好，即使你過后再去復(fù)習(xí)，你所能得到的知識(shí)只會(huì)少不會(huì)多，再就是邊看教程編寫筆記，僅是把官方上的一些已有東西給記錄下來，并沒什么實(shí)際意義（^_~~實(shí)際工作中都是沒事翻翻文檔的）。每次看別的大神文章感覺多少都會(huì)有些收獲，所以，就算是學(xué)習(xí)筆記，也是需要用心思考、用心去寫的。

對(duì)于我們工作者來說，學(xué)習(xí) JavaScript 是用來工作的，至于為什么學(xué)習(xí)它，間接的說是提高個(gè)人技能水平，提高處理工作項(xiàng)目的開發(fā)能力，說直白一點(diǎn)：就是為了拿更高的工資唄~

在這個(gè)如火如荼的社會(huì)，每天的繁重工作，哪有半點(diǎn)時(shí)光給你做學(xué)術(shù)研究什么的，幾乎大多公司的現(xiàn)狀都是：市場趕產(chǎn)品，產(chǎn)品趕研發(fā)，一切以進(jìn)度為準(zhǔn)。沒功夫去深入研究我們學(xué)的是什么，它是從哪里來的，它要從哪兒去？哦彌陀佛，產(chǎn)品不要再發(fā) BUG 修復(fù)任務(wù)啦，快要下班啦~~

呵呵，每到下班前，總是會(huì)有一大堆的 BUG 修復(fù)任務(wù)從測試發(fā)過來，從而導(dǎo)致太多的“義務(wù)班”啦。打鐵還需自身硬，多看別的大神學(xué)術(shù)研究成功，多積累自身，此文著重記錄 JavaScript 重點(diǎn)，避免誤區(qū)，多方考量

回到問題原點(diǎn)：JavaScript 能干什么？

早期，它是用于處理瀏覽器不能與訪問者進(jìn)行互動(dòng)的能力；如今，還可以開發(fā)移動(dòng) APP 應(yīng)用（ionic-cordova、react-nactive、weex）、桌面應(yīng)用（electron-react）以及服務(wù)端應(yīng)用（NodeJs、Koa2），此篇博文僅針對(duì)瀏覽器客戶端而言

語言簡介

JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備

• JavaScript 是一種高級(jí)輕量型的 —— 解釋性語言，是前端開發(fā)工程師用來呈現(xiàn)瀏覽器實(shí)現(xiàn)數(shù)據(jù)交互行為的一門非編程語言
• JavaScript 是可插入 HTML 頁面的腳本代碼，可由所有的現(xiàn)代瀏覽器執(zhí)行的腳本語言，它不受外界硬件設(shè)備、軟件應(yīng)用影響

運(yùn)行原理

#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 函數(shù)用 LLInt 分析解釋使用基線編譯執(zhí)行基線代碼執(zhí)行 DFG 代碼執(zhí)行 FTL 代碼用DFG編譯用FTL編譯

組成結(jié)構(gòu)

#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 核心對(duì)象基礎(chǔ)語法流程結(jié)構(gòu)函數(shù)應(yīng)用面向?qū)ο笞⑨屨{(diào)試BOM 瀏覽器對(duì)象數(shù)據(jù)交互離線存儲(chǔ)HTML DOM 對(duì)象節(jié)點(diǎn)操作節(jié)點(diǎn)渲染

• ECMAS 是 JavaScript 核心語法標(biāo)準(zhǔn)，是由 ECMA 組織指定的一套腳本語言的標(biāo)準(zhǔn)，也符合 W3C 標(biāo)準(zhǔn)，目前使用最前沿版本是 ES 6+
• HTML DOM 是 JavaScript 操作網(wǎng)頁 HTML 樹結(jié)構(gòu)操作上的一套整理節(jié)點(diǎn) API 文檔，改變 HTML 樹節(jié)點(diǎn)對(duì)象：內(nèi)容、樣式以及行為控制
• BOM 對(duì)象是 JavaScript 操作瀏覽器對(duì)象模型管理的一套整理 窗體 API 文檔，用于獲取瀏覽器窗體信息或監(jiān)聽瀏覽器窗體的一些行為規(guī)則

初始體驗(yàn)

回顧一下 HTML 知識(shí)，如果我們需要通過一個(gè)鏈接跳轉(zhuǎn)到百度頁面，很明顯，對(duì)于 HTML 而言，只需要使用一個(gè)超鏈接標(biāo)簽就可以，對(duì)于這種訪問者通過鼠標(biāo)點(diǎn)擊觸發(fā)的跳轉(zhuǎn)，也可以看成是一次交互，將以下代碼賦值生成一個(gè)靜態(tài)的 HTML 網(wǎng)頁文檔：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 初始體驗(yàn)</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 代碼執(zhí)行效果，發(fā)現(xiàn)超鏈接和按鈕點(diǎn)擊都是同一樣的效果——跳轉(zhuǎn)到百度首頁，其中按鈕使用的是 JS 的方式跳轉(zhuǎn)，代碼分析：

• HTML 超鏈接 a 標(biāo)簽具有 href 屬性用于指定鏈接的目錄地址，還有一個(gè) target 指定的鏈接方式，默認(rèn) _self 本窗口打開
• HTML 超鏈接 a 標(biāo)簽并沒有寫死 target 就已經(jīng)默認(rèn)在本窗口打開方式，說明 超鏈接 a 標(biāo)簽同樣具有一個(gè)點(diǎn)擊事件去觸發(fā)鏈接跳轉(zhuǎn)
• 以面向?qū)ο蟮乃季S方式可以得到 HTML 的按鈕 button 標(biāo)簽同樣具有點(diǎn)擊事件，只是沒有隱藏表現(xiàn)出來，需要使用 onclick 去觸發(fā)
• 按鈕 button 對(duì)象觸發(fā)了點(diǎn)擊 onclick 事件，執(zhí)行了 BOM 瀏覽器內(nèi)置對(duì)象 window 的 open() 方法，表示窗口以何種方式打開鏈接

引入方式

• 行內(nèi)執(zhí)行：可以直接在 HTML 標(biāo)簽內(nèi)部直接使用，但前提是需要一個(gè)事件去觸發(fā)它才能被執(zhí)行
• 標(biāo)簽執(zhí)行：同樣也在 HTML 代碼任意區(qū)域，通過使用 script 標(biāo)簽來編碼，JavaScript 執(zhí)行代碼在 script 元素標(biāo)簽內(nèi)
• 引入執(zhí)行：有點(diǎn)類似于 HTML 的樣式表 CSS 引入一個(gè)外文件，知識(shí)對(duì)于 JavaScript 的引入還是使用的是 script 元素標(biāo)簽

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一個(gè) JavaScript 練習(xí)</title> </head> <body><script language="javascript">document.write('Hello World'); // document 是一個(gè) BOM，write() 是一個(gè)動(dòng)作，組合表示將 'Hello World' 寫到瀏覽器內(nèi)</script> </body> </html> -------------------------------------------------------------------------------------------------------------------------------- # demo.js document.write('Hello World');# demo.html 在 HTML 中，通過 script 標(biāo)簽引入 dome.js 文件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一個(gè) JavaScript 練習(xí)</title> </head> <body><script language="javascript" src="./demo.js"></script> </body> </html>

注釋語法

JavaScript 注釋用來解釋某段程序或某行代碼是什么意思、什么作用，方便開發(fā)者之間的交流，注釋內(nèi)容不會(huì)被瀏覽器解析出來，常用于開發(fā)者模式中

• 單行注釋：// 后面的代碼必須另啟行，否則為注釋內(nèi)容
• 多行注釋：/**/ 注釋內(nèi)容從 /* 到 */ 之間的內(nèi)容，也可以用于局部注釋
• 文檔注釋：/**… */ 常用于函數(shù)注釋，用來解釋函數(shù)體，類似于一個(gè) API 文檔

// document.write('Hello World'); 我已經(jīng)不需要了這行代碼了，這里把它給注釋掉了 -------------------------------------------------------------------------------------------------------------------------------- function Person(name, age) {/*這點(diǎn)代碼可以使用下方代碼替換方式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; }

保留關(guān)鍵字

關(guān)鍵字

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：保留關(guān)鍵字不能用作變量或函數(shù)的命名，使用關(guān)鍵字容易導(dǎo)致程序解析錯(cuò)誤，會(huì)執(zhí)行保留關(guān)鍵字的動(dòng)作

總結(jié)

以上是生活随笔為你收集整理的一：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 能干什么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。