From 15bcc0e81a441e33ee8905cedbcce1ac0b9c189e Mon Sep 17 00:00:00 2001 From: Ruan Yifeng Date: Sat, 28 Mar 2015 07:36:36 +0800 Subject: [PATCH] edit let & function & string --- docs/destructuring.md | 41 ++++++++++++++++++++++++-------- docs/function.md | 10 ++++---- docs/let.md | 23 ++++++++++++++---- docs/reference.md | 3 ++- docs/string.md | 55 ++++++++++++++++++++++++++++++------------- 5 files changed, 94 insertions(+), 38 deletions(-) diff --git a/docs/destructuring.md b/docs/destructuring.md index 267da18..303cd07 100644 --- a/docs/destructuring.md +++ b/docs/destructuring.md @@ -145,7 +145,7 @@ var { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; -let { first: f, last: l } = obj; +let { first: f, last: l } = obj; f // 'hello' l // 'world' @@ -256,10 +256,12 @@ let { log, sin, cos } = Math; ```javascript -[x, y] = [y, x]; +[x, y] = [y, x]; ``` +上面代码交换变量x和y的值，这样的写法不仅简洁，而且语义非常清晰。 + **（2）从函数返回多个值** 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。 @@ -287,21 +289,40 @@ var { foo, bar } = example(); **（3）函数参数的定义** +解构赋值可以方便地将一组参数与变量名对应起来。 + ```javascript -function f([x]) { ... } - -f(['a']) +// 参数是一组有次序的值 +function f([x, y, z]) { ... } +f([1, 2, 3]) +// 参数是一组无次序的值 function f({x, y, z}) { ... } - f({x:1, y:2, z:3}) ``` -这种写法对提取JSON对象中的数据，尤其有用。 +**（4）提取JSON数据** -**（4）函数参数的默认值** +解构赋值对提取JSON对象中的数据，尤其有用。 + +```js +var jsonData = { + id: 42, + status: "OK", + data: [867, 5309] +} + +let { id, status, data: number } = jsonData; + +console.log(id, status, number) +// 42, OK, [867, 5309] +``` + +上面代码可以快速提取JSON数据的值。 + +**（5）函数参数的默认值** ```javascript @@ -321,7 +342,7 @@ jQuery.ajax = function (url, { 指定参数的默认值，就避免了在函数体内部再写`var foo = config.foo || 'default foo';`这样的语句。 -**（5）遍历Map结构** +**（6）遍历Map结构** 任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。 @@ -355,7 +376,7 @@ for (let [,value] of map) { ``` -**（6）输入模块的指定方法** +**（7）输入模块的指定方法** 加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。 diff --git a/docs/function.md b/docs/function.md index 2bd02bf..a097f84 100644 --- a/docs/function.md +++ b/docs/function.md @@ -45,7 +45,7 @@ function log(x, y = 'World') { log('Hello') // Hello World log('Hello', 'China') // Hello China -log('Hello', '') // Hello +log('Hello', '') // Hello ``` @@ -58,7 +58,7 @@ function Point(x = 0, y = 0) { this.y = y; } -var p = new Point(); +var p = new Point(); // p = { x:0, y:0 } ``` @@ -70,7 +70,7 @@ var p = new Point(); ```javascript fetch(url, { body='', method='GET', headers={} }){ - console.log(method); + console.log(method); } ``` @@ -107,8 +107,8 @@ function f(x, y=5, z) { ```javascript -function foo(x=5, y=6){ - console.log(x,y); +function foo(x=5, y=6){ + console.log(x,y); } foo(undefined, null) diff --git a/docs/let.md b/docs/let.md index 3730135..9c7e766 100644 --- a/docs/let.md +++ b/docs/let.md @@ -217,14 +217,14 @@ function f1() { // IIFE写法 (function () { - var tmp = ...; - ... + var tmp = ...; + ... }()); // 块级作用域写法 { - let tmp = ...; - ... + let tmp = ...; + ... } ``` @@ -320,7 +320,20 @@ foo = {} // 不起作用 ``` -上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。如果真的想将对象冻结，应该使用Object.freeze方法。 +上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。 + +下面是另一个例子。 + +```js +const a = []; +a.push("Hello"); // 可执行 +a.length = 0; // 可执行 +a = ["Dave"]; // 报错 +``` + +上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就会报错。 + +如果真的想将对象冻结，应该使用Object.freeze方法。 ```javascript diff --git a/docs/reference.md b/docs/reference.md index 86acfe6..8e36f22 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -108,6 +108,7 @@ - Paul Miller, [es6-shim](https://github.com/paulmillr/es6-shim): 一个针对老式浏览器，模拟ES6部分功能的垫片库（shim） - army8735, [Javascript Downcast](https://github.com/army8735/jsdc): 国产的ES6到ES5的转码器 - esnext, [ES6 Module Transpiler](https://github.com/esnext/es6-module-transpiler)：基于node.js的将ES6模块转为ES5代码的命令行工具 -- Sebastian McKenzie, [6to5](https://github.com/sebmck/6to5): 将ES6转为ES5代码的Node模块，支持source map +- Sebastian McKenzie, [BabelJS](http://babeljs.io/): ES6转译器 - SystemJS, [SystemJS](https://github.com/systemjs/systemjs): 在浏览器中加载AMD、CJS、ES6模块的一个垫片库 +- Modernizr, [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#ecmascript-6-harmony): ES6垫片库清单 - Facebook, [regenerator](https://github.com/facebook/regenerator): 将Generator函数转为ES5的转码器 diff --git a/docs/string.md b/docs/string.md index 740109d..f54836c 100644 --- a/docs/string.md +++ b/docs/string.md @@ -67,7 +67,7 @@ ES6提供了String.fromCodePoint方法，可以识别0xFFFF的字符，弥补了 ```javascript -String.fromCodePoint(0x20BB7) +String.fromCodePoint(0x20BB7) // "𠮷" ``` @@ -242,7 +242,7 @@ ES6提供String.prototype.normalize()方法，用来将字符的不同表示方 ```javascript -'\u01D1'.normalize() === '\u004F\u030C'.normalize() +'\u01D1'.normalize() === '\u004F\u030C'.normalize() // true ``` @@ -358,12 +358,33 @@ r.exec(s) // ["aa_"] ```javascript var r = /hello\d/y; -r.sticky // true +r.sticky // true ``` ## 模板字符串 +在ES6，输出模板通常是这样写的。 + +```js +$("#result").append( + "There are " + basket.count + " " + + "items in your basket, " + + "" + basket.onSale + + " are on sale!" +); +``` + +上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。 + +```js +$("#result").append(` + There are ${basket.count} items + in your basket, ${basket.onSale} + are on sale! +`); +``` + 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 ```javascript @@ -399,10 +420,10 @@ var greeting = `\`Yo\` World!`; var x = 1; var y = 2; -console.log(`${x} + ${y} = ${x+y}`) +console.log(`${x} + ${y} = ${x+y}`) // "1 + 2 = 3" -console.log(`${x} + ${y*2} = ${x+y*2}`) +console.log(`${x} + ${y*2} = ${x+y*2}`) // "1 + 4 = 5" var obj = {x: 1, y: 2}; @@ -415,8 +436,8 @@ console.log(`${obj.x + obj.y}`) ```javascript -function fn() { - return "Hello World"; +function fn() { + return "Hello World"; } console.log(`foo ${fn()} bar`); @@ -428,7 +449,7 @@ console.log(`foo ${fn()} bar`); ```javascript -var msg = `Hello, ${place}`; +var msg = `Hello, ${place}`; // throws error ``` @@ -438,8 +459,8 @@ var msg = `Hello, ${place}`; ```javascript if (x > MAX) { - throw new Error(`Most ${MAX} allowed: ${x}!`); - // 传统写法为'Most '+MAX+' allowed: '+x+'!' + throw new Error(`Most ${MAX} allowed: ${x}!`); + // 传统写法为'Most '+MAX+' allowed: '+x+'!' } ``` @@ -457,7 +478,7 @@ tag`Hello ${ a + b } world ${ a * b}`; 上面代码中，模板字符串前面有一个函数tag，整个表达式将返回tag处理模板字符串后的返回值。 -函数tag依次接受三个参数。第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。第一个参数之后的参数，都是模板字符串各个变量被替换后的值。 +函数tag依次接受三个参数。第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。第一个参数之后的参数，都是模板字符串各个变量被替换后的值。 - 第一个参数：['Hello ', ' world '] - 第二个参数: 15 @@ -479,10 +500,10 @@ var a = 5; var b = 10; function tag(s, v1, v2) { - console.log(s[0]); - console.log(s[1]); - console.log(v1); - console.log(v2); + console.log(s[0]); + console.log(s[1]); + console.log(v1); + console.log(v2); return "OK"; } @@ -506,7 +527,7 @@ var msg = passthru`The total is ${total} (${total*1.05} with tax)`; function passthru(literals) { var result = ""; var i = 0; - + while (i < literals.length) { result += literals[i++]; if (i < arguments.length) { @@ -538,7 +559,7 @@ tag`First line\nSecond line` ```javascript function tag(strings) { - console.log(strings.raw[0]); + console.log(strings.raw[0]); // "First line\\nSecond line" }