[Week 3] JavaScript - ES6 語法

宣告變數的新選擇：let、const

const 常數

也就是 constant，代表這個數是不會變更的。
可以用於不想改變的變數，或是本來就不會改變的數值（例如：圓周率）

const PI = 3.14;

作用域

var 的作用域是整個 function 都能使用到 var 的變數
而在 ES6 新增的 let 和 const，則是塊級作用域

例如目前有個 function 是用 var 來設定變數：

function test() {
  if (10 > 5) {
    var a = 10
  }
  console.log(a)
}

test() // 結果即得到 10

因為 var 的生存作用域是整個 function 所以是可以得到結果的。
但如果把第三行換成 let a = 10 時，生存範圍就只會在 if 的 block 裡面，所以會取不到 a 的變數。

在學了 ES6 以後，盡量使用 let 而不使用 var，原因是作用域越小，才越不會干擾到其他因素，debug 時也會比較好 debug。

模板字串符 Template Literals

在 ES6 以前，如果要輸出多行字串或有許多字串要拼接的話，寫法非常繁複，如下：

多行字串

舊寫法：

var str = '' + '\n' +
'hello' + '\n' +
'hey'
'hi'

console.log(str)
// 即得：
//   
// hello
// hey

註：'\n' 是換行字元的意思。

改成模板字串符以後：

let str = `
hello
hey
hi
`
console.log(str)
// 即可得到和舊版寫法一樣的結果

字串拼接

舊寫法：

let name = Mily

console.log('Hello, ' + 'my ' + 'name ' + 'is ' + name )

改成模板字串符以後：

let name = Mily

console.log(`Hello, my name is ${name}`)

Destructuring：解構

範例 1

在 ES6 以前，想要取得陣列的數值時，只能用這樣的寫法：

const arr = [1, 2, 3, 4]

var first = arr[0]
var second = arr[1]
var third = arr[2]
var fourth arr[3]

console.log(second, third)

現在 ES6 後可以寫成：

const arr = [1, 2, 3, 4]

var [first, second, third, fourth] = arr

console.log(second, third)

範例 2

舊寫法：

const obj = {
  name: 'Mily',
  age: 25,
  address: 'taiwan'
}

var name = obj.name
var age = obj.age
var address = obj.address

console.log(address)

ES6 解構後：

const obj = {
  name: 'Mily',
  age: 25,
  address: 'taiwan'
}

var {name, age, adress} = obj

console.log(address)

也可以多層包覆下去解構哦！

Spread Operator：把東西展開

範例 1

現在有兩個陣列：

var arr = [1, 2, 3]
var arr2 = [4, 5, 6]

console.log(arr2)
// 即得 [4, 5, 6]

如果把 arr 放進 arr2 裡面

var arr = [1, 2, 3]
var arr2 = [4, 5, 6, arr]

console.log(arr2)
// 即得 [4, 5, 6, [1, 2, 3]]

接下來在 arr 前面加入展開運算符 ...

var arr = [1, 2, 3]
var arr2 = [4, 5, 6, ...arr]

console.log(arr2)
// 即得 [4, 5, 6, 1, 2, 3]

範例 2

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

var arr = [1, 2, 3]
console.log(add(...arr))
// 即得 6
// 如果沒有加展開運算符，這題就得不出答案了

Rest Parameters：「反向」展開

範例 1

var arr = [1, 2, 3, 4]
var [first, ...rest] = arr

console.log(rest)
// 即得 [2, 3, 4]

範例 2

var obj = {
  a: 1,
  b: 2,
  c: 3
}

var{a, ...obj2} = obj

console.log(obj2)
// 即得 {b: 2, c: 3}

Spread Operator（展開）和 Rest Parameters（反向展開）的綜合範例：

var obj = {
  a: 1,
  b: 2
}

var obj2 = {
 ...obj, // 展開
 c: 3
}

var (a, ...rest) = obj2
// 這裡的 ...rest 是反向展開

console.log(rest)
// 即得 {b:2, c: 3}

加上預設值：Default Parameters

可以在 function 內加入預設的數值
（待補）

Arrow Function：箭頭函式