1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 10:22:23 +00:00

edit let & function & string

This commit is contained in:
Ruan Yifeng 2015-03-28 07:36:36 +08:00
parent 539a0e9f59
commit 15bcc0e81a
5 changed files with 94 additions and 38 deletions

View File

@ -145,7 +145,7 @@ var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa" baz // "aaa"
let obj = { first: 'hello', last: 'world' }; let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; let { first: f, last: l } = obj;
f // 'hello' f // 'hello'
l // 'world' l // 'world'
@ -256,10 +256,12 @@ let { log, sin, cos } = Math;
```javascript ```javascript
[x, y] = [y, x]; [x, y] = [y, x];
``` ```
上面代码交换变量x和y的值这样的写法不仅简洁而且语义非常清晰。
**2从函数返回多个值** **2从函数返回多个值**
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
@ -287,21 +289,40 @@ var { foo, bar } = example();
**3函数参数的定义** **3函数参数的定义**
解构赋值可以方便地将一组参数与变量名对应起来。
```javascript ```javascript
function f([x]) { ... } // 参数是一组有次序的值
function f([x, y, z]) { ... }
f(['a']) f([1, 2, 3])
// 参数是一组无次序的值
function f({x, y, z}) { ... } function f({x, y, z}) { ... }
f({x:1, y:2, z:3}) 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 ```javascript
@ -321,7 +342,7 @@ jQuery.ajax = function (url, {
指定参数的默认值,就避免了在函数体内部再写`var foo = config.foo || 'default foo';`这样的语句。 指定参数的默认值,就避免了在函数体内部再写`var foo = config.foo || 'default foo';`这样的语句。
**5遍历Map结构** **6遍历Map结构**
任何部署了Iterator接口的对象都可以用for...of循环遍历。Map结构原生支持Iterator接口配合变量的解构赋值获取键名和键值就非常方便。 任何部署了Iterator接口的对象都可以用for...of循环遍历。Map结构原生支持Iterator接口配合变量的解构赋值获取键名和键值就非常方便。
@ -355,7 +376,7 @@ for (let [,value] of map) {
``` ```
**6)输入模块的指定方法** **7)输入模块的指定方法**
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

View File

@ -45,7 +45,7 @@ function log(x, y = 'World') {
log('Hello') // Hello World log('Hello') // Hello World
log('Hello', 'China') // Hello China log('Hello', 'China') // Hello China
log('Hello', '') // Hello log('Hello', '') // Hello
``` ```
@ -58,7 +58,7 @@ function Point(x = 0, y = 0) {
this.y = y; this.y = y;
} }
var p = new Point(); var p = new Point();
// p = { x:0, y:0 } // p = { x:0, y:0 }
``` ```
@ -70,7 +70,7 @@ var p = new Point();
```javascript ```javascript
fetch(url, { body='', method='GET', headers={} }){ fetch(url, { body='', method='GET', headers={} }){
console.log(method); console.log(method);
} }
``` ```
@ -107,8 +107,8 @@ function f(x, y=5, z) {
```javascript ```javascript
function foo(x=5, y=6){ function foo(x=5, y=6){
console.log(x,y); console.log(x,y);
} }
foo(undefined, null) foo(undefined, null)

View File

@ -217,14 +217,14 @@ function f1() {
// IIFE写法 // IIFE写法
(function () { (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 ```javascript

View File

