介紹
JavaScript web 開發人員必須學習的 3 門語言中的一門：
【資料圖】
1996年11月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA 發布 262 號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript ，這個版本就是1.0版。
ECMAScript 和 JavaScript 的關系是，ECMAScript 是一個簡單的 JavaScript 標準規范，JavaScript 是 ECMAScript 的一種實現（另外的 ECMAScript 方言還有 JScript 和 ActionScript ）。并且，ECMAScript 持續不斷的為 JavaScript 添加新功能。
從 1997年7月 ECMAScript 1.0發布到現在，ECMAScript 已經正式發布了 11 版，下面我們主要介紹從ES6（ES2015）到ES11（最新 ES2020 ）期間，每版發布的新功能。
ES6、ES7、ES8、ES9、ES10新特性一覽：https://juejin.cn/post/6844903811622912014
本文并沒有詳細介紹每個知識點，因為官方的文檔介紹的更好，建議前往學習（https://www.w3cschool.cn/javascript/），本文主要記錄一些重點內容和細節。
基礎概念
HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的
和 部分中。那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"?，F在已經不必這樣做了。如需使用外部文件，請在 <script> 標簽的 "src" 屬性中設置該 .js 文件。可以在 Chrome 瀏覽器中創建一個腳本來執行，在開發者工具中點擊 Sources 面板，選擇 Snippets 選項卡，在導航器中右擊鼠標，然后選擇 Create new snippet 來新建一個腳本文件。
JavaScript 可以通過不同的方式來輸出數據：
使用 window.alert()彈出警告框。使用 document.write()方法將內容寫到 HTML 文檔中。使用 innerHTML寫入到 HTML 元素。使用 console.log()寫入到瀏覽器的控制臺。document.getElementById("demo")是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。innerHTML = "Paragraph changed."是用于修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼。
使用document.write() 方法將內容寫到 HTML 文檔中。此功能可用于寫入文本和HTML。出于測試目的，您可以將JavaScript直接寫在HTML 文檔中。
我的第一個段落。
<script>
document.write(Date());
</script>
請使用 document.write()僅僅向文檔輸出寫內容。如果在文檔已完成加載后執行 document.write，整個 HTML 頁面將被覆蓋。
JavaScript 數據類型
在 JavaScript 中有 5 種不同的數據類型：
stringnumberbooleanobjectfunction3 種對象類型：
ObjectDateArray2 個不包含任何值的數據類型：
nullundefined可以使用 typeof操作符來查看 JavaScript 變量的數據類型。
請注意：
NaN 的數據類型是 number數組(Array)的數據類型是 object日期(Date)的數據類型為 objectnull 的數據類型是 object未定義變量的數據類型為 undefinedconstructor屬性返回所有 JavaScript 變量的構造函數。
"John".constructor // 返回函數 String() { [native code] }(3.14).constructor // 返回函數 Number() { [native code] }
可以使用 constructor 屬性來查看對象是否為數組 (包含字符串 "Array"):
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1;}
變量
字符串（String）字面量可以使用單引號或雙引號。函數（Function）字面量定義一個函數，如：function myFunction(a, b) { return a * b;}。var關鍵詞告訴瀏覽器創建一個新的變量，如var x=5;?？梢栽谝粭l語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可，聲明也可橫跨多行，如：var lastname="Doe", age=30, job="carpenter";。
JavaScript 使用 Unicode 字符集。Unicode 覆蓋了所有的字符，包含標點等字符。JavaScript 中，常見的是駝峰法的命名規則。JavaScript 對大小寫是敏感的。
JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對于傳統編程來說，會在執行前對所有代碼進行編譯。在 JavaScript 中，用分號來結束語句是可選的。
可以在文本字符串中使用反斜杠對代碼行進行換行。單行注釋以 // 開頭。多行注釋以 /* 開始，以 */ 結尾。
無值的變量。未使用值來聲明的變量，其值實際上是 undefined。如果重新聲明 JavaScript 變量，該變量的值不會丟失。
在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。局部變量比同名全局變量的優先級高，所以局部變量會隱藏同名的全局變量。在 HTML 中, 全局變量是 window 對象: 所有數據變量都屬于 window 對象。
你的全局變量，或者函數，可以覆蓋 window 對象的變量或者函數。局部變量，包括 window 對象可以覆蓋全局變量和函數。
全局方法 String()可以將其它類型的變量轉換為字符串。String(123) // 將數字 123 轉換為字符串并返回
將其它類型變量的 方法toString()也是有同樣的效果。(123).toString()
全局方法 Number()可以將字符串轉換為數字。空字符串轉換為 0。其他的字符串會轉換為 NaN (不是個數字)。parseFloat()和parseInt()，如parseInt("10")
全局方法 Number()可將布爾值和日期轉換為數字。
Operator +可用于將變量轉換為數字。
var y = "5"; //stringvar x = + y; //number
當 JavaScript 嘗試操作一個 "錯誤" 的數據類型時，會自動轉換為 "正確" 的數據類型。
5 + null // 返回 5 because null is converted to 0"5" + null // 返回"5null" because null is converted to "null""5" + 1 // 返回 "51" because 1 is converted to "1" "5" - 1 // 返回 4 because "5" is converted to 5
在 JavaScript 中 null 表示 "什么都沒有"，是一個只有一個值的特殊類型，表示一個空對象引用。當設置為“null”時，可以用來清空對象
當你嘗試輸出一個對象或一個變量時 JavaScript 會自動調用變量的 toString() 方法。
isNaN(x)可以判斷是否為NaN
js支持自增和自減運算符、三目運算符。===是絕對等于（值和類型均相等）
把十進制轉換為二進制
function dec2bin(dec){ return (dec >>> 0).toString(2); }
把二進制轉換為十進制
function bin2dec(bin){ return parseInt(bin, 2).toString(10); }
js支持for、while、do...while、for in、switch、break、continue等控制語句。Switch case 使用嚴格比較（===）。
var person={fname:"John",lname:"Doe",age:25};for (x in person){ txt=txt + person[x];}
數組
下面的代碼創建名為 cars 的數組：
var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
var cars=["Saab","Volvo","BMW"];
對象
對象屬性有兩種尋址方式：
name=person.lastname;name=person["lastname"];
聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
字符串
可以使用索引位置來訪問字符串中的每個字符：var character = carname[7];
可以在字符串添加轉義字符來使用引號：var answer = "It\"s alright";
可以使用內置屬性 length來計算字符串的長度
可以使用 new 關鍵字將字符串定義為一個對象： var firstName = new String("John")，不要創建 String 對象。它會拖慢執行速度，并可能產生其他副作用，如不是絕對等于（===）。
字符串有很多方法，如charAt()和indexOf()，參考：https://www.w3cschool.cn/javascript/js-strings.html
表單驗證
function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){alert("姓必須填寫");return false;}}
JavaScript 標簽
如需標記 JavaScript 語句，請在語句之前加上冒號：label:statements
continue 語句（帶有或不帶標簽引用）只能用在循環中。
break 語句（不帶標簽引用），只能用在循環或 switch 中。
通過標簽引用，break 語句可用于跳出任何 JavaScript 代碼塊：
cars=["BMW","Volvo","Saab","Ford"];list:{document.write(cars[0] + "
"); document.write(cars[1] + "
"); document.write(cars[2] + "
"); break list;document.write(cars[3] + "
"); document.write(cars[4] + "
"); document.write(cars[5] + "
"); }
HTML DOM事件
HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。
參考：https://www.w3cschool.cn/jsref/dom-obj-event.html
javascript：void
javascript：void(0) 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。
href="#"與href="javascript：void(0)"的區別
#包含了一個位置信息，默認的錨是#top也就是網頁的上端。
而javascript：void(0), 僅僅表示一個死鏈接。
在頁面很長的時候會使用 #來定位頁面的具體位置，格式為：# + id。
如果你要定義一個死鏈接請使用 javascript：void(0) 。
點我!，在用戶點擊鏈接后顯示警告信息
function getValue(){var a,b,c;a = void ( b = 5, c = 7 );document.write("a = " + a + " b = " + b +" c = " + c );}
輸出：a = undefined b = 5 c = 7
正則表達式
正則表達式是由一個字符序列形成的搜索模式。字面量的形式（var patt = /school/i）和構造函數形式等價（var patt1=new RegExp("school", "i");）。
var patt = /school/i
/school/i是一個正則表達式。
school是一個模式 (用于檢索)。
i是一個修飾符 (搜索不區分大小寫)。
在 JavaScript 中，正則表達式通常用于兩個字符串方法 : search() 和 replace()。
search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子字符串的起始位置。
var str = "Visit school";var n = str.search(/school/i);
search 方法可使用字符串作為參數。字符串參數會轉換為正則表達式，這時區分大小寫，如var n = str.search("school");
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子字符串。
使用正則表達式且不區分大小寫將字符串中的 Microsoft 替換為 school :var str = "Visit Microsoft!";var res = str.replace(/microsoft/i, "school");
replace() 方法將接收字符串作為參數：varres = str.replace("Microsoft","school");
在 JavaScript 中，RegExp 對象是一個預定義了屬性和方法的正則表達式對象。
test() 方法是一個正則表達式方法。test() 方法用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
var patt = /e/;patt.test("The best things in life are free!");
或
/e/.test("The best things in life are free!")
exec() 方法是一個正則表達式方法。exec() 方法用于檢索字符串中的正則表達式的匹配。該函數返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為 null。
/e/.exec("The best things in life are free!");
字符串中含有 "e"，所以該實例輸出為: e
compile() 方法用于改變 RegExp。compile() 既可以改變檢索模式，也可以添加或刪除第二個參數。var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而沒有 "d"，以上代碼的輸出是：truefalse
異常處理
try{ //在這里運行代碼
}catch(err){
//在這里處理錯誤
}
throw 語句允許我們創建自定義錯誤。創建或拋出異常（exception）。
如果把 throw 與 try 和 catch 一起使用，那么能夠控制程序流，并生成自定義的錯誤消息。
throw exception
異?？梢允?JavaScript 字符串、數字、邏輯值或對象。
調試
在瀏覽器調試窗口中，你可以設置 JavaScript 代碼的斷點。
debugger關鍵字用于停止執行 JavaScript，并調用調試函數。
這個關鍵字與在調試工具中設置斷點的效果是一樣的。
如果沒有調試可用，debugger 語句將無法工作。
var x = 15 * 5;debugger;document.getElementbyId("demo").innerHTML = x;
JSX
React 使用一種名為 JavaScript XML (JSX) 的特殊語法。 借助 JSX，你可將 HTML（或可能會創建的自定義組件）和 JavaScript 集成到一個文件中，甚至可以集成到單個代碼行中。 通過使用 JSX，你可以依賴 JavaScript 語法來實現邏輯。
瀏覽器本機不支持 JSX。 因此，必須從 JSX 文件生成 JavaScript 和 HTML，才能由瀏覽器呈現它們。 有幾種捆綁程序和其他工具可以執行所需完成的任務。 這些工具包括Webpack和Snowpack。
參考：
https://www.w3cschool.cn/react_tutorial/dotlhozt.html
https://www.papermachined.com/React/1.html#%E4%BB%80%E4%B9%88%E6%98%AFjsx
ES6
ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準，當前使用的比較廣泛。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。也就是說，ES6就是ES2015。
雖然目前并不是所有瀏覽器都能兼容ES6全部特性，但越來越多的程序員在實際項目當中已經開始使用ES6了。了解ES6語法之前，我們得先了解下Babel。Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。大家可以選擇自己習慣的工具來使用使用Babel，具體過程可直接在Babel官網查看。
最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
ES6特性學習參考：
https://segmentfault.com/a/1190000004365693
https://segmentfault.com/a/1190000004368132
JQuery
jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 編程。
學習地址：https://www.w3school.com.cn/jquery/index.asp
JQuery UI
jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。無論您是創建高度交互的 Web 應用程序還是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇，是由jquery官方維護的ui方向的插件，是免費的界面庫。
jQuery UI 包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。
官網：https://www.jqueryui.org.cn/
學習地址：https://www.runoob.com/jqueryui/jqueryui-tutorial.html
JQuery EasyUI
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件，是第三方維護的插件，商業應用要錢的界面庫。
jQuery EasyUI 框架提供了創建網頁所需的一切，幫助您輕松建立站點。本教程將告訴您如何使用 jQuery EasyUI 框架創建應用。
官網：https://www.jeasyui.net/
學習地址：https://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
學習途徑
在線學習
javascript知識圖譜：https://www.w3cschool.cn/javascript/javascript-skillmap.html
w3cschool：https://www.w3cschool.cn/javascript/
w3cschool：https://www.w3school.com.cn/js/index.asp
菜鳥教程：https://www.runoob.com/js/js-tutorial.html
推薦書籍
《JavaScript 高級程序設計（第 3 版）》：俗稱紅寶書，只是這本書版本有些舊，第四版預計于 2020 年下半年出版，可以關注一下。這本書前七章講的是語言特性，一定要掌握。如果你有其他語言的編程基礎，理解起來會更快。第 8、10-14、20、21、23、24 章也要重點看，第 25 章的第一節也要看，其他沒提到的章節屬于非重點的擴展內容，有空就大概讀一下。至于 XML 這種過時的東西就不用看了，書中有大量 API 的章節，不用死記硬背，瀏覽一下就行，用到再回來查。你一定要先看《現代 JavaScript 教程》再看這本紅寶書，因為這里的內容在教程中都有，而且都是最新的，紅寶書只是用于復習鞏固。《JavaScript 權威指南》：俗稱犀牛書，和《CSS 權威指南》類似，都是大而全的工具書?！禘S6 標準入門》：你一定聽過 ES6 或者 ES2015 吧，其實指的是一個東西，就是 2015 年發布的 ECMAScript 規范，發布的一些語言特性。這本書是阮一峰老師的書，是學習 ES6 必買書籍，當然里面也參雜了一些作者的個人理解?！渡钊肜斫?ES6》：尼古拉斯大佬的力作，必買書籍！講解非常詳細且深入。《深入理解 JavaScript 特性》：尼古拉斯大佬的最新書籍，由李松峰老師翻譯，主要講的也是 ES6 的內容。《JavaScript DOM 編程藝術》：DOM 必備書籍，本書主要講的是 DOM 知識，還會帶你通過實戰深入理解相關知識，很有幫助。《JavaScript 語言精粹》：俗稱蝴蝶書，很薄的一本，里面講的都是 JavaScript 語言最核心的部分。半天就能看一遍，可以買了反復看?！禜ead First JavaScript 程序設計》：這本書對于沒有編程經驗的新手友好，內容比較簡單。關鍵詞：
營業執照公示信息