聊聊ES7与ES8特性
译者按: 转眼ES6发布2年了,是时候了解一下ES7与ES8特性了!
译者: Fundebug
为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。
我曾写过一篇关于ES6博客《10个最佳ES6特性》,这次我打算聊聊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个理由》。
关于Fundebug:
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用! ![](https://static.fundebug.cn/wechat_slogan.png)
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/28/es7-and-es8/
聊聊ES7与ES8特性的更多相关文章
- ES7 and ES8 特性
ES7 特性:1.Array.prototype.includes let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes( ...
- ES7的新特性
ES7的新特性 ES7 特性: 1.Array.prototype.includes2.Exponentiation Operator(求幂运算) 一,Array.prototype.includes ...
- ES6,ES7,ES8 常用特性总结
一. ES6(ES2015) 1. 变量 let 和常量 const var 的问题 可以重复声明,没有报错和警告 无法限制修改 没有块级作用域, { } let 和 const 不能重复声明 都是块 ...
- 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、ES7、ES8、ES9、ES10
ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多.在这里列举几个常用 ...
- ES6,ES7,ES8 常用
ES6常用新特性 let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a,因此 ...
- ES6、ES7、ES8
ES6 https://es6.ruanyifeng.com/ ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...
- 谈谈 ES7、ES8、ES9 和 Stage 3 的那些事儿
ES6 作为多年来 JavaScript 的重大版本变革,受到 JavaScript 开发者们的普遍欢迎. 也正是从 ES6 (ES2015) 开始,JavaScript 版本发布变为年更,即每年发布 ...
随机推荐
- iis发布后模板字体不能加载的解决方案
在使用ace模板的过程中就曾遇到过图标不显示的情况, 1.在iis和vs运行都不能显示图标,添加缺失的字体库后可以访问 2.把项目签入到阿里云时再一次失效,解决方法是添加Mime类型 .woff a ...
- Android NDK学习(七):NDK 编译支持 C++特有的库
如果你的C++代码中出现了很多C++特有的库,例如<iostream>,<list>等,那么你还需要在jni的文件夹下添加一个Application.mk文件,文件内容为: A ...
- webpack严格模式!!!忽略
1. babel5 babel: { options: { blacklist: ["useStrict"], // ... }, // ... } 2. babel6 修改.ba ...
- PHPExcel防止大数以科学计数法显示
在使用PHPExcel来进行数据导出时,常常需要防止有些数字(如手机号.身份证号)以科学计数法显示,我们可以采用下面的方式来解决: setCellValueExplicit第三个参数用PHPExcel ...
- Kali学习笔记11:僵尸扫描案例
什么是僵尸扫描?本质也是端口扫描,不过是一种极其隐蔽的扫描方式 所以几乎不会被发现,不过也有着很大缺陷:扫描条件很高 首先需要有一台僵尸机,这里我找好一台win10僵尸机器,IP地址为:10.14.4 ...
- 生产apollo搭建记录(五)
1. 生产apollo搭建记录(五) 1.1. 目标 搭建两个环境配置,dev和pro,但目前可用服务器限制,打算mysql用同一个,服务器分生产和测试 1.2. 数据库 建三个库 注意注意:在启 ...
- PHP之ThinkPHP框架(数据库)
PHP是网站后台开发语言,其重要的操作对象莫过于数据库,之前有了解过mysqli和pdo,但ThinkPHP的数据库交互必须使用其特定的封装方法,或者可以认为其是对PHP数据库操作的进一步封装,以达到 ...
- 人脸识别&ORC的Demo
一.用到的jar包: face_sdk-1.3.4.jar json-20160810.jar ocr_sdk-1.3.4.jar 下载地址:https://files.cnblogs.com/fil ...
- SonarQube 集成 GitLabCI
本文是用于分析SonarQube代码的质量,每次在GitLab上提交代码时都使用GitLab-CI运行器进行检查. 1.SonarQube with GitLab 安装插件GitLab-plugin ...
- 经典中的品味:第一章 C++的Hello,World!
摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! "程序设计要通过编写程序的实践来学习"-Brian ...