读深入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--

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容

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