[ ES6 ] 快速掌握經常使用 ES6 （一）

本系列文章適合快速掌握 ES6 入門語法，想深刻學習 ES6 的小夥伴能夠看看阮一峯老師的《ECMAScript 6 入門》
學習 20% 的知識完成 80% 的工做

關於 ES6

稍微介紹下 ES6 吧，詳細介紹請自行 baidu 或 Google

1. ES2015 = ES6
2. ES6 泛指 ES201五、ES201六、ES2017 等等，JavaScript 的下一代標準
3. 現代瀏覽器支持大部分（90%+）的原生 ES6 ，可是爲了兼容老版本的瀏覽器，一般使用 Babel 將 ES6 代碼轉爲 ES5 代碼。

常量變量 let and const

先說說常量和變量的概念吧，

常量是說那種進行一次賦值後不會更改的值，好比說遊戲帳戶的 ID，
變量是說賦值後有更改的需求的，好比遊戲名，遊戲密碼。

在以前的 JavaScript 中是不區分常量和變量的通通使用 var 來定義全局變量，

var userId = 666;
var userPassword = "mimabunengshuo";

如今 ES6 中使用 let 定義局部變量，const 定義局部常量

const userId = 666;
let userPassword = "wobuzidao";

爲何須要使用局部變量與常量

//我但願重複打印 0 到 9 ，打印10次
//使用 var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//使用 let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//結果打印只有一次 0 到 9
letI();//順利完成

若是非要使用 var 完成這個需求的話可使用閉包
關於閉包本次很少作討論

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//順利完成

結構賦值

1. 左右兩邊必須是同樣的數據類型，或者轉換後是同樣的類型；
2. 等號右邊的值應該是數組或對象，不是對象或數組，就先將其轉爲對象；
3. 定義和賦值必須同步完成

例如聲明變量

let a = 1;
let b = 2;
let c = 3;

ES6 容許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

經常使用實例
1.交換變量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

2.提取 JSON 數據
解構賦值對提取 JSON 對象中的數據，尤爲有用。

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭頭函數

在 ES6 以前定義函數是這樣寫

var f = function (i){
    return  i + 5;
}

有了箭頭函數能夠這樣寫（去掉 function 關鍵詞，在"()"後面加"=>"）

let f = (i) => {
    return  i + 5;
}

好像沒有太大區別？

• 箭頭函數只有一個參數時,能夠省略"()",只寫參數；當只有一條返回語句時，能夠省略"{}",以及 return 語句

上面的能夠這樣寫

let f = i => return  i + 5;

箭頭函數的 this 是固定不變的，就是指向定義時所在的對象，而不是使用時所在的對象

假如將 ES6 的箭頭函數轉換爲 ES5 的普通函數,能夠看到，箭頭函數的 this 是在引用外層的 this

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

字符串模板

• 字符串模板主要用來處理變量和字符串混合的狀況
• 字符串使用反引號(`字符串`)來包裹字符串，用$符加大括號 ( \${JavaScript}) 來包裹任意的 JavaScript 表達式
• 字符串模板中可使用回車

好比用 JavaScript 來生成 HTML 元素，元素的文本想使用本身 JavaScript 運算後的結果
ES5 中比較麻煩

$('#dom').append(
  '<div>你的用戶名是：' + userName + '<br> ' +
  '你已經註冊了 ' + oNumber +'年</div>'
);

ES6中相對簡單

$('#dom').append(
  `<div>你的用戶名是：${userName}<br>你已經註冊了${oNumber}年</div>`
);

面向對象

• class 用來定義一個類
• extends 用來表示繼承哪一個類
• constructor 構造函數能夠定義私有方法和屬性,此函數外的爲共享的
• super() 在 constructor 使用該方法繼承父類的 this 對象

代碼示例

class user {
    constructor() {
        this.name = '用戶1';
    }
    sayHello(say) {
        console.log(`${this.name}，有人對你說：${say}`);
    }
}

let user1 = new user();
user1.sayHello('你好'); //用戶1，有人對你說：你好

class xiaoming extends user {
    constructor() {
        super();
        this.name = '小明';
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello('你好'); //小明，有人對你說：你好
let user2 = new user();
user2.sayHello('你好')//用戶1，有人對你說：你好

[ES6] 快速掌握經常使用 ES6 （一）
[ES6] 快速掌握經常使用 ES6 （二）