Ian 20151002 es2015

1. ES2015 –Destructuring & module
IAN

2. let

3. let

7. const

8. Solv:
Object.freeze
const foo = Object.freeze({});
foo.prop = 123; // 不起作用

9. Destructuring
 var a = 1;
 var b = 2;
 var c = 3;
 ES6允許寫成
 var [a, b, c] = [1, 2, 3];

10.  解構不成功，foo的值都會等於undefined。
 不完全解構

12.  解構賦值不僅適用於var命令，也適用於let和const命令。
 Iterator

15.  解構失敗，變數的值等於undefined。

17. 函數的參數也可以使用解構
函數參數的解構也可以使用默認值

19.  （1）交換變數的值
 [x, y] = [y, x];
 （2）從函數返回多個值

20.  （3）函數參數的定義
 （4）提取JSON數據

21.  （5）函數參數的默認值
 避免了在函數體內部再寫var foo = config.foo || 'default foo';

22.  （6）遍歷Map結構

23.  （7）輸入模塊的指定方法
 const { SourceMapConsumer, SourceNode } = require("source-
map");

24. Module
 Before ES6
 Require.js 、 CommonJS、AMD.js
 "use strict"

25. Module - export
 // profile.js
 export var firstName = 'Michael';
 export var lastName = 'Jackson';
 export var year = 1958;
 // profile.js
 var firstName = 'Michael';
 var lastName = 'Jackson';
 var year = 1958;
 export {firstName, lastName, year};

26. Module - export
 export function multiply (x, y) { return x * y;};
 function v1() { ... }
 function v2() { ... }
 export {
 v1 as streamV1,
 v2 as streamV2,
 v2 as streamLatestVersion
 };

27. Module - import
 // main.js
 import {firstName, lastName, year} from './profile';
 function setName(element) {
 element.textContent = firstName + ' ' + lastName;
 }

28. Module - import
 import { lastName as surname } from './profile';
 多重加載
 import { Vehicle } from './Vehicle';
 class Car extends Vehicle {
 move () {
 console.log(this.name + ' is spinning wheels...')
 }
 }
 export { Car }

29.  export { es6 as default } from './someModule';
 // equals
 import { es6 } from './someModule';
 export default es6;

31. Module - *
 // circle.js
 export function area(radius) { return Math.PI * radius * radius;}
 export function circumference(radius) { return 2 * Math.PI * radius;}
 // main.js
 import { area, circumference } from './circle';
 console.log("圓面積：" + area(4));
 console.log("圓周長：" + circumference(14));
 import * as circle from './circle';
 console.log("圓面積：" + circle.area(4));
 console.log("圓周長：" + circle.circumference(14));

32. Module - module
 // main.js
 module circle from './circle';
 console.log("圓面積：" + circle.area(4));
 console.log("圓周長：" + circle.circumference(14));

33. Module - export default
 // export-default.js
 export default function () { console.log('foo');}
 // import-default.js
 import customName from './export-default';
 customName(); // 'foo'

34. Module – default vs normal
 import crc32 from 'crc32';
 // 對應的輸出
 export default function crc32(){}
 import { crc32 } from 'crc32';
 // 對應的輸出
 export function crc32(){};
 一個模塊只能有一個默認輸出，因此export deault命令只能使用一次。

35. Reference
 http://es6.ruanyifeng.com/#docs/promise
 http://es6.ruanyifeng.com/#docs/module