mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
edit let & function & string
This commit is contained in:
parent
539a0e9f59
commit
15bcc0e81a
@ -260,6 +260,8 @@ let { log, sin, cos } = Math;
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
上面代码交换变量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)输入模块的指定方法**
|
||||||
|
|
||||||
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
|
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
|
||||||
|
|
||||||
|
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的转码器
|
||||||
|
@ -364,6 +364,27 @@ 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
|
||||||
@ -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+'!'
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user