const. let. Modules. Destructuring

let and const

• let: 一般常用的var是function scope的，而 let是block scoped，也就是在{..}內可見。
• const: 和let一樣的scope，並且不能將reference改指到其他物件，但可以修改所reference物件的內容。
• 老師建議使用的優先權：const > let > var

import and export with ES6 Modules

• 你可以export一個以上的item
• 你可以只import部分item而非全部

// math.js
export function add (x,y) {
  return x + y
}
export function multiply (x,y) {
  return x * y
}
export function divide (x,y) {
  return x / y
}
// main.js
import { add, multiply } from './math'
add(1,2) // 3
multiply(3,4) // 12

• 你也可以用import * as X將該module所有的東西存在一個變數中

// math.js (same as above)
// main.js
import * as math from './math'
math.add(1,2) // 3
math.multiply(3,4) // 12
math.divide(4,4) // 1

• 你也可以只export一個default item

// math.js
export default function doAllTheMath (x,y,z) {
  return x + y + x * x * y * z / x / y / z
}
// main.js
import doAllTheMath from './math'
doAllTheMath(1,2,3) // 4

• 你甚至可以混合搭配使用

// math.js
export function add (x,y) {
  return x + y
}
export default function doAllTheMath (x,y,z) {
  return x + y + x * x * y * z / x / y / z
}
// main.js
import doAllTheMath, { add } from './math'
doAllTheMath(1,2,3) // 4
add(1,2) // 3

Object Destructuring

• Destructuring可以從object跟array中取出data
• 以下例子中，將props的各項目存到各個變數裡面

function register (props) {
  var onChangeEmail = props.onChangeEmail;
  var email = props.email;
  var onChangePassword = props.onChangePassword;
  var password = props.password;
  var submit = props.submit;
...

• 改用Destructuring將props內的資料存到與property同名的變數變得比較簡潔

function register (props) {
  var { onChangeEmail, email, onChangePassword, password, submit }  = props;
...

• 甚至可以直接將{...}替代props的參數

function register ({ onChangeEmail, email, onChangePassword, password, submit }) {
...