edit function/desturcturing/array

ruanyf · ruanyf · commit 1b0805cb302a · 2015-10-30T22:49:54.000+08:00
diff --git a/docs/array.md b/docs/array.md
@@ -4,6 +4,23 @@
 
 `Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
 
+```javascript
+let arrayLike = {
+    '0': 'a',
+    '1': 'b',
+    '2': 'c',
+    length: 3
+};
+
+// ES5的写法
+var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
+
+// ES6的写法
+let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
+```
+
+下面是更多的例子。
+
 ```javascript
 Array.from('hello')
 // ['h', 'e', 'l', 'l', 'o']
@@ -46,13 +63,15 @@ function foo() {
 
 扩展运算符背后调用的是遍历器接口（`Symbol.iterator`），如果一个对象没有部署这个接口，就无法转换。`Array.from`方法就不存在这个问题，比如下面的这个例子，扩展运算符就无法转换。
 
-任何有`length`属性的对象，都可以通过`Array.from`方法转为数组。
+所谓类似数组的对象，本质特征只有一点，即必须有`length`属性。因此，任何有`length`属性的对象，都可以通过`Array.from`方法转为数组。
 
 ```javascript
-Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
-// [ "a", "b" , "c" ]
+Array.from({ length: 3 });
+// [ undefined, undefined, undefinded ]
 ```
 
+上面代码中，`Array.from`返回了一个具有三个成员的数组，每个位置的值都是`undefined`。
+
 对于还没有部署该方法的浏览器，可以用`Array.prototype.slice`方法替代。
 
 ```javascript
diff --git a/docs/destructuring.md b/docs/destructuring.md
@@ -429,7 +429,14 @@ function add([x, y]){
 add([1, 2]) // 3
 ```
 
-上面代码中，函数add的参数实际上不是一个数组，而是通过解构得到的变量`x`和`y`。
+上面代码中，函数`add`的参数实际上不是一个数组，而是通过解构得到的变量`x`和`y`。
+
+下面是另一个例子。
+
+```javascript
+[[1, 2], [3, 4]].map(([a, b]) => a + b)
+// [ 3, 7 ]
+```
 
 函数参数的解构也可以使用默认值。
 
@@ -446,7 +453,7 @@ move(); // [0, 0]
 
 上面代码中，函数`move`的参数是一个对象，通过对这个对象进行解构，得到变量`x`和`y`的值。如果解构失败，`x`和`y`等于默认值。
 
-注意，指定函数参数的默认值时，不能采用下面的写法。
+注意，下面的写法会得到不一样的结果。
 
 ```javascript
 function move({x, y} = { x: 0, y: 0 }) {
@@ -459,7 +466,14 @@ move({}); // [undefined, undefined]
 move(); // [0, 0]
 ```
 
-上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
+上面代码是为函数`move`的参数指定默认值，而不是为变量`x`和`y`指定默认值，所以会得到与前一种写法不同的结果。
+
+`undefined`就会触发函数参数的默认值。
+
+```javascript
+[1, undefined, 3].map((x = 'yes') => x)
+// [ 1, 'yes', 3 ]
+```
 
 ## 圆括号问题
 
diff --git a/docs/function.md b/docs/function.md
@@ -2,6 +2,8 @@
 
 ## 函数参数的默认值
 
+### 基本用法
+
 在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。
 
 ```javascript
@@ -52,10 +54,37 @@ function Point(x = 0, y = 0) {
 }
 
 var p = new Point();
-// p = { x:0, y:0 }
+p // { x: 0, y: 0 }
+```
+
+除了简洁，ES6的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本彻底拿掉这个参数，也不会导致以前的代码无法运行。
+
+参数默认值可以与解构赋值，联合起来使用。
+
+```javascript
+function foo({x, y = 5}) {
+  console.log(x, y);
+}
+
+foo({}) // undefined, 5
+foo({x: 1}) // 1, 5
+foo({x: 1, y: 2}) // 1, 2
+```
+
+上面代码中，`foo`函数的参数是一个对象，变量`x`和`y`用于解构赋值，`y`有默认值5。
+
+另外，参数变量是默认声明的，所以不能用let或const再次声明。
+
+```javascript
+function foo(x = 5) {
+  let x = 1; // error
+  const x = 2; // error
+}
 ```
 
-除了简洁，ES6的写法还有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本彻底拿到这个参数，也不会导致以前的代码无法运行。
+上面代码中，参数变量`x`是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。
+
+### 双重默认值
 
 默认值的写法非常灵活，下面是一个为对象属性设置默认值的例子。
 
@@ -86,7 +115,7 @@ fetch('http://example.com')
 
 上面代码中，调用函数`fetch`时，第二个参数默认为一个空对象，而只要有第二个参数，`method`参数就默认为`GET`。
 
-请问下面两种写法有什么差别？
+再请问下面两种写法有什么差别？
 
 ```javascript
 // 写法一
@@ -123,7 +152,9 @@ m1({z: 3}) // [0, 0]
 m2({z: 3}) // [undefined, undefined]
 ```
 
-通常情况下，定义了默认值的参数，都是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。但是，非尾部的参数，也是可以设置默认值的。
+### 参数默认值的位置
+
+通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。
 
 ```javascript
 // 例一
@@ -149,7 +180,7 @@ f(1, undefined, 2) // [1, 5, 2]
 
 上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入`undefined`。
 
-如果传入`undefined`，将触发该参数等于默认值，null则没有这个效果。
+如果传入`undefined`，将触发该参数等于默认值，`null`则没有这个效果。
 
 ```javascript
 function foo(x = 5, y = 6){
@@ -162,6 +193,8 @@ foo(undefined, null)
 
 上面代码中，`x`参数对应`undefined`，结果触发了默认值，`y`参数等于`null`，就没有触发默认值。
 
+### 函数的length属性
+
 指定了默认值以后，函数的`length`属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，`length`属性将失真。
 
 ```javascript
@@ -172,63 +205,106 @@ foo(undefined, null)
 
 上面代码中，`length`属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。
 
-利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。
+### 作用域
+
+一个需要注意的地方是，如果参数默认值是一个变量，则该变量所处的作用域，与其他变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。
 
 ```javascript
-function throwIfMissing() {
-  throw new Error('Missing parameter');
+var x = 1;
+
+function f(x, y = x) {
+  console.log(y);
 }
 
-function foo(mustBeProvided = throwIfMissing()) {
-  return mustBeProvided;
+f(2) // 2
+```
+
+上面代码中，参数`y`的默认值等于`x`。调用时，由于函数作用域内部的变量`x`已经生成，所以`y`等于参数`x`，而不是全局变量`x`。
+
+如果调用时，函数作用域内部的变量`x`没有生成，结果就会不一样。
+
+```javascript
+let x = 1;
+
+function f(y = x) {
+  let x = 2;
+  console.log(y);
 }
 
-foo()
-// Error: Missing parameter
+f() // 1
 ```
 
-上面代码的`foo`函数，如果调用的时候没有参数，就会调用默认值`throwIfMissing`函数，从而抛出一个错误。
+上面代码中，函数调用时，`y`的默认值变量`x`尚未在函数内部生成，所以`x`指向全局变量，结果又不一样。
 
-从上面代码还可以看到，参数`mustBeProvided`的默认值等于`throwIfMissing`函数的运行结果（即函数名之后有一对圆括号），这表明参数的默认值不是在定义时执行，而是在运行时执行（即如果参数已经赋值，默认值中的函数就不会运行），这与python语言不一样。
+如果此时，全局变量`x`不存在，就会报错。
 
-另一个需要注意的地方是，参数默认值所处的作用域，不是全局作用域，而是函数作用域。
+```javascript
+function f(y = x) {
+  let x = 2;
+  console.log(y);
+}
+
+f() // ReferenceError: x is not defined
+```
+
+如果函数`A`的参数默认值是函数`B`，由于函数的作用域是其声明时所在的作用域，那么函数`B`的作用域不是函数`A`，而是全局作用域。请看下面的例子。
 
 ```javascript
-var x = 1;
+let foo = 'outer';
 
-function foo(x, y = x) {
-  console.log(y);
+function bar(func = x => foo) {
+  let foo = 'inner';
+  console.log(func()); // outer
 }
 
-foo(2) // 2
+bar();
 ```
 
-上面代码中，参数y的默认值等于x，由于处在函数作用域，所以y等于参数x，而不是全局变量x。
+上面代码中，函数`bar`的参数`func`，默认是一个匿名函数，返回值为变量`foo`。这个匿名函数的作用域就不是`bar`。这个匿名函数声明时，是处在外层作用域，所以内部的`foo`指向函数体外的声明，输出`outer`。它实际上等同于下面的代码。
 
-参数变量是默认声明的，所以不能用let或const再次声明。
+```javascript
+let foo = 'outer';
+let f = x => foo;
+
+function bar(func = f) {
+  let foo = 'inner';
+  console.log(func()); // outer
+}
+
+bar();
+```
+
+如果写成下面这样，就会报错。
 
 ```javascript
-function foo(x = 5) {
-  let x = 1; // error
-  const x = 2; // error
+function bar(func = () => foo) {
+  let foo = 'inner';
+  console.log(func());
 }
+
+bar() // ReferenceError: foo is not defined
 ```
 
-上面代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。
+### 应用
 
-参数默认值可以与解构赋值，联合起来使用。
+利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。
 
 ```javascript
-function foo({x, y = 5}) {
-  console.log(x, y);
+function throwIfMissing() {
+  throw new Error('Missing parameter');
 }
 
-foo({}) // undefined, 5
-foo({x: 1}) // 1, 5
-foo({x: 1, y: 2}) // 1, 2
+function foo(mustBeProvided = throwIfMissing()) {
+  return mustBeProvided;
+}
+
+foo()
+// Error: Missing parameter
 ```
 
-上面代码中，foo函数的参数是一个对象，变量x和y用于解构赋值，y有默认值5。
+上面代码的`foo`函数，如果调用的时候没有参数，就会调用默认值`throwIfMissing`函数，从而抛出一个错误。
+
+从上面代码还可以看到，参数`mustBeProvided`的默认值等于`throwIfMissing`函数的运行结果（即函数名之后有一对圆括号），这表明参数的默认值不是在定义时执行，而是在运行时执行（即如果参数已经赋值，默认值中的函数就不会运行），这与python语言不一样。
 
 ## rest参数
 
@@ -544,6 +620,13 @@ var go = function*(){
 
 上面代码中，变量`go`是一个Generator函数，执行后返回的是一个遍历器对象，对这个遍历器对象执行扩展运算符，就会将内部遍历得到的值，转为一个数组。
 
+如果对没有`iterator`接口的对象，使用扩展运算符，将会报错。
+
+```javascript
+var obj = {a: 1, b: 2};
+let arr = [...obj]; // TypeError: Cannot spread non-iterable object
+```
+
 ## name属性
 
 函数的`name`属性，返回该函数的函数名。
diff --git a/docs/let.md b/docs/let.md
@@ -127,33 +127,6 @@ function bar(x = 2, y = x) {
 bar(); // [2, 2]
 ```
 
-需要注意的是，函数的作用域是其声明时所在的作用域。如果函数`A`的参数是函数`B`，那么函数`B`的作用域不是函数`A`。
-
-```javascript
-let foo = 'outer';
-
-function bar(func = x => foo) {
-  let foo = 'inner';
-  console.log(func()); // outer
-}
-
-bar();
-```
-
-上面代码中，函数`bar`的参数`func`，默认是一个匿名函数，返回值为变量`foo`。这个匿名函数的作用域就不是`bar`。这个匿名函数声明时，是处在外层作用域，所以内部的`foo`指向函数体外的声明，输出`outer`。它实际上等同于下面的代码。
-
-```javascript
-let foo = 'outer';
-let f = x => foo;
-
-function bar(func = f) {
-  let foo = 'inner';
-  console.log(func()); // outer
-}
-
-bar();
-```
-
 ES6规定暂时性死区和不存在变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。
 
 总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
