读深入ES6记[五]

ES6

第九章：使用Babel和Broccoli来编写ES6

1.流行的转译器

转译器，即源代码到源代码的编译器

• 非标准JS =》标准JS
  CoffeeScript
  TypeScript - 这个当前很火的样子

• 未来标准JS -》标准JS
  Babel - 首选，当前流行度最高非它莫属了
  traceur - Google家的

我们这里讲ES6，所以转译器也是讲用未来标准来书写JS。

转译器出现的意义在于ES标准的制定进度远远要快于JS引擎对标准的支持进度，所以通过转译器，当前我们可以用ES6的标准来书写代码，转译器可以帮我们转成友好的ES5标准甚至更前版本的JS源码
(写服务端程序时，如果你使用支持ES6的Node版本，就可以不用转译器啦)

2.结合构建工具

像Babel工具，你可以用命令行的方式或者在页面上直接引入有转译功能的脚本，但两种方式都不适合于实际的开发，只有结合构建工具，才能让开发和部署更加高效，友好。

Babel可和当前一些流行的构建工具组合工作，常见的组合有：

• Babel + Broccoli
  可参考样板工程：broccoli-babel-boilerplate
• Babel + Webpack
  可参考样板工程：babel-webpack-package-boilerplate
• Babel + Gulp
  可参考样板工程：ES6 Babel Browserify Boilerplate

---

第十章：集合

1.设计初衷

为避免用户数据与内置方法冲突而设计，所以它们不会把数据作为属性暴露出来，即不用通过map[key]或map.key来访问数据。
普通对象Object是一个开放的键值对集合，说它开放，是因为它无法识别哪些是数据，哪些是内置方法，都是属性。
下面例子中，如果是普通对象，如果不小心定义了一个对象本来就有的方法，则原来的方法就被覆盖了（冲突了）。
Map集合类型因为可区分出哪些是数据，所以我们只要在数据的范围内，用任何名称来定义方法都不会跟其它内置的方法造成冲突

var map = new Map();
map.set('toString', () => 'daniel');
console.log(map.toString.call(map));
console.log(map.get('toString').call(map));

var obj = {};
obj.toString = () => 'daniel'; // 内置的toString方法被覆盖了
console.log(obj.toString.call(obj));

2.Set的优势及其与数组的区别

1. Set不能包含相同的元素，即它自带排重功能。增加一个已存在的值会被忽略
2. Set不支持索引，即你不能像数组一样用坐标来访问数据。如这样的写法setOfWords[0]只会取得undefined
3. Set优化了包含检测速度

setOfWords.has('daniel') // 快
arrayOfWords.indexOf('daniel') !== -1 // 慢

3.Set的初始化

任何实现了迭代器接口，可遍历数据的对象都可用来初始化Set：new Set(iterable);

var set0 = new Set(); // 空初始值
var set1 = new Set([1, 2, 3]); // 数组初始值
var set2 = new Set(set1); // Set对象初始值
var set3 = new Set(new Map([['k', 'v']])); // Map对象初始值

4.Map的初始化

var map0 = new Map(); // 空初始值
var map1 = new Map([['key1', 'value1'], ['key2', 'value2']]); // 键值数组对初始值
var map2 = new Map(map1); // Map对象初始值

5.遍历顺序

Set和Map的数据遍历顺序跟数据的插入顺序相同，而不是随机的

6.内存泄漏问题

Map和Set都为内部的键或值都保持了强引用，所以除非集合主动清除这些键或值，否则这些键或值的对象会因为存在对象引用而无法回收，最终导致可能的内存泄漏问题。
为了解决这个问题，引入了WeakMap和WeakSet。那我们来做些实验吧

• Set和WeakSet

先试验下Set：从结果可看出obj被设为null，但对象所占内存还是没释放

Set demo code

Set result

再试验下WeakSet：从结果可看出obj被设为null后，对象已经不存在了

WeakSet demo code

WeakSet result

• Map和WeakMap

先试验下Map：把键和值的对象都设为null，但它们所占的内存依然没释放

Map demo code

Map result

再试验下WeakMap：可看出把键和值都设为null后，对象的内存也释放了

WeakMap demo code

WeakMap result

7.WeakSet和WeakMap特别之处

1. WeakMap只支持new，has，get，set和delete

2. WeakSet只支持new，has，add和delete

3. WeakMap的键和WeakSet的值必须是对象
   WeakSet的值必须是对象。这个比较好理解，它的存在就是为了解决对象引用释放的问题，如果是像string, number这样的基础类型，根本就用不着
   但WeakMap的键必须是对象，这，有点难用和难理解，作者是说如果一个键仍被使用，相应的值就仍被使用

4. 没实现迭代器，不可遍历

这些小心设计的限制让垃圾回收机制能回收仍在使用中的弱集合里的无效对象

---

这就是第九，十章的学习情况，后面将继续其它章节的学习记录。

前面章节的学习情况请看：
《读深入ES6记[一]》
《读深入ES6记[二]》
《读深入ES6记[三]》
《读深入ES6记[四]》

--EOF--