[Week 3] JavaScript - ES6 語法


Posted by Mily on 2020-09-12

宣告變數的新選擇: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:箭頭函式


#javascript







Related Posts

[day08] Closure & Private:番外短篇 隱私成員

[day08] Closure & Private:番外短篇 隱私成員

[28] 文法 - 述句完成值、運算式副作用、區塊

[28] 文法 - 述句完成值、運算式副作用、區塊

九月 秋天 心裡暖烘烘的

九月 秋天 心裡暖烘烘的


Comments