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

Object.values()

不使用ES8

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


let obj = {a: , b: , c: };

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

使用ES8

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


let obj = {a: , b: , c: }
Object.values(obj).forEach(value =>
{
console.log(value); // 输出1, 2, 3
});

Object.entries()

不使用ES8

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


let obj = {a: , b: , c: };

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

使用ES8

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


let obj = {a: , b: , c: };

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
,000.00
,000.00

使用ES8

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


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

输出结果如下:


      0.00
,000.00
,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
,000.00 ,000.00
,000.00 ,000.00

使用ES8

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


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

输出如下:


0.00                0.00
,000.00 ,000.00
,000.00 ,000.00

Object.getOwnPropertyDescriptors()

azatsBooks对象的定义如下:


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

不使用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个理由》

es8 --- 新特性的更多相关文章

  1. ECMAScript 2017(ES8)新特性简介

    目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...

  2. ES6/ES7/ES8新特性

    ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...

  3. ES8新特性——ES8 was Released and here are its Main New Features

    原文: https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66 -------- ...

  4. ES8新特性

    Object.values/Object.entries Object.values和 Object.entries是在ES2017规格中,它和Object.keys类似,返回数组类型,其序号和Obj ...

  5. es6/es7/es8常用新特性总结(超实用)

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

  6. 细解JavaScript ES7 ES8 ES9 新特性

    题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...

  7. ES6、ES7、ES8、ES9、ES10新特性

    ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...

  8. ES7/8新特性学习随笔

    随着每年EcmaScript都会为js带来一些新特性,带来更多美化的编程体验,今天就走进一下es2016/2017所带来的新特性 ES7新特性 includes() 指数操作符 ES8新特性 asyn ...

  9. ES6、7、8常用新特性总结(超实用)

    ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...

随机推荐

  1. OpenGL编程逐步深入(七)旋转变换

    准备知识 这一节我们来看一下旋转变换.旋转变换指的是给我们一个指点的点和角度,我们需要绕着过该点的轴线將对象旋转对应的角度.这里我们只改变X/Y/Z中的两个分量,第三个分量保持不变.这意味着我们的图形 ...

  2. Chromium Graphics: Video Playback and Compositor

    Video Playback and Compositor Authors: jamesr@chromium.org, danakj@chromium.org The Chromium composi ...

  3. CF620E New Year Tree(线段树+二进制)

    题解 弱智题,二进制表示位数.合并时用| 就是被1<<x卡了好久. 要写成1ll<<x才行 #include<iostream> #include<cstri ...

  4. 装了ubuntu后笔记本电脑的无线网卡用不了,怎么设置?

    百度经验的一篇文章 http://jingyan.baidu.com/article/ca2d939dd4f1b4eb6c31ce09.html 点击右上角的齿轮,选择“系统设置”   点击“软件和更 ...

  5. 监控mysqld服务

    #!/bin/bash #监控mysqld服务 #telnet 192.168.122.171 3306 | grep Connected | wc -l #远程检查 #num=`netstat -n ...

  6. Gradle编译spring3.x报错找不到itextpdf4.2.2解决方案

    google搜到一篇文章:http://www.bdtool.net/blog_356.html 试了文章里的两个方法,方法一不行,方法二有点搞头,但是还有些错.试着试着,突然成功了~ 我是这么做的 ...

  7. Windows安装两个mysql数据库步骤

    因为新旧项目数据库版本号差距太大.编码格式不同.引擎也不同,所以仅仅好装两个数据库. 本次安装两个mysql数据库.版本号各自是4.0.18,5.5.36.都是可运行文件直接安装. 本机上之前已经安装 ...

  8. 《AndroidStudio每日一贴》11. 重构之提炼为常量

    提炼为常量是从暂时变量高速提炼出静态常量,这也是我们经常使用的重构手段. 很多其它有用技巧请查看<AndroidStudio有用指南> 操作步骤: ➤ 菜单条: Refactor -> ...

  9. Android入门篇(一)Androidproject的搭建,导入与导出,图标的改动

       先说一些题外话吧.这是小珂同学的处女作.可能写的不好,请各位读者见谅.我先讲讲我为什么要写博文,那应该也是机缘巧合,有一次.我问学长一个问题,学长发了一个连接给我,里面是一篇博客.那时我仅仅是看 ...

  10. 开源项目 AllJoyn 基础服务

    AllJoyn 基础服务主要包含 Onboarding,Notification 和 Control Panel三个大项. 这三个也是编写App的最基础的,最经常使用的部分. Onboarding 提 ...