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

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

// a.js
export default 5;      // 默认导出

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

// 2. 动态的加载机制

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

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

// 1. "Symbol(desc)" 方法用于创建一个新的 symbol，参数 "desc" 仅用做 symbol 的描述，并不用于唯一标示 symbol
Symbol('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 iterable
iterObj[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 或 null
first.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#first
elControl.second;    // div#second
elControl.first = 5;    // div#first => 5
elControl.second = 10;  // div#second => 10
elControl();    // ['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)]