@ -108,6 +108,7 @@
- Paul Miller, [es6-shim](https://github.com/paulmillr/es6-shim): 一个针对老式浏览器模拟ES6部分功能的垫片库shim - Paul Miller, [es6-shim](https://github.com/paulmillr/es6-shim): 一个针对老式浏览器模拟ES6部分功能的垫片库shim
- army8735, [Javascript Downcast](https://github.com/army8735/jsdc): 国产的ES6到ES5的转码器 - 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代码的命令行工具 - 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模块的一个垫片库 - 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的转码器 - Facebook, [regenerator](https://github.com/facebook/regenerator): 将Generator函数转为ES5的转码器

View File

@ -67,7 +67,7 @@ ES6提供了String.fromCodePoint方法可以识别0xFFFF的字符弥补了
```javascript ```javascript
String.fromCodePoint(0x20BB7) String.fromCodePoint(0x20BB7)
// "𠮷" // "𠮷"
``` ```
@ -242,7 +242,7 @@ ES6提供String.prototype.normalize()方法,用来将字符的不同表示方
```javascript ```javascript
'\u01D1'.normalize() === '\u004F\u030C'.normalize() '\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true // true
``` ```
@ -358,12 +358,33 @@ r.exec(s) // ["aa_"]
```javascript ```javascript
var r = /hello\d/y; var r = /hello\d/y;
r.sticky // true r.sticky // true
``` ```
## 模板字符串 ## 模板字符串
在ES6输出模板通常是这样写的。
```js
$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
```
上面这种写法相当繁琐不方便ES6引入了模板字符串解决这个问题。
```js
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
```
模板字符串template string是增强版的字符串用反引号`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 模板字符串template string是增强版的字符串用反引号`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
```javascript ```javascript
@ -399,10 +420,10 @@ var greeting = `\`Yo\` World!`;
var x = 1; var x = 1;
var y = 2; var y = 2;
console.log(`${x} + ${y} = ${x+y}`) console.log(`${x} + ${y} = ${x+y}`)
// "1 + 2 = 3" // "1 + 2 = 3"
console.log(`${x} + ${y*2} = ${x+y*2}`) console.log(`${x} + ${y*2} = ${x+y*2}`)
// "1 + 4 = 5" // "1 + 4 = 5"
var obj = {x: 1, y: 2}; var obj = {x: 1, y: 2};
@ -415,8 +436,8 @@ console.log(`${obj.x + obj.y}`)
```javascript ```javascript
function fn() { function fn() {
return "Hello World"; return "Hello World";
} }
console.log(`foo ${fn()} bar`); console.log(`foo ${fn()} bar`);
@ -428,7 +449,7 @@ console.log(`foo ${fn()} bar`);
```javascript ```javascript
var msg = `Hello, ${place}`; var msg = `Hello, ${place}`;
// throws error // throws error
``` ```
@ -438,8 +459,8 @@ var msg = `Hello, ${place}`;
```javascript ```javascript
if (x > MAX) { if (x > MAX) {
throw new Error(`Most ${MAX} allowed: ${x}!`); throw new Error(`Most ${MAX} allowed: ${x}!`);
// 传统写法为'Most '+MAX+' allowed: '+x+'!' // 传统写法为'Most '+MAX+' allowed: '+x+'!'
} }
``` ```
@ -457,7 +478,7 @@ tag`Hello ${ a + b } world ${ a * b}`;
上面代码中模板字符串前面有一个函数tag整个表达式将返回tag处理模板字符串后的返回值。 上面代码中模板字符串前面有一个函数tag整个表达式将返回tag处理模板字符串后的返回值。
函数tag依次接受三个参数。第一个参数是一个数组该数组的成员是模板字符串中那些没有变量替换的部分也就是说变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间以此类推。第一个参数之后的参数都是模板字符串各个变量被替换后的值。 函数tag依次接受三个参数。第一个参数是一个数组该数组的成员是模板字符串中那些没有变量替换的部分也就是说变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间以此类推。第一个参数之后的参数都是模板字符串各个变量被替换后的值。
- 第一个参数:['Hello ', ' world '] - 第一个参数:['Hello ', ' world ']
- 第二个参数: 15 - 第二个参数: 15
@ -479,10 +500,10 @@ var a = 5;
var b = 10; var b = 10;
function tag(s, v1, v2) { function tag(s, v1, v2) {
console.log(s[0]); console.log(s[0]);
console.log(s[1]); console.log(s[1]);
console.log(v1); console.log(v1);
console.log(v2); console.log(v2);
return "OK"; return "OK";
} }
@ -506,7 +527,7 @@ var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals) { function passthru(literals) {
var result = ""; var result = "";
var i = 0; var i = 0;
while (i < literals.length) { while (i < literals.length) {
result += literals[i++]; result += literals[i++];
if (i < arguments.length) { if (i < arguments.length) {
@ -538,7 +559,7 @@ tag`First line\nSecond line`
```javascript ```javascript
function tag(strings) { function tag(strings) {
console.log(strings.raw[0]); console.log(strings.raw[0]);
// "First line\\nSecond line" // "First line\\nSecond line"
} }