ECMAScript 6.0基礎入門教程（一）-ES6基礎入門教程
阿新 • • 發佈：2019-01-29
ECMAScript 6.0基礎入門教程（一）
1、ES6簡介
1.1 ES6的歷史
- ECMAScript簡稱ECMA或ES
ECMAScript與JavaScript的關係
ECMA是European Computer Manufacturers Association的縮寫，即歐洲計算機制造商協會。歐洲計算機制造商協會是制定資訊傳輸與通訊的國際化標準組織。
1996年11月，JavaScript的創造者Netscape公司，決定將JavaScript提交給ECMA，希望這種語言能夠成為國際標準。次年，ECMA釋出262號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為ECMAScript，這個版本就是1.0版。
該標準從一開始就是針對JavaScript語言制定的，但之所以不叫JavaScript，有兩個原因。一是商標，Java是Sun公司的商標，根據授權協議，只有Netscape公司可以合法地使用JavaScript這個名字，且JavaScript本身也已經被Netscape公司註冊為商標。二是想體現這門語言的制定者是ECMA，不是Netscape，這樣有利於保證這門語言的開放性和中立性。
因此，ECMAScript和JavaScript的關係是，ECMA是JavaScript的標準，JavaScript是ECMA的一種實現。歷史版本
時間 版本 詳情 1996.11 ES 1.0 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開始指向ES 7.0
1.2 ES6相容性
- ES6相容性問題是怎樣產生的？
由於廣大使用者使用的瀏覽器版本在釋出的時候也許早於ES6的定稿和釋出，而到了今天，我們在程式設計中如果使用了ES6的新特性，瀏覽器若沒有更新版本，或者新版本中沒有對ES6的特性進行相容，那麼瀏覽器肯定無法識別我們的ES6程式碼，好比瀏覽器根本看不懂我寫的let和const是什麼東西？只能報錯了。這就是瀏覽器對ES6的相容性問題。 - 對ES6新特性最友好的瀏覽器有：IE10+、Chrome、FireFox、移動端、NodeJs
使用Babel解決ES6相容性問題
提前編譯
- Babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼，從而使ES6在低版本瀏覽器環境執行。
- 這種方法是實時在網頁中將ES6程式碼轉為ES5，對效能會有影響。生產環境需要將ES6轉碼完成再進行載入。
首先我們建立一個html檔案，在裡面輸入ES6的新語法，用低版本瀏覽器執行這個檔案。
<script> let a = 1; console.log(a); </script>這樣我們的低版本瀏覽器會報錯：
這次我們引入線上的babel.min.js，我們還要在script指令碼中宣告型別為”text/babel”，這樣就可以在低版本瀏覽器中執行ES6的新語法了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> <script type="text/babel"> let a = 1; console.log(a); </script>這次我們成功得到了console.log的結果：
2、變數
2.1 var的缺點
1.可以重複宣告，在團隊協作時很容易造成衝突
var a = 1;
var a = 2;2.無法限制修改，沒有常量的概念
var a = 1;
a = 2;3.不支援塊級作用域，屬於函式級作用域
if ( true ) {
var a = 1;
}
alert(a);2.2 let和const
- const是常量，常量命名要用大寫字母，值只能定義一次不可更改
- let和const的區別是：let是變數可以修改，const是常量不可以修改
- let和const的相同點：
1.都不能重複宣告
let a = 1;
let a = 2;
const a = 1;
const a = 2;
2. 支援塊級作用域，在作用域內定義的變數或常量只能在作用域內使用
if ( true ) {
let c = 1;
}
console.log(c);if ( true ) {
const PI = 3.14;
}
console.log(PI);2.3 解構賦值
- 在ES5裡想要將陣列內容分別賦值給變數必須單獨來寫
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a, b, c);- 通過ES6的解構賦值就可以這樣來寫
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);- 解構賦值注意事項
- 變數和資料必須一一對應
- 右側資料必須是合法的資料型別
- 宣告和賦值不能分開，必須在一句話裡完成
3、函式
3.1 箭頭函式
- ES5的函式寫法
function fn(a){
return a * 2;
}
console.log(fn(5)); //10- ES6箭頭函式
let fn = (a) => {
return a * 2;
}
console.log(fn(5)); //10- 箭頭函式簡寫，如果只有一個引數可以省略()，如果只有一個return可以省略{}和return
let fn = a => a * 2;
console.log(fn(5)); //103.2 函式引數
- 收集剩餘引數
在引數最後新增形參…args獲取剩餘引數
let fn = (a, b, ...args) => {
console.log(a); //1
console.log(b); //2
console.log(args); //[3, 4, 5]
}
fn(1, 2, 3, 4, 5);- 陣列展開
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];
console.log(arr); //[1, 2, 3, 4, 5, 6]- 預設引數
將形參直接賦值，如果沒有傳入對應實參那就使用預設值，如果傳入對應實參，那就使用實參
let fn = (a, b=2, c=3) => {
console.log(a, b, c); //1, 5, 3
}
fn(1, 5);4、陣列
ES6新增了4個數組方法：map、reduce、filter、forEach
4.1 map（對映）
檢查分數是否及格
let arr = [59, 60, 99, 31, 85];
let result = arr.map(item => item >= 60 ? "及格" : "不及格");
console.log(result); //["不及格", "及格", "及格", "不及格", "及格"]4.2 reduce（彙總）
- 求和
tmp引數為上一次相加的結果，item引數是當前要相加的值，index引數是當前要相加值的下標,arr引數指向的是陣列本身
let arr = [10, 20, 30, 40];
let result = arr.reduce((tmp, item, index) => tmp + item);
console.log(result); //100- 求平均數
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((tmp, item, index, arr) => {
if ( index != arr.length-1 ) { //不是最後一次先求和
return tmp + item;
} else { //最後一次求平均數
return (tmp + item)/arr.length;
}
});
console.log(result); //34.3 filter（過濾器）
根據條件判斷，去掉不想要的資料，返回想保留的資料
let arr = [5, 7, 10, 13, 15, 20, 25];
let result1 = arr.filter(item => {
if ( item%5 == 0 ) { //判斷可不可以被5整除
return true; //保留可以被5整除的數
} else {
return false; //去掉不能被5整除的數
}
});
//可以簡寫成下面這種方式，直接通過布林值判斷，為true的保留，為false的去掉
let result2 = arr.filter(item => item%5 == 0); //保留可以被5整除的數
//這樣得到的結果是一樣的
console.log(result1); //[5, 10, 15, 20, 25]
console.log(result2); //[5, 10, 15, 20, 25]4.4 forEach（迭代）
遍歷陣列，第一個引數是陣列的值，第二個引數是陣列的下標
let arr = [2, 5, 6, 9, 7, 54];
arr.forEach((item, index) => {
console.log(index + ":" + item); //0:2, 1:5, 2:6, 3:9, 4:7, 5:54
});5、字串
ES6新增了2個字串方法：startsWith、endsWith
5.1 startsWith（判斷字串開始字元）
let str = "https://www.baidu.com/";
console.log(str.startsWith("https://")); //true5.2 endsWith（判斷字串結尾字元）
let str = "1.txt";
console.log(str.endsWith(".txt")); //true5.3 字串模板
- 用反單引號將字串和變數拼接，變數用${}包裹，字串可以換行。
- ES5的字串拼接很麻煩
var title = "標題";
var content = "內容";
var str = "<div>\
<h2>title:"+title+"</h2>\
<p>content:"+content+"</p>\
</div>";- 使用ES6字串模板可以更方便更簡潔
let title = "標題";
let content = "內容";
let str = `<div>
<h2>title:${title}</h2>
<p>content:${content}</p>
</div>`;6、面向物件
- ES5的面向物件寫法很繁瑣，其實就是建構函式偽裝成一個類來使用，程式碼維護起來也比較麻煩。
function My(name, age){ //建構函式偽裝成類來使用
this.name = name;
this.age = age;
}
/*函式需要用prototype來追加，與主體分離，比較分散不便於維護*/
My.prototype.showName = function (){
alert(this.name);
}
My.prototype.showAge = function (){
alert(this.age);
}
var my = new My('Sain', 26);
my.showName(); //Sain
my.showAge(); //26- 在ES6裡增加了class關鍵字可以區分類和建構函式，程式碼都在同一個class作用域程式碼方便管理
class My{ //使用class關鍵字定義一個類
constructor(name, age){
this.name = name;
this.age = age;
}
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
var my = new My('Sain', 26);
my.showName(); //Sain
my.showAge(); //26- ES5的繼承方式
function addMyWeight(name, age, weight){ //如果想在剛才My這個類的基礎上增加新的屬性就要使用繼承
My.call(this, name, age); //通過call來繼承父級
this.weight = weight;
}
addMyWeight.prototype = new My();
addMyWeight.prototype.constructor = addMyWeight;
addMyWeight.prototype.showWeight = function (){
alert(this.weight);
}
var my = new addMyWeight('Sain', 26, '80kg');
my.showName(); //Sain
my.showAge(); //26
my.showWeight(); //80kg- ES6的繼承方式
class addMyWeight extends My{ //使用ES6的extend來繼承My這個類
constructor(name, age, weight){
super(name, age); //等同於call繼承父級
this.weight = weight //增加新屬性
}
showWeight(){ //增加新方法
alert(this.weight);
}
}
var my = new addMyWeight('Sain', 26, '80kg');
my.showName(); //Sain
my.showAge(); //26
my.showWeight(); //80kg7、json
7.1 JSON物件
- json資料序列化
用JSON.stringify()方法將json資料轉化成字串
let json = {"a":10, "b": 5};
let str = JSON.stringify(json);
console.log(str); //{"a":10, "b": 5}
console.log(typeof str); //"string"- 字串轉換成json
用JSON.parse()方法將字串轉換成json，字串必須嚴格遵守json格式要求，key和value要用雙引號包起來，value如果是數字的情況下可以不使用雙引號。
let str = '{"a": 10, "b": "hello"}';
let json = JSON.parse(str);
console.log(json); //Object {a: 10, b: "hello"}
console.log(typeof json); //object7.2 json簡寫
- key和value的名字一樣的時候，可以省略value
let a = 1;
let b = 2;
let json = {a: a, b: b, c: 3};
let json = {a, b, c: 3}; //簡寫- json內函式簡寫，可以將函式的：function去掉，直接用函式名()的寫法
let json = {
a: "hello",
say: function(){ //可以省略：和function，簡寫成say()
alert(this.a);
}
}
json.say(); //hello