es6新特性

Posted 2021-01-07 mengshi-web

1.let && const

let命令也用于声明对象，但是作用域为局部。

{
    let a = 10;
    var b = 1;
}

在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适合使用let。

const用于声明一个常量，设定后值不会再改变。

const PI = 3.1415;
PI // 3.1415
PI = 3;

强行对其进行重新赋值会报错。

2.iterable类型

为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。

var a = [‘A‘, ‘B‘, ‘C‘];
var s = new Set([‘A‘, ‘B‘, ‘C‘]);
var m = new Map([[1, ‘x‘], [2, ‘y‘], [3, ‘z‘]]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + ‘=‘ + x[1]);
}

Map相关操作方法如下，Set同理：

var m = new Map(); // 空Map
m.set(‘Adam‘, 67); // 添加新的key-value
m.set(‘Bob‘, 59);
m.has(‘Adam‘); // 是否存在key ‘Adam‘: true
m.get(‘Adam‘); // 67
m.delete(‘Adam‘); // 删除key ‘Adam‘
m.get(‘Adam‘); // undefined

3.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 
例如数组：

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;

对象的解构赋值：获取对象的多个属性并且使用一条语句将它们赋给多个变量。

>var {
  StyleSheet,
  Text,
  View
} = React;

 

等同于

var StyleSheet = React.StyleSheet
...

4.箭头函数

ES6中新增箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。

var sum = (num1, num2) => { return num1 + num2; }
//等同于
var sum = function(num1, num2) {
    return num1 + num2;
 };

箭头函数还修复了this的指向，使其永远指向词法作用域：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

5.延展操作符

通过它可以将数组作为参数直接传入函数：

var people=[‘Wayou‘,‘John‘,‘Sherlock‘];
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//改写为
sayHello(...people);//输出：Hello Wayou,John,Sherlock 

在函数定义时可以通过…rest获取定义参数外的所有参数：

function foo(a, b, ...rest) {
    console.log(‘a = ‘ + a);
    console.log(‘b = ‘ + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

6.类

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}

Promise

 在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。 

Promise在ES6中被统一规范，由浏览器直接支持。ES6语法中说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

首先测试一下浏览器是否支持Promise:

new Promise (function(){});
//测试
alert(‘support Promise!‘)

Promise的特点：

 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态： 

• - Pending(进行中) 
  - Fulfilled(已成功) 
  - Rejected(已失败)

• 一旦状态改变，就不会在变，任何时刻都会得到这个结果。 
  - 状态改变只有两种

           Pending——Fulfilled
           Pending——Rejected

ES6规定，Promise对象是一个构造函数，用来生成Promise实例：

 let promise = new Promise(function (resolve, reject) {
            //...
            if (/*success*/) {
                resolve(value);
            } else {
                reject(value);
            }
        });

Promise接受一个函数作为参数，函数的参数分别为resolve和reject.

• resolve函数作用：将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去;
• reject函数作用：将Promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别制定Resolved状态和Rejected状态的回调函数。

example:

new Promise(function (resolve, reject) {
    log(‘start new Promise...‘);
    var timeOut = Math.random() * 2;
    log(‘set timeout to: ‘ + timeOut + ‘ seconds.‘);
    setTimeout(function () {
        if (timeOut < 1) {
            log(‘call resolve()...‘);
            resolve(‘200 OK‘);
        }
        else {
            log(‘call reject()...‘);
            reject(‘timeout in ‘ + timeOut + ‘ seconds.‘);
        }
    }, timeOut * 1000);
}).then(function (r) {
    log(‘Done: ‘ + r);
}).catch(function (reason) {
    log(‘Failed: ‘ + reason);
});

timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果，过了指定时间(f参数)以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。

可见：Promsie最大的好处就是在异步执行的流程中，把执行代码和处理结果的代码清晰的分离出来。

Promise功能很多，如果有若干个异步任务，需要先做任务1,如果成功，在做任务2，如果中间任何一个任务失败，才不继续进行执行处理函数 
要串行执行这样的异步任务，就可以写成

obj1.**then**(obj2).**then**(obj3).**catch**(handleError)

其中obj1、obj2和obj3都是Promise对象。

example

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        log(‘calculating ‘ + input + ‘ x ‘ + input + ‘...‘);
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise(function (resolve, reject) {
        log(‘calculating ‘ + input + ‘ + ‘ + input + ‘...‘);
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    log(‘start new Promise...‘);
    resolve(123);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    log(‘Got value: ‘ + result);
});