From 21a32a6a1b1ad656c53cc1d422d6ea2b7265dfe4 Mon Sep 17 00:00:00 2001 From: ruanyf Date: Fri, 25 Apr 2014 12:24:17 +0800 Subject: [PATCH] add docs/set-map --- docs/iterator.md | 19 +++- docs/set-map.md | 270 +++++++++++++++++++++++++++++++++++++++++++++++ sidebar.md | 1 + 3 files changed, 288 insertions(+), 2 deletions(-) create mode 100644 docs/set-map.md diff --git a/docs/iterator.md b/docs/iterator.md index 25b1a73..7eefae6 100644 --- a/docs/iterator.md +++ b/docs/iterator.md @@ -159,14 +159,29 @@ for (e of es6) { 上面代码表示，for...in循环可以遍历键名，for...of循环会报错。 -对于类似数组的对象（比如），for...of循环可以直接使用。 +总结一下，for...of循环可以使用的范围包括数组、类似数组的对象（比如arguments对象、DOM NodeList对象）、Set和Map结构、后文的Generator对象，以及字符串。下面是for...of循环用于字符串和DOM NodeList对象的例子。 ```javascript +// 字符串的例子 + +let str = "hello"; + +for (let s of str) { + console.log(s); +} +// h +// e +// l +// l +// o + +// DOM NodeList对象的例子 + let paras = document.querySelectorAll("p"); for (let p of paras) { - p.classList.add("read"); + p.classList.add("test"); } ``` diff --git a/docs/set-map.md b/docs/set-map.md new file mode 100644 index 0000000..03ca161 --- /dev/null +++ b/docs/set-map.md @@ -0,0 +1,270 @@ +# Set和Map数据结构 + +## Set + +ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 + +Set本身是一个构造函数，用来生成Set数据结构。 + +```javascript + +var s = new Set(); + +[2,3,5,4,5,2,2].map(x => s.add(x)) + +for (i of s) {console.log(i)} +// 2 3 4 5 + +``` + +上面代码通过add方法向Set结构加入成员，结果表明set结构不会添加重复的值。 + +Set函数接受一个数组作为参数，用来初始化。 + +```javascript + +var items = new Set([1,2,3,4,5,5,5,5]); + +items.size() +// 5 + +``` + +向Set加入值的时候，不会发生类型转换。这意味在Set中，5和“5”是两个不同的值。 + +set数据结构有以下方法。 + +- size()：返回成员总数。 +- add(value)：添加某个值。 +- delete(value)：删除某个值。 +- has(value)：返回一个布尔值，表示该值是否为set的成员。 +- clear()：清除所有成员。 + +下面是这些属性和方法的使用演示。 + +```javascript + +s.add(1).add(2).add(2); +// 注意2被加入了两次 + +s.size() // 2 + +s.has(1) // true +s.has(2) // true +s.has(3) // false + +s.delete(2); +s.has(2) // false + +``` + +下面是一个对比，看看在判断是否包括一个键上面，对象和Set的写法不同。 + +```javascript + +// 对象的写法 + +var properties = { + "width": 1, + "height": 1 +}; + +if (properties[someName]) { + // do something +} + +// Set的写法 + +var properties = new Set(); + +properties.add("width"); +properties.add("height"); + +if (properties.has(someName)) { + // do something +} + +``` + +Array.from方法可以将Set结构转为数组。 + +```javascript + +var items = new Set([1, 2, 3, 4, 5]); +var array = Array.from(items); + +``` + +这就提供了一种去除数组中重复元素的方法。 + +```javascript + +function dedupe(array) { + return Array.from(new Set(array)); +} + +``` + +## Map + +JavaScript的对象，本质上是键值对的集合，但是只能用字符串当作键。这给它的使用带来了很大的限制。 + +```javascript + +var data = {}; +var element = document.getElementById("myDiv"); + +data[element] = metadata; + +``` + +上面代码原意是将一个DOM节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串“[Object HTMLDivElement]”。 + +为了解决这个问题，ES6提供了map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，对象也可以当作键。 + +```javascript + +var m = new Map(); + +o = {p: "Hello World"}; + +m.set(o, "content") + +console.log(m.get(o)) +// "content" + +``` + +上面代码将对象o当作m的一个键。 + +Map函数也可以接受一个数组进行初始化。 + +```javascript + +var map = new Map([ ["name", "张三"], ["title", "Author"]]); + +map.size // 2 +map.has("name") // true +map.get("name") // "张三" +map.has("title") // true +map.get("title") // "Author" + +``` + +Map数据结构有以下属性和方法。 + +- size：返回成员总数。 +- set(key, value)：设置一个键值对。 +- get(key)：读取一个键。 +- has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。 +- delete(key)：删除某个键。 +- clear()：清除所有成员。 +- keys()：返回键名的遍历器。 +- values()：返回键值的遍历器。 +- entries()：返回所有成员的遍历器。 + +下面是一些用法实例。 + +```javascript + +var m = new Map(); + +m.set("edition", 6) // 键是字符串 +m.set(262, "standard") // 键是数值 +m.set(undefined, "nah") // 键是undefined + +var hello = function() {console.log("hello");} +m.set(hello, "Hello ES6!") // 键是函数 + +m.has("edition") // true +m.has("years") // false +m.has(262) // true +m.has(undefined) // true +m.has(hello) // true + +m.delete(undefined) +m.has(undefined) // false + +m.get(hello) // Hello ES6! +m.get("edition") // 6 + +``` + +运用Map结构原生提供的三个遍历器，可以遍历所有成员。 + +```javascript + +for (let key of map.keys()) { + console.log("Key: %s", key); +} + +for (let value of map.values()) { + console.log("Value: %s", value); +} + +for (let item of map.entries()) { + console.log("Key: %s, Value: %s", item[0], item[1]); +} + +// same as using map.entries() +for (let item of map) { + console.log("Key: %s, Value: %s", item[0], item[1]); +} + +``` + +Map结构还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。 + +```javascript + +map.forEach(function(value, key, map)) { + console.log("Key: %s, Value: %s", key, value); +}); + +``` + +forEach方法还可以接受第二个参数，用来绑定this。 + +```javascript + +var reporter = { + report: function(key, value) { + console.log("Key: %s, Value: %s", key, value); + } +}; + +map.forEach(function(value, key, map) { + this.report(key, value); +}, reporter); + +``` + +上面代码中，forEach方法的回调函数的this，就指向reporter。 + +## WeakMap结构 + +WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名。 + +WeakMap的设计目的在于，键名是对象的弱引用（垃圾回收机制不将该引用考虑在内），所以其所对应的对象可能会被自动回收。当对象被回收后，WeakMap自动移除对应的键值对。典型应用是，一个对应DOM元素的WeakMap结构，当某个DOM元素被清除，其所对应的WeakMap记录就会自动被移除。基本上，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。 + +下面是WeakMap结构的一个例子，可以看到用法上与Map几乎一样。 + +```javascript + +var map = new WeakMap(); +var element = document.querySelector(".element"); + +map.set(element, "Original"); + +var value = map.get(element); +console.log(value); // "Original" + +element.parentNode.removeChild(element); +element = null; + +value = map.get(element); +console.log(value); // undefined + +``` + +WeakMap还有has和delete方法，但没有size方法，也无法遍历它的值。 diff --git a/sidebar.md b/sidebar.md index e8cfa68..82a40cc 100644 --- a/sidebar.md +++ b/sidebar.md @@ -12,6 +12,7 @@ - [数值的扩展](#docs/number) - [对象的扩展](#docs/object) - [函数的扩展](#docs/function) +- [Set和Map数据结构](#docs/set-map) - [Iterator和for...of循环](#docs/iterator) - [Generator函数](#docs/generator) - [Promise对象](#docs/promise)