读深入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可和当前一些流行的构建工具组合工作,常见的组合有:


第十章:集合

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.遍历顺序

SetMap的数据遍历顺序跟数据的插入顺序相同,而不是随机的

6.内存泄漏问题

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

  • SetWeakSet

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

Set demo code
Set result

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

WeakSet demo code
WeakSet result
  • MapWeakMap

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

Map demo code
Map result

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

WeakMap demo code
WeakMap result

7.WeakSetWeakMap特别之处

  1. WeakMap只支持newhasgetsetdelete

  2. WeakSet只支持newhasadddelete

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

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

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


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

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

--EOF--

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.Set 基本用法 ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本...
    雨飞飞雨阅读 1,873评论 0 7
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 916评论 0 3
  • 本人是android开发的,由于最近React Native的火热,再加上自己完全不懂JS的语法,俗话说的好"落后...
    Bui_vlee阅读 294评论 0 0
  • 《富贵竹》/前行者 富贵竹啊 我为你伤心难过, 想当初你郁郁葱葱,杆粗叶肥,那强劲的生命力,让许多花卉黯然失色...
    前行者1一常德一自由人阅读 343评论 0 1
  • 心简单,世界就简单,幸福才会生长;心自由,生活就自由,到哪都有快乐。没心没肺,才能活着不累 放下顾虑,剪掉烦恼,勇...
    行走的鹿阅读 926评论 5 21