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