[ week3 ] ES6 語法


Posted by vick12052002 on 2020-07-14

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 語法不熟悉也沒關係,使用你有把握的語法就好,不過可以多嘗試

#ES6 #javascript







Related Posts

DAY 02 : 演算法基本概念

DAY 02 : 演算法基本概念

Python 爬蟲分析大樂透開獎號碼

Python 爬蟲分析大樂透開獎號碼

Day04: state 及 props 介紹

Day04: state 及 props 介紹


Comments