文档章节

聊聊ES7与ES8特性

Fundebug
 Fundebug
发布于 2017/08/28 14:15
字数 1190
阅读 12
收藏 1
点赞 0
评论 0

译者按: 转眼ES6发布2年了,是时候了解一下ES7ES8特性了!

为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

我曾写过一篇关于ES6博客《10个最佳ES6特性》,这次我打算聊聊ES7ES8特性。

ES7只有2个特性:

ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性:

Array.prototype.includes()

不使用ES7

使用indexOf()验证数组中是否存在某个元素,这时需要根据返回值是否为**-1**来判断:

let arr = ['react', 'angular', 'vue'];

if (arr.indexOf('react') !== -1)
{
    console.log('React存在');
}

使用ES7

使用includes()验证数组中是否存在某个元素,这样更加直观简单:

let arr = ['react', 'angular', 'vue'];

if (arr.includes('react'))
{
    console.log('React存在');
}

指数操作符

不使用ES7

使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:

function calculateExponent(base, exponent)
{
    if (exponent === 1)
    {
        return base;
    }
    else
    {
        return base * calculateExponent(base, exponent - 1);
    }
}

console.log(calculateExponent(7, 3)); // 输出343
console.log(Math.pow(7, 3)); // 输出343

使用ES7

使用指数运算符******,就像**+-**等操作符一样:

console.log(7**3);

Object.values()

不使用ES8

使用Object.keys()遍历对象的属性值,需要通过属性名key去获取属性值:

let obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach((key) =>
{
    console.log(obj[key]); // 输出1, 2, 3
});

使用ES8

使用Object.values()遍历对象的属性值,无需使用使用属性名:

let obj = {a: 1, b: 2, c: 3}

Object.keys(obj).forEach((key) =>
{
    console.log(obj[key]); // 输出1, 2, 3
});

Object.entries()

不使用ES8

使用Object.keys()遍历对象的属性名和属性值:

let obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach((key) =>
{
    console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
})

使用ES8

使用Object.entries()遍历对象的属性名和属性值:

let obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) =>
{
    console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

padStart()

不使用ES8

console.log('0.00')         	
console.log('10,000.00')    
console.log('250,000.00')  

输出结果如下:

0.00
10,000.00
250,000.00

使用ES8

使用padStart()可以在字符串前面填充指定的字符串:

console.log('0.00'.padStart(20))         	
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20))    

输出结果如下:

                0.00
           10,000.00
          250,000.00

padEnd()

不使用ES8

console.log('0.00 ' + '0.00' )         	
console.log('10,000.00 ' + '10,000.00' )    
console.log('250,000.00 ' + '250,000.00')  

输出如下:

0.00 0.00
10,000.00 10,000.00
250,000.00 250,000.00

使用ES8

使用padEnd()可以在字符串后面填充指定的字符串:

console.log('0.00'.padEnd(20) + '0.00' )         	
console.log('10,000.00'.padEnd(20) + '10,000.00' )    
console.log('250,000.00'.padEnd(20) + '250,000.00')  

输出如下:

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00

Object.getOwnPropertyDescriptors()

azatsBooks对象的定义如下:

let azatsBooks = {
    books: ['React Quickly'],
    get latest()
    {
        let numberOfBooks = this.books.length;
        if (numberOfBooks == 0) return undefined;
        return this.books[numberOfBooks - 1];
    }
};

不使用ES8

使用Object.getOwnPropertyDescriptor()获取单个属性的属性描述符。

获取azatsBooks对象的books属性的属性描述符:

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));

/** 输出books属性的属性描述
[object Object] {
  configurable: true,
  enumerable: true,
  value: ["React Quickly"],
  writable: true
}
**/

获取azatsBooks对象的lastest方法的属性描述符:

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));

/** 输出lastest方法的属性描述
[object Object] {
  configurable: true,
  enumerable: true,
  get: function get latest() {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
    return this.books[numberOfBooks - 1]
  },
  set: undefined
}
**/

使用ES8

Object.getOwnPropertyDescriptors()相当于Object.getOwnPropertyDescriptor()的复数形式,可以获取对象的所有自身属性的描述符:

console.log(Object.getOwnPropertyDescriptors(azatsBooks))

/** 输出azatsBooks对象所有自身属性的属性描述
[object Object] {
  books: [object Object] {
    configurable: true,
    enumerable: true,
    value: ["React Quickly"],
    writable: true
  },
  latest: [object Object] {
    configurable: true,
    enumerable: true,
    get: function get latest() {
      let numberOfBooks = this.books.length
      if (numberOfBooks == 0) return undefined
      return this.books[numberOfBooks - 1]
    },
    set: undefined
  }
}
**/

