聊聊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个理由》。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发实现布局中为控件添加选择器的方法
- Android控制文本输入框最多输入10个字符长度
- Elasticsearch 内部数据结构深度解读
- 关于 Elasticsearch 段合并,这一篇说透了!
- 解了这十道C语言题,你敢说你精通C语言?
- 微服务中使用Maven BOM来管理你的服务版本
- 设计模式之代理模式(文末赠书)
- 使用Spring IoC容器:选BeanFactory还是ApplicationContext?
- Stream使用这么久,它是如何提高遍历集合效率?
- FastDFS 分布式文件系统入门
- 「翻译」 如何Bypass rbash
- 代码审计-.NET下的序列化与反序列化(BinaryFormatter)
- 深入探讨 JavaScript 逻辑赋值运算符
- Spring IoC依赖注入:Spring提供了哪些依赖注入模式和类型呢?
- 谈谈volatile