From 17ae0fa973804394b3f086226730139781973896 Mon Sep 17 00:00:00 2001 From: ruanyf Date: Sun, 15 May 2016 12:06:22 +0800 Subject: [PATCH] =?UTF-8?q?doc(let):=20=E5=85=A8=E5=B1=80=E5=AF=B9?= =?UTF-8?q?=E8=B1=A1=E7=9A=84=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/let.md | 27 +++----------------- docs/module.md | 21 ++++++++++++++++ docs/set-map.md | 66 ++++++++++++++++++++++++++++++------------------- 3 files changed, 65 insertions(+), 49 deletions(-) diff --git a/docs/let.md b/docs/let.md index 6ceb940..5f75742 100644 --- a/docs/let.md +++ b/docs/let.md @@ -466,28 +466,7 @@ var constantize = (obj) => { }; ``` -ES5只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6一共有6种声明变量的方法。 - -## 跨模块常量 - -上面说过，const声明的常量只在当前代码块有效。如果想设置跨模块的常量，可以采用下面的写法。 - -```javascript -// constants.js 模块 -export const A = 1; -export const B = 3; -export const C = 4; - -// test1.js 模块 -import * as constants from './constants'; -console.log(constants.A); // 1 -console.log(constants.B); // 3 - -// test2.js 模块 -import {A, B} from './constants'; -console.log(A); // 1 -console.log(B); // 3 -``` +ES5只有两种声明变量的方法：`var`命令和`function`命令。ES6除了添加`let`和`const`命令，后面章节还会提到，另外两种声明变量的方法：`import`命令和`class`命令。所以，ES6一共有6种声明变量的方法。 ## 全局对象的属性 @@ -503,7 +482,9 @@ window.a // 2 上面代码中，全局对象的属性赋值与全局变量的赋值，是同一件事。（对于Node来说，这一条只对REPL环境适用，模块环境之中，全局变量必须显式声明成`global`对象的属性。） -这种规定被视为JavaScript语言的一大问题，因为很容易不知不觉就创建了全局变量。ES6为了改变这一点，一方面规定，var命令和function命令声明的全局变量，依旧是全局对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。 +未声明的全局变量，自动成为全局对象`window`的属性，这被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了两个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道，其次程序员很容易不知不觉地就创建了全局变量（比如打字出错）。另一方面，从语义上讲，语言的顶层对象是一个有实体含义的对象，也是不合适的。 + +ES6为了改变这一点，一方面规定，为了保持兼容性，`var`命令和`function`命令声明的全局变量，依旧是全局对象的属性；另一方面规定，`let`命令、`const`命令、`class`命令声明的全局变量，不属于全局对象的属性。也就是说，从ES6开始，全局变量将逐步与全局对象的属性脱钩。 ```javascript var a = 1; diff --git a/docs/module.md b/docs/module.md index e0f332b..8fd57e9 100644 --- a/docs/module.md +++ b/docs/module.md @@ -821,6 +821,27 @@ $ node TypeError: even is not a function ``` +## 跨模块常量 + +上面说过，`const`声明的常量只在当前代码块有效。如果想设置跨模块的常量（即跨多个文件），可以采用下面的写法。 + +```javascript +// constants.js 模块 +export const A = 1; +export const B = 3; +export const C = 4; + +// test1.js 模块 +import * as constants from './constants'; +console.log(constants.A); // 1 +console.log(constants.B); // 3 + +// test2.js 模块 +import {A, B} from './constants'; +console.log(A); // 1 +console.log(B); // 3 +``` + ## ES6模块的转码 浏览器目前还不支持ES6模块，为了现在就能使用，可以将转为ES5的写法。除了Babel可以用来转码之外，还有以下两个方法，也可以用来转码。 diff --git a/docs/set-map.md b/docs/set-map.md index ba9a634..524f024 100644 --- a/docs/set-map.md +++ b/docs/set-map.md @@ -11,9 +11,11 @@ Set本身是一个构造函数，用来生成Set数据结构。 ```javascript var s = new Set(); -[2,3,5,4,5,2,2].map(x => s.add(x)) +[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)) -for (let i of s) {console.log(i)} +for (let i of s) { + console.log(i); +} // 2 3 5 4 ``` @@ -22,13 +24,16 @@ for (let i of s) {console.log(i)} Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。 ```javascript +// 例一 var set = new Set([1, 2, 3, 4, 4]) [...set] // [1, 2, 3, 4] +// 例二 var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 +// 例三 function divs () { return [...document.querySelectorAll('div')] } @@ -41,6 +46,15 @@ divs().forEach(div => set.add(div)) set.size // 56 ``` +上面代码中，例一和例二都是`Set`函数接受数组作为参数，例三是接受类似数组的对象作为参数。 + +上面代码中，也展示了一种去除数组重复成员的方法。 + +```javascript +// 去除数组的重复成员 +[...new Set(array)] +``` + 向Set加入值的时候，不会发生类型转换，所以`5`和`"5"`是两个不同的值。Set内部判断两个值是否不同，使用的算法叫做“Same-value equality”，它类似于精确相等运算符（`===`），主要的区别是`NaN`等于自身，而精确相等运算符认为`NaN`不等于自身。 ```javascript @@ -72,15 +86,15 @@ set.size // 2 Set结构的实例有以下属性。 -- Set.prototype.constructor：构造函数，默认就是Set函数。 -- Set.prototype.size：返回Set实例的成员总数。 +- `Set.prototype.constructor`：构造函数，默认就是`Set`函数。 +- `Set.prototype.size`：返回`Set`实例的成员总数。 Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。 -- add(value)：添加某个值，返回Set结构本身。 -- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 -- has(value)：返回一个布尔值，表示该值是否为Set的成员。 -- clear()：清除所有成员，没有返回值。 +- `add(value)`：添加某个值，返回Set结构本身。 +- `delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。 +- `has(value)`：返回一个布尔值，表示该值是否为`Set`的成员。 +- `clear()`：清除所有成员，没有返回值。 上面这些属性和方法的实例如下。 @@ -98,13 +112,13 @@ s.delete(2); s.has(2) // false ``` -下面是一个对比，看看在判断是否包括一个键上面，Object结构和Set结构的写法不同。 +下面是一个对比，看看在判断是否包括一个键上面，`Object`结构和`Set`结构的写法不同。 ```javascript // 对象的写法 var properties = { - "width": 1, - "height": 1 + 'width': 1, + 'height': 1 }; if (properties[someName]) { @@ -114,60 +128,60 @@ if (properties[someName]) { // Set的写法 var properties = new Set(); -properties.add("width"); -properties.add("height"); +properties.add('width'); +properties.add('height'); if (properties.has(someName)) { // do something } ``` -Array.from方法可以将Set结构转为数组。 +`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)); } -dedupe([1,1,2,3]) // [1, 2, 3] +dedupe([1, 1, 2, 3]) // [1, 2, 3] ``` ### 遍历操作 Set结构的实例有四个遍历方法，可以用于遍历成员。 -- keys()：返回一个键名的遍历器 -- values()：返回一个键值的遍历器 -- entries()：返回一个键值对的遍历器 -- forEach()：使用回调函数遍历每个成员 +- `keys()`：返回一个键名的遍历器 +- `values()`：返回一个键值的遍历器 +- `entries()`：返回一个键值对的遍历器 +- `forEach()`：使用回调函数遍历每个成员 `key`方法、`value`方法、`entries`方法返回的都是遍历器对象（详见《Iterator对象》一章）。由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以`key`方法和`value`方法的行为完全一致。 ```javascript let set = new Set(['red', 'green', 'blue']); -for ( let item of set.keys() ){ +for (let item of set.keys()) { console.log(item); } // red // green // blue -for ( let item of set.values() ){ +for (let item of set.values()) { console.log(item); } // red // green // blue -for ( let item of set.entries() ){ +for (let item of set.entries()) { console.log(item); } // ["red", "red"] @@ -197,7 +211,7 @@ for (let x of set) { // blue ``` -由于扩展运算符（...）内部使用`for...of`循环，所以也可以用于Set结构。 +由于扩展运算符（`...`）内部使用`for...of`循环，所以也可以用于Set结构。 ```javascript let set = new Set(['red', 'green', 'blue']); @@ -205,7 +219,7 @@ let arr = [...set]; // ['red', 'green', 'blue'] ``` -这就提供了另一种便捷的去除数组重复元素的方法。 +扩展运算符和Set结构相结合，就可以去除数组的重复成员。 ```javascript let arr = [3, 5, 2, 2, 5, 5]; @@ -244,7 +258,7 @@ let difference = new Set([...a].filter(x => !b.has(x))); // [1] ``` -Set结构的实例的forEach方法，用于对每个成员执行某种操作，没有返回值。 +Set结构的实例的`forEach`方法，用于对每个成员执行某种操作，没有返回值。 ```javascript let set = new Set([1, 2, 3]);