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+ 能干什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。