diff --git a/docs/class.md b/docs/class.md index b644ffc..00ee674 100644 --- a/docs/class.md +++ b/docs/class.md @@ -335,7 +335,7 @@ class Foo {} ### 基本用法 -Class之间可以通过extends关键字，实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。 +Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。 ```javascript class ColorPoint extends Point {} diff --git a/docs/reference.md b/docs/reference.md index 4efe1ef..6c2b2dd 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -45,6 +45,7 @@ - Dwayne Charrington, [What Are Weakmaps In ES6?](http://ilikekillnerds.com/2015/02/what-are-weakmaps-in-es6/): WeakMap数据结构介绍 - Axel Rauschmayer, [ECMAScript 6: maps and sets](http://www.2ality.com/2015/01/es6-maps-sets.html): Set和Map结构的详细介绍 - Jason Orendorff, [ES6 In Depth: Collections](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/)：Set和Map结构的设计思想 +- Axel Rauschmayer, [Converting ES6 Maps to and from JSON](http://www.2ality.com/2015/08/es6-map-json.html): 如何将Map与其他数据结构互相转换 ## 字符串 @@ -60,9 +61,12 @@ ## 对象 -- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) - Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observe()的概念 - Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法，实现数据对象与DOM对象的双向绑定 + +## Proxy和Reflect + +- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) - Axel Rauschmayer, [Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy详解 - Daniel Zautner, [Meta-programming JavaScript Using Proxies](http://dzautner.com/meta-programming-javascript-using-proxies/): 使用Proxy实现元编程 - Tom Van Cutsem, [Harmony-reflect](https://github.com/tvcutsem/harmony-reflect/wiki): Reflect对象的设计目的 @@ -85,7 +89,6 @@ - Axel Rauschmayer, [Iterators and generators in ECMAScript 6](http://www.2ality.com/2013/06/iterators-generators.html): 探讨Iterator和Generator的设计目的 - Axel Rauschmayer, [Iterables and iterators in ECMAScript 6](http://www.2ality.com/2015/02/es6-iteration.html): Iterator的详细介绍 - Kyle Simpson, [Iterating ES6 Numbers](http://blog.getify.com/iterating-es6-numbers/): 在数值对象上部署遍历器 -- Mahdi Dibaiee, [ES7 Array and Generator comprehensions](http://dibaiee.ir/es7-array-generator-comprehensions/)：ES7的Generator推导 ## Generator @@ -100,6 +103,7 @@ - Harold Cooper, [Coroutine Event Loops in Javascript](http://syzygy.st/javascript-coroutines/): Generator用于实现状态机 - Ruslan Ismagilov, [learn-generators](https://github.com/isRuslan/learn-generators): 编程练习，共6道题 - Steven Sanderson, [Experiments with Koa and JavaScript Generators](http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/): Generator入门介绍，以Koa框架为例 +- Mahdi Dibaiee, [ES7 Array and Generator comprehensions](http://dibaiee.ir/es7-array-generator-comprehensions/)：ES7的Generator推导 ## Promise对象 diff --git a/docs/set-map.md b/docs/set-map.md index a689c22..126fbf0 100644 --- a/docs/set-map.md +++ b/docs/set-map.md @@ -322,7 +322,7 @@ data["[Object HTMLDivElement]"] // metadata 上面代码原意是将一个DOM节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串`[Object HTMLDivElement]`。 -为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。 +为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。 ```javascript var m = new Map(); @@ -586,6 +586,110 @@ map.forEach(function(value, key, map) { 上面代码中，forEach方法的回调函数的this，就指向reporter。 +### 与其他数据结构的互相转换 + +**（1）Map转为数组** + +前面已经提过，Map转为数组最方便的方法，就是使用扩展运算符（...）。 + +```javascript +let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']); +[...myMap] +// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] +``` + +**（2）数组转为Map** + +将数组转入Map构造函数，就可以转为Map。 + +```javascript +new Map([[true, 7], [{foo: 3}, ['abc']]]) +// Map {true => 7, Object {foo: 3} => ['abc']} +``` + +**（3）Map转为对象** + +如果所有Map的键都是字符串，它可以转为对象。 + +```javascript +function strMapToObj(strMap) { + let obj = Object.create(null); + for (let [k,v] of strMap) { + obj[k] = v; + } + return obj; +} + +let myMap = new Map().set('yes', true).set('no', false); +strMapToObj(myMap) +// { yes: true, no: false } +``` + +**（4）对象转为Map** + +```javascript +function objToStrMap(obj) { + let strMap = new Map(); + for (let k of Object.keys(obj)) { + strMap.set(k, obj[k]); + } + return strMap; +} + +objToStrMap({yes: true, no: false}) +// [ [ 'yes', true ], [ 'no', false ] ] +``` + +**（5）Map转为JSON** + +Map转为JSON要区分两种情况。一种情况是，Map的键名都是字符串，这时可以选择转为对象JSON。 + +```javascript +function strMapToJson(strMap) { + return JSON.stringify(strMapToObj(strMap)); +} + +let myMap = new Map().set('yes', true).set('no', false); +strMapToJson(myMap) +// '{"yes":true,"no":false}' +``` + +另一种情况是，Map的键名有非字符串，这时可以选择转为数组JSON。 + +```javascript +function mapToArrayJson(map) { + return JSON.stringify([...map]); +} + +let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']); +mapToArrayJson(myMap) +// '[[true,7],[{"foo":3},["abc"]]]' +``` + +**（6）JSON转为Map** + +JSON转为Map，正常情况下，所有键名都是字符串。 + +```javascript +function jsonToStrMap(jsonStr) { + return objToStrMap(JSON.parse(jsonStr)); +} + +jsonToStrMap('{"yes":true,"no":false}') +// Map {'yes' => true, 'no' => false} +``` + +但是，有一种特殊情况，整个JSON就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为Map。这往往是数组转为JSON的逆操作。 + +```javascript +function jsonToMap(jsonStr) { + return new Map(JSON.parse(jsonStr)); +} + +jsonToMap('[[true,7],[{"foo":3},["abc"]]]') +// Map {true => 7, Object {foo: 3} => ['abc']} +``` + ## WeakMap WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。 @@ -595,7 +699,6 @@ WeakMap的设计目的在于，键名是对象的弱引用（垃圾回收机制 下面是WeakMap结构的一个例子，可以看到用法上与Map几乎一样。 ```javascript - var wm = new WeakMap(); var element = document.querySelector(".element"); @@ -605,7 +708,6 @@ wm.get(element) // "Original" element.parentNode.removeChild(element); element = null; wm.get(element) // undefined - ``` 上面代码中，变量wm是一个WeakMap实例，我们将一个DOM节点element作为键名，然后销毁这个节点，element对应的键就自动消失了，再引用这个键名就返回undefined。