函数参数列表结尾允许逗号

不使用ES8

var f = function(a,
  b,
  c,
  d // d之后不能带逗号
   ) { 
  console.log(d)
}

使用ES8

var f = function(a,
  b,
  c,
  d, // d之后允许带逗号
) { 
  console.log(d)
}

允许逗号之后,可以避免一些不必要的报错。(如果你希望实时监控JavaScript应用的错误,欢迎免费使用Fundebug)

Async/Await

使用Promise

使用Promise写异步代码,会比较麻烦:

axios.get(`/q?query=${query}`)
    .then(response => response.data)
    .then(data =>
    {
        this.props.processfetchedData(data);
    })
    .catch(error => console.log(error));

使用Async/Await

Async/Await使得异步代码看起来像同步代码,这正是它的魔力所在:

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是写异步代码的新方式,以前的方法有回调函数Promise。相比于Promise,它更加简洁,并且处理错误、条件语句、中间值都更加方便,因此有望替代Promise,成为新一代的一步代码编写方式。对细节感兴趣的话,可以查看Fundebug翻译的《Async/Await替代Promise的6个理由》

版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/08/28/es7-and-es8/

© 著作权归作者所有

共有 人打赏支持
Fundebug
粉丝 3
博文 71
码字总数 96130
作品 0
厦门
实例感受-es6的常用语法和优越性

1.前言 前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法...

守候i
2017/11/13
0
0
es6/es7/es8常用新特性总结(超实用)

  本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉。一直觉得node 数组、 对象、序列等的处理没有python方便,因为需要借助...

zhoujie0111
06/16
0
0
ES6关于数组迭代方法和归并方法

迭代方法 迭代方法一共包含5种: every():对数组种每一项运行给定的函数,如果该函数对每一项都返回true,则返回true。 filter():对数组种每一项运行给定的函数,返回该函数会返回true的项所...

潘-C
2017/03/21
0
0
创造 JavaScript 仅用 10 天,名称是为了更好推广

JavaScript除了提供一个非重度开发者也能使用的程式语言外,也是提供开发者由Java这类静态型别转至动态型别开发语言的一种选择,但是现在Mozilla所推得Asm.js,又将JavaScript带回到了静态型...

oschina
2015/05/16
6.7K
28
ES7之Decorators实现AOP示例

在上篇博文CoffeeScript实现Python装潢器中,笔者利用CoffeeScript支持的高阶函数,以及方法调用可省略括符的特性,实现了一个类似Python装潢器的日志Demo。这只是一种伪实现,JavaScript实现...

zting科技
2017/02/02
0
0
JavaScript 编年小史

1995 由 Netscape 公司雇员Brendan Eich 花不到 10 天时间开发出来。之所以叫 JavaScript,因为 Netscape 想开发一款类 Java 的脚本语言来增强 Web 技术用于和微软竞争。 1996 Netscape 提交...

CPPAlien
05/09
0
0
ES6-7

JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMAScript 6 Promises规范为中心,着重向各位读者介绍JavaScr...

掘金官方
01/05
0
0
细说ES7 JavaScript Decorators

开篇概述 在上篇的ES7之Decorators实现AOP示例中,我们预先体验了ES7的Decorators,虽然它只是一个简单的日志AOP拦截Demo。但它也足以让我们体会到ES7 Decorators的强大魅力所在。所以为什么...

zting科技
2017/01/09
0
0
2018都过一半了,还没来得及看ES8?

过了一个五一长期之后,发现2018年都过去一半了,尴尬的计划却赶不上时光的变化。 一、函数参数允许尾后逗号 对于这个特性的更改,我的感触还是很深的:每当删除或者添加函数末尾参数时,你不...

valar_cC
05/11
0
0
Chrome 52 将支持 ES7:Canary 通道已上线

谷歌工程师已经宣布,他们已在Chrome Canary中添加了几乎全部ES6(ECMAScript)特性、以及对ES7的基本支持。ChromeCanary属于alpha发布通道,其下一步是迁移至Beta通道,最终则是于Chrome52(...

oschina
2016/05/03
3.8K
14

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(三)

工作队列:一个生产者,多个消费者,生产者直接将消息发送到rabbitmq的队列之中 默认采用的是轮询分配:即不管消费者处理信息的效率,队列给所有消费者轮流发送一条信息,直至消息发送完毕 ...

人觉非常君
19分钟前
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
22分钟前
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
28分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
30分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
44分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
53分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
58分钟前
0
0
css优先级

..

architect刘源源
今天
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
今天
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部