摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。

本文同步 帶你入門 JavaScript ES6 (一)，轉載請注明出處。

ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被成為 ES6 或 ECMAScript 6。

目錄：

一、let 和 const 聲明塊作用域變量

二、模版字面量

三、解構賦值

四、對象字面量簡寫

五、默認參數

ES6 引入 let 和 const 作為塊作用域(用花括號 {} 表示)變量聲明語法，用法同之前的 var 聲明變量類似。不同之處在于不會對申明的變量(或常量)提升作用域范圍

1.1 let 變量聲明

let 語法用于聲明塊作用域內的可重新賦值的變量，作用域內無法重新聲明

MDN let

let name = "huliuqing"
name = "Hu Liuqing"
console.log(name)

1.2 const 常量聲明

const 語法用于聲明是必須 賦值初始值,并且無法重新復制，作用域內不能重新聲明

MDN const

const PI = 3.14
PI = 3.1415 //報錯 Uncaught TypeError: Assignment to constant variable.
console.log(PI)

1.3 let, const 和 var 比較

function findSeason(search) {
    var seasons = ["Spring", "Summer", "Autumn", "Winter"]

    for (season of seasons) {
        console.log("------START-------")
        console.log("current season:" + season + " I"m find:" + search)

        if (season.toLowerCase() == search.toLowerCase()) {
            let isSpring        = search.toLowerCase() == "spring"
            var theSeason       = season
            const SUMMER_SEASON = "Summer"
            
            console.log("isSpring 1: " + isSpring)
            console.log("SUMMER_SEASON 1:"  + SUMMER_SEASON)
            
            return SUMMER_SEASON
        } else {
            console.log("currentIterSeason is:" + theSeason)
        }        

        try{
            console.log("isSpring 2: " + isSpring)
        } catch (e) {
            console.error(e.message)
        }

        try{
            console.log("SUMMER_SEASON2:" + SUMMER_SEASON)
        } catch (e) {
            console.error(e.message)
        }
    }
}

console.log(findSeason("spring"))

console.log(findSeason("summer"))

console.log(seasons)


//運行如下
------START-------
current season:Spring I"m find:spring
isSpring 1: true
SUMMER_SEASON 1:Summer
Summer

------START-------
current season:Spring I"m find:summer
currentIterSeason is:undefined
isSprint is not definedfindSeason 
SUMMER_SEASON 2: SUMMER_SEASON is not definedfindSeason  
------START-------
current season:Summer I"m find:summer
isSpring 1: false
SUMMER_SEASON 1:Summer
Summer

Uncaught ReferenceError: seasons is not defined

let isSpring, var theSeason, const SUMMER_SEASON 都是定義在 if 代碼塊內

當在 if 代碼塊外調用isSpring, theSeason, SUMMER_SEASON時，由于 let 和 const 塊作用域特性會在控制臺報 not defined 錯誤；而 var 定義的 theSeason 不會報錯而僅輸出 undefined，這是因為 var 聲明的變量將作用域范圍提升至 getSeason 作用域范圍內。

提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。

模版字面量

2.1 ES6 之前字符串拼接實現

let name = "huliuqing"
let age = 18
let conent = "你的名字:" + name + " 你今年幾歲了？" + age

隨著拼接內容的增多，拼接操作越加復雜

2.2 ES6 使用飄號(``: 同 ~ 號在同一鍵位) 聲明字符串字面量

let result = `請計算 1 + 2 的結果 ${1 + 2}`
console.log(result);

let name = "huliuqing"
console.log(`你的名字？${name}`)

將值從數組或對象屬性提取到不同變量中

MDN 解構賦值

ES6 之前，如果我們需要將數組中元素或對象中屬性提取值并賦值給變量，實現起來比較復雜:

let numeric = [0, 1, 2]
let a = numeric[0]
let b = numeric[1]
let c = numeric[2]

console.log(a)
console.log(b)
console.log(c)

解構賦值：語法同對象或數組初始化賦值語法，不同之處在于申明左側定義了需要賦值的變量數組或提取的對象屬性。

3.1 解構數組中的值

// 1
let seasons = ["Spring", "Summer", "Autumn", "Winter"]
let [spring, summer, autumn, winter] = seasons // 將season 中的各個元素解構到左側變量

console.log(spring)// Spring
console.log(summer)// Summer
console.log(autumn)// Autumn
console.log(winter)// Winter

// 2 將數組中剩余部分賦值給一個變量
let [spring2, summer2, ...autumnAndWinter] = seasons

console.log(spring2)//Spring
console.log(summer2)// Summer
console.log(autumnAndWinter)// ["Autumn", "Winter"]

3.2 解構對象中的值

// 1
let user = {name: "huliuqing", age: 18}
let {name, age} = user
console.log(name)
console.log(age)

3.2 默認值

// 數組解構默認值
let [a = 5, b = 7] = [1]
console.log(a)// 1 
console.log(b)// 7

//對象解構默認值
let {name = "hlq", age = 18} = {name: "huliuqing"}

console.log(name)// huliuqing
console.log(age)// 18

3.3 解構數組時忽略某些值的解構

let [a, , c] = [1, 2, 3]
console.log(a)// 1
console.log(c)// 3

let {name, , address} = {name: "huliuqing", age: 18, address: "shanghai"}

MDN 對象初始化

對象字面量簡寫，提供一種對初始化一個對象時，它的對象屬性名與待賦值的變量名同名的初始化簡寫方法

比較繞口？

4.1 ES6 之前對象初始化

let name = "huliuqing"
let age = 18
let user = {
    name: name,
    age: age
}
console.log(user)// Object {name: "huliuqing", age: 18}

我們可以看到屬性的賦值方式 name: name，age: age， 這就是冗長的點。

4.2 對象字面量簡寫

let name = "huliuqing"
let age = 18
let user = {
    name,
    age
}
console.log(user)// Object {name: "huliuqing", age: 18}

4.3 對象中方法簡寫

同屬性字面量簡寫類似，新的 ES6 語法提供了對象方法的簡寫

let name = "huliuqing"
let age = 18
let user = {
    name,
    age,
    getUser() {
        return `${name} : ${age}`
    }, // ES6 語法
    //getUser: function() {
    //    return `${name} : ${age}`        
    //} // 之前的語法
}
console.log(user.getUser()) // huliuqing : 18

函數默認參數允許在函數沒有值或 undefined 被傳入時，使用默認形參

// ES6 之前
function multiply(a, b) {
    a = typeof a === "undefined" ? 1 : a;
    b = typeof b === "undefined" ? 1 : b;

    return a * b;
}

multiply(2) //2
multiply(5,2) //10

// ES6 之后

function multiply(a = 1, b = 1) {
    return a * b;
}

multiply(2) // 2
multiply(5,2)// 10

MDN

MDN let

MDN 解構賦值

MDN 對象初始化

MDN 默認參數