ECMAScript 6(ES6)簡介

前言：

哈嘍小伙伴們，愛說‘廢’話的Z又回來了，歡迎來到Super IT曾的博客時間，我說啦這個月要帶的福利，說了更的博客肯定不能水你們，要一起進步學習嘛，今天我就把我學習最經典的Blue的ES6掌握的重點羅列出來，不足的歡迎提問留言，

簡介:

在開張之前我覺得有必要要知道ES6到底是個什么東西，ES6全名是ECMAScript 6，在2015年6月正式發布，哇你不要看到2015年覺得知識老舊什么的，要從基礎的學習才能去掌握它的發展，而且2015也是ES6的一個轉折點，那他是用來干嘛的呢個人覺得就是把你的代碼更優美了，更嚴謹了，更簡化了，語言嘛本來就是一種工具，拿官網的話來說ECMScript和JavaScript的關系就是，前者是后者的規格，后者是前者的實作，要看ES6的成長史的建議移步阮一峰寫的ES6，兼容性，總之15年的成長史讓它成為了現在前端工程師的必備知識，畢竟到現在IE10+、Chrome、FireFox、移動端、NodeJS都是兼容的，不兼容怎么辦呢，比如公司要求老版本的IE也要能使用，那你就有兩個辦法：1.在線轉換（個人不推薦），2.提前編譯，

// 引入browser.js檔案，要我覺得babel==browser.js
<script src="https://www.cnblogs.com/Three-Z/p/browser.js" charset="utf-8"></script>
<script type="text/bable">
//代碼
</script>

總結： ECMAScript和JavaScript
- ECMA是標準，JS是實作
  - 類似于HTML5是標準，IE10、Chrome、FF都是實作
  - 換句話說，將來也能有其他XXXScript來實作ECMA
- ECMAScript簡稱ECMA或ES

歷史版本

時間	ECMA	JS	解釋
1996.11	ES 1.0	JS穩定	Netscape將JS提交給ECMA組織，ES正式出現
1998.06	ES 2.0		ES2正式發布
1999.12	ES 3.0		ES3被廣泛支持
2007.10	ES 4.0		ES4過于激進，被廢了
2008.07	ES 3.1		4.0退化為嚴重縮水版的3.1 因為吵得太厲害，所以ES 3.1代號為Harmony(和諧)
2009.12	ES 5.0		ES 5.0正式發布同時公布了JavaScript.next也就是后來的ES 6.0
2011.06	ES 5.1		ES 5.1成為了ISO國際標準
2013.03	ES 6.0		ES 6.0草案定稿
2013.12	ES 6.0		ES 6.0草案發布
2015.06	ES 6.0		ES 6.0預計發布正式版 JavaScript.next開始指向ES 7.0

ES6變數

var與let、const對比：

var大家不陌生吧，宣告變數用的，既然這么熟了直接對比它的缺點吧：
- var典型三大不足
  - 可以重復宣告
  - 無法限制修改
  - 沒有塊級作用域
- let和const的優點
  - 不能重復宣告
  - const常量能限制修改
  - 有塊級作用域

var與let、const示例：

前兩點應該很好理解，比如我在公司寫一個大型專案，那么多變數，如果用var，萬一重復宣告了是不是就會直接給我覆寫掉呢？答案肯定啊，這就很坑爹了是不是，let重復宣告就直接給你報錯，多好簡單粗暴，

<script type="text/javascript">
			var a = 1;
			var a = 10;
			alert(a)
		</script>

第二點就不解釋了你想想π=3.1415926...你就懂了，主要來說第三個，什么叫塊級作用域呢？{...}，這種大括號括起來的就是了，來一個經典的例子，三個按鈕點擊輸出下標，

	<body>
		<script>
			window.onload = function(){
				var abtn = document.getElementsByTagName("input");
				for (var a = 0; a < abtn.length; a++) {
					console.log(a)
					abtn[a].onclick=function(){
						console.log(a)
						alert(a);
					}
				}
			};
			
		</script>
		<input type="button" value="https://www.cnblogs.com/Three-Z/p/1" />
		<input type="button" value="https://www.cnblogs.com/Three-Z/p/2" />
		<input type="button" value="https://www.cnblogs.com/Three-Z/p/3" />
	</body>

你說輸出什么？

對，頁面加載a就0,1，2了，然后點擊都是3，為啥呢？

閉包

原因是賦值給 onclick 的是閉包，哇，你要問我閉包是個啥？哈，個人建議補一下JS知識，這里附上閉包鏈接，自己要好好理解喲，閉包也是重要的JS知識掌握點，

然后繼續說，這三個閉包在回圈中被創建，但他們共享了同一個詞法作用域，在這個作用域中存在一個變數a，這是因為變數a使用var進行宣告，所以具有函式作用域，當onclick的回呼執行時，a的值被決定，由于回圈在事件觸發之前早已執行完畢,如圖列印的0，1，2，變數物件a（被三個閉包所共享）已經指向了abtn的最后一項，所以都是3，

以前怎么解決？用閉包把他包裹起來就是，或者用函式工廠這樣就OK了，然后你就會神奇的發現最開始a也列印的0，1，2，但是按鈕正常了，原因就是，所有的回呼不再共享同一個環境，閉包為每一個回呼創建一個新的詞法環境，在這些環境中，a 就不再恒定都為3了，

for (var a = 0; a < abtn.length; a++) {
	(function(a){
		console.log(a);
		abtn[a].onclick=function(){
			alert(a);
		}
	})(a) // 馬上把當前回圈項的a與事件回呼相關聯起來
}

在這里插入圖片描述

現在呢？不用這么麻煩，直接最開始的var a = 0; 改成let = 0;就啥事兒沒有，你就發現0,1，2很自然的就出來了，這里就相到于開辟了三個代碼塊，理由也很簡單粗暴，因為let是塊級作用域，

<script>
	window.onload = function(){
		var abtn = document.getElementsByTagName("input");
		for (let a = 0; a < abtn.length; a++) {
			abtn[a].onclick=function(){
				alert(a);
			}
		}
	};
</script>

到這里，變數完事兒~
———————————————————————分割線——————
都看到這里了，只能說明一點，咱倆真的真的真的很有緣分啊！不點個贊再走嘛，????，順手加個關注嘛，偷偷收藏我博文的小可愛我后臺看得到的嘛，點個贊給老曾支持支持，不出意外接下來我一直都在哈哈哈，學知識寫博客不著急，基礎打好，專案直接上手6到飛起，

下節說函式之后的內容

放上我的，博客園，主要博客CSDN，GitHub，pipe

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/131639.html

標籤：JavaScript

上一篇：js 圖片輪播簡單版

下一篇：前端經典面試題解密：JS的new關鍵字都干了什么？

深入解讀ES6系列（一）

ECMAScript 6(ES6)簡介

前言：

目錄：

簡介:

ES6變數

var與let、const對比：

var與let、const示例：

閉包