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
parent
539a0e9f59
commit
15bcc0e81a
@ -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）输入模块的指定方法**
|
||||
|
||||
加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
23
docs/let.md
23
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
|
||||
|
||||
|
||||
@ -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的转码器
|
||||
|
||||
@ -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 <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）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
|
||||
|
||||
```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"
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user