前言

今天這篇主要是介紹ES6新增的語法(但沒有把全部新增的都拿出來講)，在之前還沒講到都沒使用(例如一直用var在宣告變數)。Huli大說沒先教學ES6是希望大家新舊的語法都要會用。

今天內容

• let 與 const
• Template Literals
• Destructuring
• Spread Operator
• Rest Parameters
• Default Parameters

筆記

• let與const：這是ES6新增的兩種宣告方式，要講這兩個之前要先了解作用域Scope(變數的生存範圍)，在ES6之前變數的最小作用域是function。

  var a = 10
  function test() {
    var a = 20
    console.log(a)   //20
  }
  test()   //這裡只會抓到function裡的a值
  
  function test2() {
    var b = 20
  }
  test2()
  console.log(b)  //這樣會找不到b而報錯：b is not defined
  

  而ES6所新增的let與const的最小作用域是block{}

  function test() {
    if (10 > 5) {
      var a = 10
    }
    console.log(a)  // 10
  }
  test()
  // a 用var宣告在if的block裡，但依然在function內，所以是可被找到的
  
  function test2() {
    if (10 > 5) {
      let b = 10
    }
    console.log(b)  // b is not defined
  }
  test2()
  // b 用let宣告在if的block裡，但作用域的關係，所以外面找不到。
  

  let與const的差異在於：const用於宣告值不變的變數。

  let a = 10
  const b = 15
  b = 20
  console.log(a,b) //b重覆給值會報錯Assignment to constant variable.
  

  然而使用物件可以卻可以改到裡面的值，這是因為變數的型別。const c的記憶體位置沒有被改變。

  const c = {
    number: 10
  }
  c.number = 20
  console.log(c) //{ number: 20 }
  

  差異	初始值	重複宣告	重複賦值	Scope	Hoisting
  var	X	O	O	function	宣告提升，值不提升
  let	X	X	O	block{}	TDZ
  const	O	X	X	block{}	TDZ

  初始值：在宣告時是否一定要給值。X=可不用，O=必要。
  TDZ：暫時性死區。

• Template Literals
  在處理字串上要做到換行或是連接上，要使用換行符號(\n)或是連接符號(+)

  var str = "aaa" + "\n" +  "bbb" + "\n" + "ccc"
  console.log(str)
  //aaa
  //bbb
  //ccc
  
  function sayhi(name) {
      console.log("Hello," + name.toUpperCase() + " Now is " + new Date())
  }
  sayhi("fang")
  // Hello,FANG Now is Fri Sep 30 2022 11:16:27 GMT+0800 (台北標準時間)
  

  使用 ` 來更簡潔的完成。

  var str2 = `aaa
  bbb
  ccc`
  console.log(str2)
  
  function sayhi2(name) {
      console.log(`hello,${name.toUpperCase()} Now is ${new Date()}`)   //運用${}來內嵌
  }
  sayhi2("fang") 
  

• Destructuring 解構，在ES6之前要用變數拿裡面的資料做法只能一行一行分開命名。但在有了Destructuring之後可以更簡單的寫。

  const arr = [1, 2, 3]
  //下面三行可以用解構寫成一行
  var first = arr[0]
  var second = arr[1]
  var third = arr[2]
  //解構：
  var [first,second,third ] = arr  //命名可以自取
  console.log(second,third) //2 3
  
  const obj = {
    name: "fang",
    age: 20,
    address: "taiwan"
  }
  //下面三行可以用解構寫成一行
  var name = obj.name
  var age = obj.age
  var address = obj.address
  //解構：
  var {name, age, address} = obj //命名要對應到上面obj內的key不然會undefined
  console.log(age,address)
  

• Spread Operator 用...把值展開

  var arr1 = [1, 2, 3]
  var arr2 = [arr1, 4, 5, 6, ]  //[ 4, 5, 6, [ 1, 2, 3 ] ]
  // arr2 內有一個arr1，可以加上...把arr1給展開
  var arr2 = [...arr1, 4, 5, 6, ] //[ 1, 2, 3, 4, 5, 6 ]
  
  function add(a, b, c) {
    return a + b + c
  }
  var arr = [1,2,3]
  console.log(add(...arr)) //加上...可以取到arr的值
  
  //複製array但不相等
  var arr1 = [1, 2, 3]
  var arr2 = [...arr1]
  console.log(arr1 === arr2) //fslse
  

  var obj1 = {
    a: 1,
    b: 2
  }
  var obj2 = {
    ...obj1,
    b: 3,  //有和objㄧ樣key的值會依書寫先後順序決定
    c: 3
  }
  console.log(obj1,obj2)
  // obj1內的值被複製貼到obj2內，
  

• Rest Parameters

  var obj1 = {
    a: 1,
    b: 2
  }
  var obj2 = {
      ...obj1,  //展開
      c: 3
  }
  var {a, ...rest} = obj2
  console.log(a, rest)  //1 { b: 2, c: 3 }
  

• Default Parameters：function的參數可以給預設值

  function repeat(str = "abc", times = 1) {
      return str.repeat(times)
  }
  console.log(repeat()) //即使這邊沒有給值，還是會依預設值執行，不會報錯。
  

  解構上運用

  const obj = {
      a: 1
  }
  const {a = 123 , b = "hello"} = obj  //在解構時給預設值
  console.log(a,b)  //1 hello
  //原obj沒有b值還是會因為有預設值而被印出，而a不會印出預設值。
  

後面還有一些，明天待續～

參考資料

• ECMAScript
• Template literals (Template strings)
• Destructuring assignment
• Spread syntax
• Rest parameters
• Default parameters