代碼示例：https://github.com/lotapp/BaseCode/tree/master/javascript/1.ES6
線上示範：https://github.lesschina.com/js/1.base/ES6與PY3.html
ES6現在浏覽器基本上都支援了，可以收一波韭菜了～（關鍵移動端都支援了）
<code>var</code>：可以重複定義，不能限制修改，沒有塊級作用域（和Python差不多）
<code>let</code>：不可以重複定義，相當于C#的變量，塊級作用域（以後var全部換成let）
<code>const</code>：不可以重複定義，相當于C#的常量，塊級作用域
1.var可以重複定義
2.let不可以重複定義，相當于C#的變量（以後var全部換成let）
3.const：不可以重複定義，相當于C#的常量
1.<code>var</code>可以修改
2.<code>let</code>可以修改
3.<code>const</code>不可以修改
1.var沒有塊級作用域
2.let複合正常變量特性
3.更嚴格的const就更不說了
變量沒有修飾符的，直接定義，全局變量<code>global</code>引用即可
1.var變量和Python類似
2.全局變量建議<code>global</code>引用一下
這個特性不管是<code>C#</code>還是<code>ES6</code>都是從<code>Python</code>那借鑒過來的，特點：
左右兩邊結構一樣
定義和指派同時完成
簡單版：
變化版：
PS：把後面改成<code>{a1:1,b1:2,c1:3}</code>就變成<code>undefined undefined undefined</code>
複雜版：
左右兩邊結構需要一樣
以前寫法：
簡化寫法：
舉個例子：
如果隻有一個參數：<code>()</code>可以省略
如果函數體隻有一句話：<code>{}</code>可以省略
如果隻有一句<code>return</code>，那麼<code>return</code>也可以省略
沒有<code>return</code>也可以簡寫
PS：箭頭函數會改變<code>this</code>（後面會說）
<code>...args</code>必須是最後一個參數
PS：Python裡面可以：
案例1：
PS：Python用法類似：
案例2：
普通函數的this ==> 誰調用就是誰（經常變：誰調用是誰）
箭頭函數的this ==> 在誰的環境下<code>this</code>就是誰（不變：目前作用域）
再舉個例子：在document内
下面幾個方法都不會改變原數組
映射，傳幾個參數進去，出來幾個參數。（不改變數組内容，生成新數組）
Python略有不同：(<code>把函數依次作用在list的每個元素上</code>)
PS：result_list：PY2直接傳回list，PY3傳回<code>Iterator</code>
代言詞：過濾（不改變數組内容，生成新數組）
PS：nums2：PY2直接傳回list，PY3傳回<code>Iterator</code>
不做任何修改，純粹的周遊，用法和<code>net</code>裡面的<code>ForEach</code>差不多
NetCore：
代言詞：彙總，和<code>map</code>有點相反，進去一堆出來一個
輸出：
逆推整個執行過程：
x隻被指派一次
y從第二個值開始往下周遊
整個過程隻周遊9遍就結束了
for循環需要10次周遊結束
y從第二個數開始的，少一次周遊也正常
簡單說就是按順序依次執行函數，eg：
reduce直接求平均值：（return是關鍵）
reduce就兩個參數（<code>有且僅有</code>）
<code>Python</code>的<code>Reduce</code>沒<code>js</code>的強大，一般都是對清單做一個累積的‘彙總’操作
可以看看執行過程：
通俗講：把類數組集合轉化成數組
HTML代碼：<code>/BaseCode/javascript/1.ES6/1.array.from.html</code>
JS部分：(collection是沒有forEach方法的，需要轉化成數組)
<code>Json</code>字元串的标準寫法：
隻能用雙引号
所有名字必須用引号包裹
字元串和Json互相轉換：
字元串轉換成Json對象：<code>JSON.parse()</code>
Json對象轉換成字元串：<code>JSON.stringify()</code>
省的一個個去拼接了（PS：<code>反單引号</code>）
Python3用起來差不多：
注意一點：換行内容如果不想要空格就頂行寫
Python就換成了<code>"""</code>
In [ ]:
參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
以前JS的OOP嚴格意義上還是一個個函數，隻是人為給他含義罷了，現在是真的支援了，性能和文法都優化了
看看Python怎麼定義的：（self每個都要寫）
PS：JS後來居上，看起來文法比PY更簡潔點了
PS：如果子類中存在構造函數，則需要在使用<code>this</code>之前首先調用<code>super()</code>
看看Python文法：
多态這方面和Python一樣，有點後勁不足，隻能僞實作，不能像Net、Java這些這麼強大
Python也半斤八兩，十分相似
直接指定函數中<code>this</code>的值，防止改變
如果指定一個事件執行函數的時候，class裡面的this會變化，這時候不想外面套一層方法就可以使用bind
小驗證：直接指定函數中<code>this</code>的值，防止改變
小驗證：<code>箭頭函數的優先級比bind高</code>
隻支援靜态方法，不支援靜态屬性
class中不能定義私有變量和函數
class中定義的所有方法都會被放倒原型當中，都會被子類繼承，而屬性都會作為執行個體屬性挂到this上
課後拓展：<code>https://www.jianshu.com/p/5cb692658704</code>
Python3 與 C# 面向對象之～封裝： https://www.cnblogs.com/dotnetcrazy/p/9202988.html
Python3 與 C# 面向對象之～繼承與多态： https://www.cnblogs.com/dotnetcrazy/p/9219226.html
微信小程式出來後，元件化的概念越來越火（可以了解為子產品化），結合<code>OOP</code>真的很友善
先看個<code>React</code>的基礎案例（結合<code>Next.js</code>更爽）
輸出：公衆号：逸鵬說道
業餘擴充：<code>AMD</code>、<code>CMD</code>、<code>CJS</code>、<code>UMD</code>： https://blog.csdn.net/yikewang2016/article/details/79358563
PS：<code>React 16.x</code>開始：
<code>react.js</code> ==> <code>react.development.js</code>
<code>react.min.js</code> ==> <code>react.production.min.js</code>
<code>react-dom.js</code> ==> <code>react-dom.development.js</code>
<code>react-dom.min.js</code> ==> <code>react-dom.production.min.js</code>
PS：如果自己找JS，搜尋三個包：<code>react</code>、<code>react-dom</code>、<code>babel-core 5.x</code>（JSX）
npm國内鏡像：<code>https://npm.taobao.org</code>
配置一下即可：<code>npm install -g cnpm --registry=https://registry.npm.taobao.org</code>
然後就可以把<code>cnpm</code>當作<code>npm</code>來用了，比如上面三個js檔案：
<code>cnpm install react</code>
<code>cnpm install react-dom</code>
<code>cnpm i babel-core@old</code>
PS：<code>i</code>是<code>install</code>的簡寫，<code>-g</code>是安裝到全局環境中，不加就隻是安裝到目前目錄
用<code>OOP</code>來改造一下上面的案例：（<code>ReactDOM</code>在執行<code>render</code>渲染<code><MyTest></code>标簽的時候會傳回，<code>MyTest類</code>裡面的<code>return值</code>）
好處通過這個案例可能還看不出來，但是你想一下：當那些常用功能模闆成為一個個自己的元件時，你的每一次前端開發是多麼幸福的事情？
再文法衍生一下，來個稍微動态一點案例：
輸出：(兩種方式傳參：1.字元串，2.{}表達式)
有上面兩個鋪墊，現在做個自己的小元件：
課後拓展：<code>https://www.babeljs.cn/learn-es2015/</code>
最後方案和寫法類似于<code>Python</code>、<code>NetCore</code>，都是<code>async</code>和<code>await</code>，前面是一步步引入（本質）
基于<code>JQ</code>的異步操作很常見，比如：
輸出：（的确是異步操作，不等結果傳回就先執行下面語句了）
那麼它的本質是什麼呢？來看看傳回什麼：
輸出：（其實本質也是一個封裝版的<code>Promise</code>）
用等價寫法改裝一下：（<code>then兩個方法，一個處理成功，一個處理失敗</code>）
輸出：(忽略上面的<code>\</code>我的渲染有的問題，需要轉義一下)
簡單的說就是：Promise：用同步的方式去寫異步
文法：<code>Promise(()=>{});</code>
有點類似于<code>NetCore</code>的<code>Task</code>==> <code>Task.Run(()=>{});</code>
上面的那個例子本質上相當于：
業務上難免都有互相依賴，以前寫法也隻能在<code>sucess</code>回調函數裡面一層層的嵌套
一個是比較麻煩，還有就是看起來特别不友善，一不小心就搞錯了，現在就簡單多了，then裡面直接處理
咋一看，沒啥好處啊？而且還複雜了，其實當任務多的時候好處就來了
比如結合JQ來模拟一個<code>事務</code>性的案例：
這個簡單過一下，和Python沒有太多不同
用<code>function*</code>來定義一個疊代器
通過上面輸出可以瞬間知道退出條件：<code>done: true</code>，那麼周遊方式就來了：
JS也提供了<code>for of</code>來周遊：
大體上差不多，結束條件是觸發<code>StopIteration</code>異常
傳參Python是使用的send方法，其實next本質也是send，這個之前講過了：
如果你現在還沒有用過<code>async</code>和<code>await</code>的話...需要好好提升下了，還是通俗說下吧：
await你可以了解為：等待後面異步方法的結果，這時候的結果就是你需要的
async你可以了解為：使用了await的方法需要特殊标記一下
ES6出來前，我們用異步一般是這麼用的：
和下文JS不關聯的外部JS，都打個異步标簽來異步加載
<code><script src="./js/test.js" async></script></code>
現在可以正經的使用了，繼續把上面那個例子衍生下：（之前用<code>then(()=>{},()=>{})</code>，現在可以使用<code>async</code>和<code>await</code>來簡化）
就算是批量任務也不用那麼麻煩了：
應用常見其實很多，比如執行某個事件、比如引入某個外部JS...，eg：
test.js
HTML中引用一下：<code><script src="./js/test.js" async></script></code>
和<code>NetCore</code>一樣，可以嵌套使用的，<code>await</code>的對象一般都是<code>Promise</code>或者同是<code>async</code>修飾的方法
<code>test.js</code>：
頁面
Python3.7開始，文法才開始簡潔：
這個ES6裡面有，但是浏覽器并沒有完全支援，是以現在大家還是用<code>Require.js</code>和<code>Sea.js</code>更多點
簡單看看就行：擴充連結 ~ <code>https://www.cnblogs.com/diligenceday/p/5503777.html</code>
子產品定義：
導入子產品：
作者：毒逆天
出處：https://www.cnblogs.com/dotnetcrazy
打賞：<b>18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z</b>
本文版權歸作者和部落格園共有。歡迎轉載，但必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接！