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:
parent
539a0e9f59
commit
15bcc0e81a
@ -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)输入模块的指定方法**
|
||||||
|
|
||||||
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
|
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
|
||||||
|
|
||||||
|
@ -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)
|
||||||
|
23
docs/let.md
23
docs/let.md
@ -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
|
||||||
|
|
||||||
|
@ -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的转码器
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user