关于es6+新语法使用场景总结

[Hibop]

Symbol

1. 魔术字符串（在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值），改由含义清晰的变量代替。

// bad
const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'

// good
const TYPE_AUDIO = Symbol(‘AUDIO’)
const TYPE_VIDEO = Symbol(‘VIDEO’)
const TYPE_IMAGE = Symbol(‘IMAGE’)

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error('Unknown type of resource')
  }
}

2. 私有变量: Symbol 也可以用于私有变量的实现

const Example = (function() {
    var _private = Symbol('private');

    class Example {
        constructor() {
          this[_private] = 'private';
        }
        getName() {
          return this[_private];
        }
    }

    return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

3. Symbol.species：联系class上下文来学习
4. Symbol.iterator：遍历相关属性

Set（一维存key） 和 Map（二维存key和value）

实例化的set和map是类数组，需要...或者Array.from()将其还原为数组

1. 数组去重

[...new Set(array)]

2. 条件语句的优化

// bad
function test(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

test('yellow'); // ['banana', 'pineapple']

// good
const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};

function test(color) {
  return fruitColor[color] || [];
}

// better
const fruitColor = new Map()
  .set('red', ['apple', 'strawberry'])
  .set('yellow',  ['banana', pineapple])
  .set('purple',  ['grape', 'plum']);

function test(color) {
  return fruitColor.get(color) || []
}

for of

可遍历： Array, Set, Map, arguments, NodeList, Generator, String

ES2015 引入了 for..of 循环，它结合了 forEach 的简洁性和中断循环的能力 [for...in break或者continue对遍历无影响，当有return时会报错！](https://juejin.im/entry/5884717a1b69e6005919f0d3)

const map = new Map([['Li', 23], ['Zhang', 18]])  //  {"Li" => 23, "Zhang" => 18}
// 遍历key
for (let key of map.keys()) {
// ...
}

// 遍历value
for (let key of map.values()) {
// ...
}

// 遍历key和value
for (let [key, value] of map.entries()) {
// ...
}