[ week3 ] ES6 語法

JS 是根據

變數新選擇 let & const

用法與 var 相同，但三者有些差異，提到 var 與 let 的差異，必須先提到作用域 Scope

作用域（ Scope ），就是變數的生存範圍，

層級問題：變數會先從通一個層級找，如果找不到他會往上找，直到他找到。
例如：

var a = 10
function test(){
    console.log(a)
}
test() //會得到 a = 0

但當我們在 function 中宣告變數，並在外層 console.log 變數是找不到變數的

function test(){
   var a = 10
}
console.log(a) //會得到 a is not defind

就上層範例來看，我們可以得知在下層看得到上面，在上層就看不到下面
再 ES6 以前，使用 var 宣告變數，他的作用域會僅限一個 function裡面

let

let 的作用域，則是以 block 區塊為範圍。

const

全名為 Constant 常數的意思，就是這個數絕對不會改變，但如果是使用「物件、陣列」的方式，根據變數儲存模型的概念，卻是可以改變，可參考從博物館寄物櫃理解變數儲存模型
例如：

const b ={
  number: 123
}
console.log(b) // 會得到 b { number: 123 }

但根據變數儲存的概念，我們宣告 b 時，他是記錄儲存空間，並指向你賦予它的值，所以當我們在宣告後，又重新賦值給它，就會更動，如下

const b ={
  number: 123
}
b.number = 345
console.log(b) // 就會更動到 b.number 的值，因此會得到 b { number: 345 }

所以當我們遇到不想要，這個變數「 被改變、覺得它不會改變 」，就可以使用 const 宣告。

Template Literal

過去我們只能使用字串拼接的方式，特別是多行字串時，需要透過拼接的方式，ES6 後新增 Template strings 的做法

let name = linda
原 ('my name is', + name）
字串模板 `my name is ${name}` 就可以都過 ${變數名稱} 直接帶入變數名稱

不需要用混用加號，常常不小心與單引號混到，造成程式碼出錯，同時我們也可在 ${} 中放入程式碼，他會帶入功能

let name = 'linda'
console.log(`my name is ${name.toUpperCase()}`)
//會得到 my name is LINDA

Destructuring 解構

陣列

let name = [1, 3, 42, 4]
let [ , b, c, d] = name
console.log( b, c, d)  會得到 3 42 4

物件

let obj = {
  title: 'test',
  time: '2hr',
  target: 'play'
}
let { target, time} = obj
console.log( target, time)

雙層解構

let obj = {
  title: 'test',
  time: '2hr',
  target: {
    long:'happy',
    short: 'job'
  }
}
let { target: {long} } = obj
console.log(long)  // 得到 work

優點：
縮短同一物件或陣列內的宣告行數，縮短程式碼
適用雙重解構，但只有最底層會被解出來

Spread Operator 脫掉束縛...展開吧

範例一：

    let arr = [1, 2, 3]
    let arr2 = [3, 4, ...arr]  //展開 arr 並將 arr 的內容放入 new 陣列   中
    console.log(arr2)  //得到 [3, 4, 1, 2, 3]

範例二：

    let arr = [1, 2, 3]

    function sum(a, b, c) {
      return a + b +c
    }

    console.log(sum(...arr))  //在 function 中串入 arr 並展開，得到 6
    console.log(sum(arr)) //但直接放 arr 會出錯

Rest Parameters 反向展開

常與「 解構功能 」一起使用，只能放在物件或陣列的最後面

Default Parameters 預設值

用於 function 上，當你 call function ，且為帶入變數時，function 會直接幫你帶入預設值，範例如下：
若不用付funcion 上，則會搭配解構的功能使用
js

結論

1. 盡量使用 let 來取代 var 宣告，因為作用域越小越好，才不會互相干擾
2. 、、可以多使用 Template Literal
3. ES6 語法不熟悉也沒關係，使用你有把握的語法就好，不過可以多嘗試