1
0
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:
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

@ -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)输入模块的指定方法**
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

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

@ -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+'!'
} }
``` ```