后端程式員的 ES6 超簡單入門筆記

在早期的 Web 專案當中，后端的語言和前端的語言混合在一起，比如在 jsp 和 php 的代碼中能看到大篇幅的 HTML 代碼，后來逐步的發展到有了“模板語言”，使得后端語言和前端語言進行了部分的分離，雖然前端中呼叫模板的方法，但是前端還需要后端來進行渲染，到現在，前后端語言完全分離，前端做互動，后端寫介面，各司其職，在移動互聯網的飛速發展，前端也日益重要，尤其是出現了所謂的“大前端”，

作為一個后端程式員對前端知識不用懂太多，能看懂、或夠用就行，為了彌補自己不懂前端的短板，周末對前端進行了簡單的了解，就有了這份筆記，

ECMAScript 6

什么是 ES 6 呢，我這里參考了網上給出的說明，參考如下：

JavaScript 是大家所了解的語言名稱，但是這個語言名稱是商標（ Oracle 公司注冊的商標），因此，JavaScript 的正式名稱是 ECMAScript ，1996年11月，JavaScript 的創造者網景公司將 JS 提交給國際化標準組織 ECMA（European computer manufactures association，歐洲計算機制造聯合會），希望這種語言能夠成為國際標準，隨后 ECMA 發布了規定瀏覽器腳本語言的標準，即 ECMAScript，這也有利于這門語言的開放和中立，

https://www.runoob.com/w3cnote/es6-tutorial.html

我這里整理了 ES 6 的幾個特性，當然 ES 6 的特性不只有這些，這些是最基本的部分，

一、變數定義

在 ES 6 中增加了 let 關鍵字用于定義變數，let 的用法與之前的關鍵字 var 有所不同，

let 關鍵字有作用域、不能重復宣告和不存在變數提升，

這里演示一下作用域、不能重復宣告和變數提升，

// 定義變數
{
    var a = 1;
    let b = 2;
}
console.log(a);
console.log(b); // b is not defined

在 { } 中使用 let 定義的變數，在 { } 外進行輸出時，提示變數未定義，這是 let 的作用域的特性，

var m = 1;
var m = 2;

let n = 10;
let n = 20; // Identifier 'n' has already been declared

當在同一作用域使用 let 定義同一變數時，會提示該識別符號已經被定義，

console.log(x)  // Cannot access 'x' before initialization
let x = 100;

console.log(y)  // undefined
var y = 200;

從上面的代碼可以看到，在未定義 y 在前面輸出 y 時，y 已經存在，由于未賦值，因此輸出 undefined，而在 x 前面輸出 x 時，則會提示不能在 x 初始化之前訪問 x，

二、常量定義

常量的定義使用 const 關鍵字，常量在定義時必須賦值，且之后值不可以改變，

// 定義常量
const PI = 3.1415926
PI = 3  // Assignment to constant variable.

當對 const 定義的常量賦值時，會提示“在給常量賦值”，

const MY    // Missing initializer in const declaration

當定義常量沒有賦值時，會提示“定義常量時沒有指定值”，

三、解構賦值

解構賦值時對賦值運算的擴展，來看一下最基本的解構使用方法，

let a = 1, b = 2, c = 3
console.log(a, b, c)

之前的賦值需要逐個賦值，對于 ES 6 可以使用新的方法進行賦值，方法如下：

// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

上面的方式為陣列模型的解構，除了對陣列進行解構外，還可以對物件進行解構，方法如下：

// 物件解構
let user = {name: 'Helen', age: 18}

// ES6
let {name, age} = user  // 解構的變數必須是user中的屬性
console.log(name, age)

解構的變數需要和 user 中的屬性相同，

上面是解構的基本用法，除了基本用法外，還可以使用可嵌套可忽略、不完全解構、剩余運算子、結構默認值等方法，

四、字串

在 ES 6 中對字串提供了很多拓展方法，比如子串識別、字串重復、字串補全等，這里簡單的介紹一下字串模板的使用，

字串模板使用反引號（`）進行標識，模板字串具備普通字串的用法，可以使用 ${} 將變數放入字串中等功能，

<script>
    let name = 'lucy'
    let age = 20

    // 其中的換行在輸出是也進行輸出
    let info = `My name is ${name},
     i am ${age + 1} years old`

    console.log(info)
</script>

通過瀏覽器的 console 視窗來查看它的輸出，輸出如下：

My name is lucy,
         i am 21 years old

可以看到，在輸出中將變數 name 進行了輸出，將變數 age 進行加 1 后輸出，在代碼中的字串模板中使用了換行，在控制臺中字串的輸出也進行了換行，

五、物件

在 ES 6 中定義物件、物件拷貝、物件合并也非常的好用，物件定義的代碼如下：

<script>
    const name = 'lucy'
    const age = 20

    // 其中的名字可以省略，名字和變數名相同
    const user = {name, age}
    console.log(user)
</script>

輸出如下內容：

{name: "lucy", age: 20}
age: 20
name: "lucy"

物件拷貝的代碼如下：

<script>
    // 物件復制
    let person = {name: 'amy', age: 15}
    let someone = { ... person }

    console.log(someone)
</script>

以上代碼輸出如下：

{name: "amy", age: 15}
age: 15
name: "amy"

物件合并的代碼如下：

<script>
    // 物件合并
    let age = {age : 15}
    let name = {name : 'amy'}
    let person = { ... age, ... name}

    console.log(person)
</script>

以上代碼輸出如下：

{age: 15, name: "amy"}
age: 15
name: "amy"

ES 6 中還有其他的關于物件的操作，比如屬性名運算式、方法名簡寫等，

六、箭頭函式

在 ES 6 中提供了箭頭函式，它是函式的一種簡潔書寫方式，這里整理了帶一個引數和帶多個引數的函式，先來看帶一個引數的函式，代碼如下：

<script>
    // 引數 => 函式體
    var f1 = a => a

    console.log(f1(3))
</script>

該函式等價于如下函式：

var f1 = function(a) {
    return a
}

因此，在上面的 console.log(f1(3)) 會輸出一個 3，再來查看帶多個引數的函式如何定義，代碼如下：

<script>
    // ES6
    var f2 = (m, n) => m + n

    console.log(f2(3, 4))
</script>

在上面的代碼中，m 和 n 是引數，回傳值是 m + n 的和，上面的代碼輸出 7，當引數只有一個的時候可以不使用小括號，當沒有引數或有一個以上的引數時，小括號不可用省略，

總結

上面是整理的部分關于 ES 6 的特性，ES 6 中還包括 Symbol、Map、Set、Proxy、Reflect、Promise、Generator 和async 等，具體參考連接為 ：https://www.runoob.com/w3cnote/es6-tutorial.html，有需要的可以點擊該連接自行閱讀，