聊聊ES7与ES8特性

ES7只有2个特性:

  • includes()
  • 指数操作符

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

  • Object.values()
  • Object.entries()
  • padStart()
  • padEnd()
  • Object.getOwnPropertyDescriptors()
  • 函数参数列表结尾允许逗号
  • Async/Await

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个理由》。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-08-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

Golang之匿名函数和闭包

 基本概念 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者 任何全局上下文中定义,而是在定义代码块的环境中定义。要执行的代码块...

3181
来自专栏Hongten

python开发_python中的Boolean运算和真假值

2281
来自专栏达摩兵的技术空间

js对象属性

相信对于对象属性大家都或多或少的知道一些,那么本文从属性说开去,看看大家对属性的了解是否有遗漏的部分。

3001
来自专栏前端架构与工程

【译】《Understanding ECMAScript6》- 第一章-基础知识(一)

目录: 更好的Unicode编码支持 codePointAt()函数 String.fromCodePoint() 用转义序列对Non-BMP字符编码 nor...

2745
来自专栏Spring相关

第12章—使用NoSQL数据库—使用MongoDB+Jpa操作数据库

SpringData还提供了对多种NoSQL数据库的支持,包括MongoDB;neo4j和redis.他不仅支持自动化的repository,还支持基于模板的数...

1072
来自专栏Netkiller

GSON 多层Map剥离

工作中遇到一个问题,我们提供给外包方的 json 无法Decode 。 一段简单 JSON 字符串,字符串如下。 String json= "{\"0\":{...

3144
来自专栏hotqin888的专栏

golang

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2003
来自专栏Golang语言社区

Go语言使用sort包对任意类型元素的集合进行排序的方法

本文实例讲述了Go语言使用sort包对任意类型元素的集合进行排序的方法。分享给大家供大家参考。具体如下: 使用sort包的函数进行排序时,集合需要实现sort....

3547
来自专栏行者常至

020.Java的反射机制

JAVA反射机制是在运行状态中, 对于任意一个类,都能够知道这个类的所有属性和方法; 对于任意一个对象,都能够调用它的任意方法和属性; 这种动态获取信息以...

861
来自专栏猿人谷

一个正则表达式测试(只可输入中文、字母和数字)

  在项目中碰到了正则表达式的运用,正则还是非常强大的,不管什么编程语言,基本上都可以用到。之前在用java时特别是对用户名或密码使用正则非常爽,写脚本上用正则...

7956

扫码关注云+社区

领取腾讯云代金券