ES2015 – Destructuring & moduleIAN

let

let

const

Solv:Object.freeze

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

Destructuring

var a = 1; var b = 2; var c = 3;

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

解構不成功， foo 的值都會等於 undefined 。

不完全解構

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

Iterator

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

函數的參數也可以使用解構

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

（ 1）交換變數的值 [x, y] = [y, x];

（ 2）從函數返回多個值

（ 3）函數參數的定義

（ 4）提取 JSON數據

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

（ 6）遍歷Map結構

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

map");

Module

Before ES6 Require.js 、 CommonJS 、 AMD.js

"use strict"

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};

Module - export

export function multiply (x, y) { return x * y;};

function v1() { ... } function v2() { ... } export {

v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion

};

Module - import

// main.js import {firstName, lastName, year} from './profile'; function setName(element) {

element.textContent = firstName + ' ' + lastName; }

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 }

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

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));

Module - module

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

Module - export default

// export-default.js export default function () { console.log('foo');}

// import-default.js import customName from './export-default'; customName(); // 'foo'

Module – default vs normal

import crc32 from 'crc32'; // 對應的輸出 export default function crc32(){}

import { crc32 } from 'crc32'; // 對應的輸出 export function crc32(){};

一個模塊只能有一個默認輸出，因此 export deault 命令只能使用一次。

Reference

http://es6.ruanyifeng.com/#docs/promise http://es6.ruanyifeng.com/#docs/module