ES6 你可能不知道的事 - 进阶篇

// 1. export default 可以做默认导出

// a.jsexport default 5;      // 默认导出

// b.jsimport b, {a} from './a.js';    // 默认导入，不需要加花括号

// 2. 动态的加载机制

// a.jsexport let a = 10;export let b = 10;export function add() {  a = 15;  b = 20;  return a+b;};

// b.jsimport {a, b, add} from './a.js';a+b;    // 20add();  // 35a+b;    // 35

// 1. "Symbol(desc)" 方法用于创建一个新的 symbol，参数 "desc" 仅用做 symbol 的描述，并不用于唯一标示 symbolSymbol('abc') === Symbol('abc');    // false，'abc'仅作为两个 symbol 的描述信息

// 2. "Symbol.for(key)" 方法，参数 "key" 是用于在全局作用域中标示 symbol 的唯一键，同时也作为该 symbol 的描述信息Symbol.for('abc') === Symbol.for('abc');    // true，左侧为创建，右侧为获取Symbol.for('abc') === Symbol('abc');        // false

// 3. symbol 无法被 for...in 遍历到 (不可枚举)，可以利用 Object.getOwnPropertySymbols 获取const obj = {  [Symbol('abc')]: 'abc',  'abc': 'abc'};for(var i in obj){  // abc  console.log(i);}Object.getOwnPropertySymbols(obj);    // [Symbol(abc)]

// 1. 迭代器规范const iter = {  counter: 0,  next(){    // 迭代器是实现了 "next()" 函数的对象    if(++this.counter < 10){      return {    // 返回一个含有两个键值对的对象，Object {done => boolean, value => any}        done: false,        value: this.counter      }    }else{      this.counter = 0;      return {    // done = true 时，value非必须        done: true      }    }  }};

// 2. 可迭代规范，实现 "Symbol.iterator => func()" 键值对；而 "func()" 返回一个 迭代器对象const iterObj = {};for(var i of iterObj){};    // TypeError: iterObj is not iterableiterObj[Symbol.iterator] = function() {  return iter;};for(var i of iterObj){  console.log(i);    // 1,2,3,4,5,6,7,8,9};

// 1. Map 的构造函数可以传入一个 “可迭代的对象（例如数组）”，其中包含键值对数组const first = new Map([['a', 1], [{'b': 1}, 2]]);    // Map {"a" => 1, Object {b: 1} => 2}

// 2. Map 的键可以是任何值，甚至是 undefined 或 nullfirst.set(null, 1).set(undefined, 0);    // Map {"a" => 1, Object {b: 1} => 2, null => 1, undefined => 0}

// 1. Set 的构造函数可以传入一个 “可迭代的对象（例如数组）”，其中包含任意值const first = new Set(['a', 1, {'b': 1}, null]);    // Set {"a", 1, Object {b: 1}, null}

// 2. Set 无法插入重复的值first.add(1);    // Set {"a", 1, Object {b: 1}, null}

// 1. WeakMap 键必须是对象const err = new WeakMap([['a',1]]);    // TypeError: Invalid value used as weak map key

// 2. WeakMap/WeakSet 的弱引用const wm = new WeakMap([[{'a':1},1]]);    // Object {'a': 1} 会正常被 GC 回收

const ws = new WeakSet(); ws.add({'a':1});    // Object {'a': 1} 会正常被 GC 回收

const obj = {'b': 1};ws.add(obj);        // Object {'b': 1} 不会被正常 GC 回收，因为存在一个强引用obj = undefined;    // Object {'b': 1} 会正常被 GC 回收

// 一个简单的多层嵌套回调函数的例子 (Node.js)const git = require('shell').git;const commitMsg = '...';

git.add('pattern/for/some/files/*', (err) => {  if(!err){    git.commit(commitMsg, (err) => {      if(!err){        git.push(pushOption);      }else{        console.log(err);      }    });  }else{    console.log(err);  }});

// 上例用 Promise 实现// 假定 git.add, git.commit, git.push 均做了 Promise 封装，返回一个 Promise 对象const git = require('shell').git;const commitMsg = '...';

git.add('pattern/for/some/files/*')  .then(() => git.commit(commitMsg))  .then(git.push)  .catch((err) => {    console.log(err);  });

// 上例用 Generator 实现// 假定 git.add, git.commit, git.push 均做了 Promise 封装，返回一个 Promise 对象const co = require('co');const git = require('shell').git;

co(function* (){  const commitMsg = '...';      // 共享的局部变量

yield git.add('pattern/for/some/files/*');  yield git.commit(commitMsg);  yield git.push();}).catch((err) => {  console.log(err);});

// 上例用 async-await 实现// 假定 git.add, git.commit, git.push 均做了 Promise 封装，返回一个 Promise 对象const git = require('shell').git;

(async function(){  const commitMsg = '...';      // 共享的局部变量

try{    await git.add('pattern/for/some/files/*');    await git.commit(commitMsg);    await git.push();  }catch(err){    console.log(err);  }})();

// 简单 element 选择控制工具的实现const cacheElement = function(target, prop) {  if(target.hasOwnProperty(prop)){      return target[prop];    }else{      return target[prop] = document.getElementById(prop);    }}

const elControl = new Proxy(cacheElement, {  get: (target, prop) => {    return cacheElement(target, prop);  },  set: (target, prop, val) => {    cacheElement(target, prop).textContent = val;  },  apply: (target, thisArg, args) => {    return Reflect.ownKeys(target);  }});

elControl.first;     // div#firstelControl.second;    // div#secondelControl.first = 5;    // div#first => 5elControl.second = 10;  // div#second => 10elControl();    // ['first', 'second']

// 1. Proxy 的自定义方法中，通过 Reflect 调用原生行为const customProxy = new Proxy({  'custom': 1}, {  get: (target, prop) => {    console.log(`get ${prop} !`);    return Reflect.get(target, undefined, prop);  }});

customProxy.custom;  // get custom, 1

// 2. 与 Object 对象上已经开放的操作原生行为方法相比，语法更加清晰易用（例如：Object.hasOwnProperty 与 Reflect.has）const symb = Symbol('b');const a = {  [symb]: 1,  'b': 2};

if(Reflect.has(a, symb) && Reflect.has(a, 'b')){  // good  console.log('good');}Reflect.ownKeys(a);  // ["b", Symbol(b)]