ES6 語法中有什麼新東西？

什麼是 ES6？

• ECMAScript 6 是 JavaScript 第六版的規範。
• ES6 = ES2015。
  
  

JavaScript: var, let, const 差異

const, let 差異：

const, let 是 ES6 規範中才有的變數宣告方式。

• const： 常數。
• let： 變數。
  
  

let, var 差異：

• let：scope，變數的生存範圍，限縮在 block (大括號)裡。
• var：scope，變數的生存範圍，在整個 function 裡面。
  
  

Template literals

可直接使用多行字串

let str =`
hey
yo
su
`

在錢字號的大括號裡可放變數、程式碼

function sayHi(name) {
  console.log(`Hi, ${name.toUpperCase()}, now it is ${new Date()}`)
}

sayHi('nick')
// Hi, NICK, now it is Sat Jun 27 2020 16:08

Destructuring 解構

• 將舊陣列的值 (arr) 賦到新陣列 ([first, second])，會對應到相對的 index。

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

let [first, second] = arr
console.log(first, second)  // 1 2

• 將舊物件 (obj) 賦值給新物件 { name, age, country }，變數名稱要跟 key 名稱一樣。

const obj = {
  country: 'Taiwan',
  name: 'nick',
  age: 30,
}

let { name, age, country } = obj
console.log(country)

• 雙重解構，當結構是一樣的時候可對應起來

const obj = {
  country: 'Taiwan',
  name: 'nick',
  age: 30,
  family: {
    father: 'Dad',
  }
}

let { family: { father } } = obj
console.log(father)

Spread Operator 展開

• 將陣列展開

• 展開後傳入 function

let arr1 = [1, 2, 3]

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

console.log(add(...arr1)) // 6

• 也可將物件展開後放入物件

let obj1 = {
  a: 1,
  b: 2
}

let obj2 = {
  ...obj1,
  c: 3
}

console.log(obj2) // {a: 1, b: 2, c: 3}

• 若展開的 key 與其他 key 相同，放在後面的 key-value 會優先

let obj1 = {
  a: 1,
  b: 2
}

let obj2 = {
  ...obj1,
  b: 3
}

console.log(obj2)

• 這邊的 nestedArray 指向同一個記憶體位置

let nestedArray = [4]
let arr = [1, 2, 3, nestedArray]
let arr2 = [...arr]

console.log(arr === arr2)  // false
console.log(arr[3] === arr2[3])  // true

Rest Parameters 反向展開

• first 被配對走了，故 rest 是 [ 2, 3, 4 ]，也可不用 rest 而用其他變數名稱。

• 在引入函式後展開變成陣列

args 是一個假的陣列，是一個很像陣列的物件。

Defualt Patameters

• 先預設，若沒有傳到該參數也可順利運行程式

function repeat(str, times = 5) {
  let result = ''
  for (let i=1; i<=times; i++) {
    result += str
  }
  return result
}

console.log(repeat('a')) // aaaaa

• 在解構時也可使用預設值

const obj = {
  a: 1
}
const {a = 123, b = 'Hello'} = obj
console.log(a, b)  // 1 Hello

Arrow Function

• 當參數只有一個時，可省略小括號。
• 當函式只有一行時，可省略 return。

let arr = [1, 2, 3, 4, 5]
console.log(
  arr
    .filter(function(value) {
      return value > 1
    })
    .map(function(value) {
      return value * 2
    })
)   // [4, 6, 8, 10]

console.log(
  arr
    .filter(value => value > 1)
    .map(value => value * 2)
)   // [4, 6, 8, 10]

Babel

• 將尚未支援的新語法，用 bable 轉為舊語法
• ES6/7/8 => babel => ES5

安裝流程

1. babel 核心與 node 安裝

   npm install --save-dev @babel/core @babel/node
   

2. babel 環境設置

   npm install --save @babel/preset-env
   

3. 開新檔案 .babelrc 環境設置

{
  "presets": ["@babel/preset-env"]
}

1. npx @babel-node ${其他欲運行的程式} 即可支援新語法
   
   

Export & Import

輸出 & 引入

• export.js

  export function add(a, b) {
  return a + b
  }
  export const PI = 3.14
  

• import.js

import { add, PI } from './export'

console.log(add(5, 3), PI)

• npx babel-node import.js，支援新語法運行函式

8 3.14

as 可更改 export 出去的名稱

• export.js

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

const PI = 3.14

export {add as addFunction, PI}

• import.js

import { addFunction, PI } from './export'

console.log(addFunction(5, 3), PI)  // 8 3.14

• 在 import.js 可再用 as 更改名稱

import { addFunction as a, PI } from './export'

console.log(a(5, 3), PI)  // 8 3.14

• * 全部引入

import * as utils from './export'

console.log(utils.addFunction(5, 3), utils.PI)

export default 在另一個檔案 import 時，即可不使用大括號

• export.js

export default function add(a, b) {
  return a + b
}

export const PI = 3.14

• import.js

import add, { PI } from './export'
// import { default as add }, { PI } from './export'

console.log(add(5, 3), PI)

參考資源

• [JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest
• 鐵人賽：ES6 開始的新生活 let, const