[2019-10-11] JavaScript 程式基礎 - 2

[gracekrcx]

Babel 簡介與基本使用方法

babel 解決的問題：

1. 如果你像要用某種支援度不高的語法，你就開發一個工具，把你寫的語法，轉換成舊的語法，這樣瀏覽器就可以支援了
2. ES6/7/8 => Babel => ES5 或更舊，讓瀏覽器可以支援

ES6 中的 Import 與 Export module

// 輸出
// export function ...
// export const ...
export function add (a,b){
 return a+b
} 

export const PI = 3.14

// 引入
import {add, PI} from './xxx'

// 引入：改名字，可以用 as 取別名
import { add as addFunction } from ...

// 引入：全部一起 import 進來
import * as utils from '....'
console.log(utils.add(), add.PI)

export default （export 出去的名字是 default）

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

export const PI = 3.14

// 引入 (底下兩句相同意思) import {default as add} from './xxx' import add from './xxx'

// 引入 PI import add, {PI} from './xxx'

```js
export default 'Wonder land'

Default exports:

// export feature declared earlier as default
export { myFunction as default };

// export individual features as default
export default function () { ... } 
export default class { .. }

剩餘的展開：Rest Parameters

// 陣列
// 陣列看起來只有位置上的對稱
var arr = [1,2,3,4]
var [fir, sec, ...rest] = arr
console.log(fir) //  [1]
console.log(sec) //  [2]
console.log(rest) //  [3, 4]
rest.map(n => n+10) // [13, 14]

// 物件
var obj = {
 a:1,
 b:2,
 c:3
}
// 解構 + Rest Parameters
// 剩餘的 key（沒有被配對到的 key）都會進入 rest，把剩餘的 key 都集合起來

var {a, ...restObj} = obj
console.log(a, restObj)  // 1  {b: 2, c: 3}

var {b, ...restObj} = obj
console.log(b, restObj) // 2 {a: 1, c: 3}

var {ccc, ...restObj} = obj
console.log(ccc, restObj) // undefined {a: 1, b: 2, c: 3}

// 用在 function 的參數裡，會包成一個陣列
function add(...rest) {
 console.log(rest)
}

add(1,2,3,4,5)  //  [1, 2, 3, 4, 5]
add('12345') // ["12345"]

// 多個參數
function add(a, ...rest) {
 console.log(a)
 console.log(rest)
}
add(1,2,3,4,5) 
// 1 [2, 3, 4, 5]

加上預設值：Default Parameters

// 用在 function 
function add (a=10, b=20) {
 return a+b
}
add() // 30

// 用在解構
const obj = {
 c : 1,
 d : 2
}

const { a = 100 , b =200 } = obj
console.log(a,b) // 100 200

更多 ES6 新增的語法

[gracekrcx]

Babel compiles JSX down to React.createElement() calls.

These two examples are identical:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);