es8 --- 新特性
ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性:
- Object.values()
- Object.entries()
- padStart()
- padEnd()
- Object.getOwnPropertyDescriptors()
- 函数参数列表结尾允许逗号
- Async/Await
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 --- 新特性的更多相关文章
- ECMAScript 2017(ES8)新特性简介
目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...
- ES6/ES7/ES8新特性
ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...
- 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 -------- ...
- ES8新特性
Object.values/Object.entries Object.values和 Object.entries是在ES2017规格中,它和Object.keys类似,返回数组类型,其序号和Obj ...
- es6/es7/es8常用新特性总结(超实用)
本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...
- 细解JavaScript ES7 ES8 ES9 新特性
题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...
- ES6、ES7、ES8、ES9、ES10新特性
ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多. 在这里列举几个常 ...
- ES7/8新特性学习随笔
随着每年EcmaScript都会为js带来一些新特性,带来更多美化的编程体验,今天就走进一下es2016/2017所带来的新特性 ES7新特性 includes() 指数操作符 ES8新特性 asyn ...
- ES6、7、8常用新特性总结(超实用)
ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a ...
随机推荐
- 解决夸dll返回dynamic无法访问
public static class DynamicFactory { //创建线程安全(对象不会再同一时刻被多个线程访问)的字典对象 private static ConcurrentDictio ...
- Bayes++ Library入门学习之熟悉namespace
Bayes++是一个开源的C++类库.这些类表示并实现了用于离散系统的贝叶斯滤波的各种数值算法.该库中的类提供测试和一致的数值方法,并且用层次明确的结构表明了各种滤波算法和系统模型类型. 接下来,我们 ...
- 什么是Node.js?
Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适 ...
- 给 “rm” 命令添加个“垃圾桶”
作者: 2daygeek 译者: LCTT amwps290 人类犯错误是因为我们不是一个可编程设备,所以,在使用 rm 命令时要额外注意,不要在任何时候使用 rm -rf *.当你使用 rm 命令时 ...
- selenium自动化框架介绍------unittest版本
首先说下unittest的两个问题:1.未实现失败重跑 2.未实现远程的分布式(即多线程呼起多台远程计算机,并行进行用例的执行), 为什么要使用框架: 比较方便,只需要写用例就行,而不用考虑结构.还 ...
- websocket调试工具
http://www.blue-zero.com/WebSocket/ wss://yy.xxx.com/video/websocket/client.ws
- 用Python爬取影视网站,直接解析播放地址。
记录时刻! 写这个爬虫主要是想让自己的爬虫实用,把脚本放到了服务器,成为可随时调用的接口. 思路算是没思路吧!把影视名带上去请求影视网站,然后解析出我们需要的播放地址. 我也把自己的接口分享出来.接口 ...
- Unity 设置窗体透明
设置窗口透明.窗口置顶.鼠标穿透 方法一. 缺点:边缘不平滑,有毛边 参考博客: 1.https://alastaira.wordpress.com/2015/06/15/creating-wi ...
- Canvas与Paint的0基础使用
看了非常多android自己定义方面的资料,了解了非常多原理,遇到人家自己定义的东西也可以看得懂,可是.当自己去自己定义的时候.发现脑袋一片空白,所以就先从认识Canvas和Paint開始吧! Can ...
- springMVC --全局异常处理(两种方式)
首先看springMVC的配置文件: <!-- 全局异常配置 start --> <bean id="exceptionResolver" class=" ...