聊聊ES7与ES8特性

简介: 聊聊ES7与ES8特性

原文链接: blog.fundebug.com

译者按: 转眼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.values(obj).forEach(value =>
{
    console.log(value); // 输出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个理由》


目录
相关文章
|
前端开发 JavaScript 物联网
JavaScript使用Modbus协议实现RTU设备连云
在阿里云物联网平台下发物模型属性设置数据,HaaS600Kit 接收并解析云端数据后控制 Modbus 继电器设备进行开关动作。
JavaScript使用Modbus协议实现RTU设备连云
|
11月前
|
架构师 关系型数据库 MySQL
MySQL最左前缀优化原则:深入解析与实战应用
【10月更文挑战第12天】在数据库架构设计与优化中,索引的使用是提升查询性能的关键手段之一。其中,MySQL的最左前缀优化原则(Leftmost Prefix Principle)是复合索引(Composite Index)应用中的核心策略。作为资深架构师,深入理解并掌握这一原则,对于平衡数据库性能与维护成本至关重要。本文将详细解读最左前缀优化原则的功能特点、业务场景、优缺点、底层原理,并通过Java示例展示其实现方式。
388 1
|
11月前
|
存储 Windows
Windows 记录一次磁盘相关的PC卡顿问题
【10月更文挑战第25天】本文记录了一次 Windows 10 电脑卡顿问题的排查与解决过程。通过资源监视器、事件查看器、SMART 信息检查、磁盘扫描、后台程序排查、驱动更新等步骤,最终通过磁盘碎片整理和调整虚拟内存设置解决了卡顿问题。文章还提供了定期磁盘维护、合理设置虚拟内存及关注硬件健康的预防措施。
453 1
Elasticsearch自定义时间格式
Elasticsearch自定义时间格式
284 0
|
tengine 移动开发 网络协议
Nginx之Tengine主动健康检查解读
Nginx之Tengine主动健康检查解读
|
缓存 Java 数据库连接
探究Spring Boot中@PostConstruct注解的使用场景
【6月更文挑战第2天】在Spring Boot开发过程中,了解和合理利用@PostConstruct注解是非常重要的。这个简单却强大的注解能够帮助开发者在依赖注入完成之后执行初始化逻辑,从而确保组件在使用前已经完全准备就绪。
349 4
|
消息中间件 SQL Kafka
实时计算 Flink版产品使用问题之独立集群与hdfs集群不在一起,何配置checkpoint目录为hdfs
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
存储 分布式计算 Hadoop
|
存储 Kubernetes 关系型数据库
使用开源ProxySQL构建PolarDB-X标准版高可用路由服务
本文将指导如何快速搭建和配置PolarDB-X标准版与ProxySQL,并提供验证高可用路由服务验证测试。
springboot集成websocket
springboot集成websocket
128 0