ES6常用语法(二)

发表于 分类于

潮流太快，我们不能停下学习的步伐，否则就会被潮流丢下，继续来领略 ES6 新特性：

6、解构赋值

语法是一个Javascript表达式，这使得可以将数据从数组或对象提取到不同的变量中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a, b, rest
[a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

[a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]

({a, b} = {a:1, b:2})
console.log(a) // 1
console.log(b) // 2

为了防止从数组中取出一个值为undefined的对象，可以为这个对象设置默认值。

1
2
3
4
5
6
var a, b

[a=5, b=7] = [1]
console.log(a) // 1
console.log(b) // 7


交换变量
1
2
3
4
5
6
var a = 1
var b = 3

[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1

忽略部分值
1
2
3
4
5
6
7
function f() {
  return [1, 2, 3]
}

var [a, , b] = f()
console.log(a) // 1
console.log(b) // 3

7、Promise

Promise 对象用于异步计算。

1
2
3
4
new Promise(
    /* executor */
    function(resolve, reject) {...}
)

executor 函数由Promise的实现立即执行，传递resolve和reject函数（在Promise构造函数之前调用执行器甚至返回创建的对象）。resolve 和 reject 函数，当被调用时，分别解决或拒绝 promise。executor 通常会启动一些异步工作，然后，一旦完成，可以调用resolve函数来解决promise，否则在发生错误时拒绝它。
如果在executor函数中抛出一个错误，那么该promise 将被拒绝。executor的返回值被忽略。

1
2
3
4
5
6
7
8
9
10
11
12
var myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!") //代码正常执行！
    }, 250)
})

myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    console.log("Yay! " + successMessage)
})

Promise.all(iterable) 这个方法返回一个新的promise对象，该promise对象在iterable里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。

1
2
3
4
5
6
7
8
9
var p1 = Promise.resolve(3)
var p2 = 1337
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo")
}) 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values) // [3, 1337, "foo"] 
})

Promise.prototype.then() 返回一个 Promise。它最多需要有两个参数：Promise的成功和失败情况的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
let p1 = new Promise(function(resolve, reject) {
  resolve("Success!")
  // or
  // reject ("Error!")
})

p1.then(function(value) {
  console.log(value) // Success!
}, function(reason) {
  console.log(reason) // Error!
})

Promise.prototype.catch(onRejected) 当Promise 被拒绝时,调用onRejected。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var p1 = new Promise(function(resolve, reject) {
  resolve('Success')
})

p1.then(function(value) {
  console.log(value) // "成功!"
  throw 'oh, no!'
}).catch(function(e) {
  console.log(e) // "oh, no!"
}).then(function(){
  console.log('after a catch the chain is restored') // "after a catch the chain is restored"
}, function () {
  console.log('Not fired due to the catch')
})

8、export，import

ES5写法:
1
2
3
4
5
6
7
8
9
10
11
// test.js
module.exports = {
    doSomething: function() {
        console.log('done')
    }
}

//导入
var test = require('./test.js');
test.doSomething() //  'done'

注意exports 和 module.exports 的区别
* module.exports 初始值为一个空对象 {}
* exports 是指向的 module.exports 的引用
* require() 返回的是 module.exports 而不是 exports

我们经常看到这样的写法：

1
2
exports = module.exports = somethings


上面的代码等价于:
1
2
module.exports = somethings
exports = module.exports

原理很简单，即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。

ES6写法
1
2
3
4
5
6
7
8
9
10
11
// test.js
export function doSomething() {
    console.log('done')
}
export const work='coding'
//如果我们只想导出一个简单的值或者想在模块中保留一个候选值，就可以使用默认导出
export default function cube(x) {
  return x * x * x;
}
//导入
import {doSomething, work} from './test'