diff --git a/docs/destructuring.md b/docs/destructuring.md index eeb262c..389d427 100644 --- a/docs/destructuring.md +++ b/docs/destructuring.md @@ -7,19 +7,15 @@ ES6允许按照一定模式,从数组和对象中提取值,对变量进行 以前,为变量赋值,只能直接指定值。 ```javascript - var a = 1; var b = 2; var c = 3; - ``` ES6允许写成下面这样。 ```javascript - var [a, b, c] = [1, 2, 3]; - ``` 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。 @@ -49,14 +45,12 @@ tail // [2, 3, 4] 如果解构不成功,变量的值就等于undefined。 ```javascript - var [foo] = []; var [foo] = 1; var [foo] = 'Hello'; var [foo] = false; var [foo] = NaN; var [bar, foo] = [1]; - ``` 以上几种情况都属于解构不成功,foo的值都会等于undefined。这是因为原始类型的值,会自动转为对象,比如数值1转为`new Number(1)`,从而导致foo取到undefined。 @@ -64,7 +58,6 @@ var [bar, foo] = [1]; 另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。 ```javascript - let [x, y] = [1, 2, 3]; x // 1 y // 2 @@ -80,11 +73,9 @@ d // 4 如果对undefined或null进行解构,会报错。 ```javascript - // 报错 var [foo] = undefined; var [foo] = null; - ``` 这是因为解构只能用于数组或对象。其他原始类型的值都可以转为相应的对象,但是,undefined和null不能转为对象,因此报错。 @@ -92,32 +83,26 @@ var [foo] = null; 解构赋值允许指定默认值。 ```javascript - var [foo = true] = []; foo // true [x, y='b'] = ['a'] // x='a', y='b' [x, y='b'] = ['a', undefined] // x='a', y='b' - ``` 解构赋值不仅适用于var命令,也适用于let和const命令。 ```javascript - var [v1, v2, ..., vN ] = array; let [v1, v2, ..., vN ] = array; const [v1, v2, ..., vN ] = array; - ``` 对于Set结构,也可以使用数组的解构赋值。 ```javascript - [a, b, c] = new Set(["a", "b", "c"]) a // "a" - ``` 事实上,只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。 @@ -138,6 +123,26 @@ sixth // 5 上面代码中,fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。 +## 字符串的解构赋值 + +由于JavaScript引擎内部,某些场合时,字符串会被转为类似数组的对象。因此,字符串也可以解构赋值。 + +```javascript +const [a, b, c, d, e] = 'hello'; +a // "h" +b // "e" +c // "l" +d // "l" +e // "o" +``` + +类似数组的对象都有一个length属性,因此还可以对这个属性结构赋值。 + +```javascript +let {length : len} = 'hello'; +len // 5 +``` + ## 对象的解构赋值 解构不仅可以用于数组,还可以用于对象。 diff --git a/docs/function.md b/docs/function.md index 7c4038d..3dbb7c0 100644 --- a/docs/function.md +++ b/docs/function.md @@ -493,25 +493,20 @@ var go = function*(){ ES6允许使用“箭头”(=>)定义函数。 ```javascript - var f = v => v; - ``` 上面的箭头函数等同于: ```javascript - var f = function(v) { return v; }; - ``` 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 ```javascript - var f = () => 5; // 等同于 var f = function (){ return 5 }; @@ -521,32 +516,36 @@ var sum = (num1, num2) => num1 + num2; var sum = function(num1, num2) { return num1 + num2; }; - ``` 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。 ```javascript - var sum = (num1, num2) => { return num1 + num2; } - ``` 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。 ```javascript - var getTempItem = id => ({ id: id, name: "Temp" }); +``` +箭头函数可以与变量解构结合使用。 + +```javascript +const full = ({ first, last }) => first + ' ' + last; + +// 等同于 +function full( person ){ + return person.first + ‘ ‘ + person.name; +} ``` 箭头函数使得表达更加简洁。 ```javascript - const isEven = n => n % 2 == 0; const square = n => n * n; - ``` 上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。 @@ -554,7 +553,6 @@ const square = n => n * n; 箭头函数的一个用处是简化回调函数。 ```javascript - // 正常函数写法 [1,2,3].map(function (x) { return x * x; @@ -562,13 +560,11 @@ const square = n => n * n; // 箭头函数写法 [1,2,3].map(x => x * x); - ``` 另一个例子是 ```javascript - // 正常函数写法 var result = values.sort(function(a, b) { return a - b; @@ -576,7 +572,6 @@ var result = values.sort(function(a, b) { // 箭头函数写法 var result = values.sort((a, b) => a - b); - ``` 下面是rest参数与箭头函数结合的例子。 @@ -646,13 +641,11 @@ addThenMult(5) 上面的代码等同于下面的写法。 ```javascript - const plus1 = a => a + 1; const mult2 = a => a * 2; mult2(plus1(5)) // 12 - ``` ## 函数绑定