ES6ES7的新特性基本使用以及 async/await的基本使用

Posted bysee1423

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6ES7的新特性基本使用以及 async/await的基本使用相关的知识,希望对你有一定的参考价值。

ES6、ES7的新特性、基本使用以及 async/await的基本使用
 
ES6常用新特性:
let && const、iterable类型、解构赋值、=>函数、...操作符、类
 
1、let 命令也用于变量声明,但是作用域为局部
{
    let a = 10;
    var b = 1;        
}
在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let。
 
2、 const用于声明一个常量,设定后值不会再改变
const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.
 
3、 为了统一集合类型,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]);
}
 
4、 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 
例如数组:
let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
 
5、 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
 
6、 这个的引入几乎不会用到extend这个函数来。通过它可以将数组作为参数直接传入函数:
var people=[‘Wayou‘,‘John‘,‘Sherlock‘];
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//改写为
sayHello(...people);//输出:Hello Wayou,John,Sherlock
 
7、ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}
 
 ES7新特性
   Array.prototype.includes
   Exponentiation Operator(求幂运算)
 
1、 Array.prototype.includes用法都容易和简单。它是一个替代indexOf,开发人员用来检查数组中是否存在值,indexOf是一种尴尬的使用,因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字,而不是一个布尔值。开发人员需要实施额外的检查。在ES6,要检查是否存在值你需要做一些如下图所示小技巧,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是当匹配的元素为0位置时候,该数组包含元素,却变成了false。
let arr = [‘react‘, ‘angular‘, ‘vue‘]
 
 
// WRONGif (arr.indexOf(‘react‘)) { // 0 -> evaluates to false, definitely as we expected
  console.log(‘Can use React‘) // this line would never be executed}
 
 
// Correctif (arr.indexOf(‘react‘) !== -1) {
  console.log(‘Can use React‘)
}
 
在ES7中使用includes代码如下:
let arr = [‘react‘, ‘angular‘, ‘vue‘]
 
 
// Correctif (arr.includes(‘react‘)) {
  console.log(‘Can use React‘)
}
 
还能在字符串中使用includes:
let str = ‘React Quickly‘
 
 
// Correctif (str.toLowerCase().includes(‘react‘)) {  // true
  console.log(‘Found "react"‘)  
}
 
2、 求幂运算大多数是做一些数学计算,对于3D,VR,SVG还有数据可视化非常有用。在ES6或者早些版本,不得不创建一个循环,创建一个递归函数或者使用Math.pow,如果忘记了什么是指数,当你有相同数字(基数)自相相乘多次(指数)。例如,7的3次方是7*7*7
 
所以在ES6/2015ES,你能使用Math.pow创建一个短的递归箭头函数:
calculateExponent = (base, exponent) => base*((--exponent>1)?calculateExponent(base, exponent):base)
console.log(calculateExponent(7,12) === Math.pow(7,12)) // true
console.log(calculateExponent(2,7) === Math.pow(2,7)) // true
 
现在在ES7 /ES2016,以数学向导的开发者可以使用更短的语法:
let a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
 
ES8的异步函数(或者async/await)
 
异步函数(或者async/await)特性操作是Promise最重要的功能。这种想法是为了在写异步代码中简化它,因为人类大脑最讨厌这种平行非序号思维了。它只是不会演变这种方式。本来以为Promise的到来已经是摆脱node异步的福音了,在ES8,异步函数是那么给力。开发者定义一个asyc函数里面不包含或者包含await 基于Promise异步操作。在这引擎之下一个异步函数返回一个Promise,无论无何你在任何地方不会看到这样的一个词Promise。
例如,在ES6中我们可以使用Promise,Axios库向GraphQL服务器发送一个请求:
 
axios.get(`/q?query=${query}`)
  .then(response => response.data)
  .then(data => {
    this.props.processfetchedData(data) // Defined somewhere else  })
  .catch(error => console.log(error))
 
任何一个Promise库都能兼容新的异步函数,我们可以使用同步try/catch做错误处理
async fetchData(url) => {
  try {
    const response = await axios.get(`/q?query=${query}`)
    const data = response.data
    this.props.processfetchedData(data)
  } catch (error) {
    console.log(error)
  }
}
 
异步函数返回一个Promise,所以我们像下面可以继续执行流程:
async fetchData(query) => {
  try {
    const response = await axios.get(`/q?query=${query}`)
    const data = response.data
    return data
  } catch (error) {
    console.log(error)
  }
}
fetchData(query).then(data => {
  this.props.processfetchedData(data)
})
 
有了 async/await,我们的代码执行异步看起来像执行同步一样。可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊!

以上是关于ES6ES7的新特性基本使用以及 async/await的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

Async / await vs then 哪个最适合性能?

iOS9的新特性以及适配方案

C# 8.0 两个有趣的新特性以及gRPC

JDK各个版本的新特性jdk1.5-jdk8

JDK各个版本的新特性jdk1.5-jdk8

C#8.0的两个有趣的新特性以及gRPC