【转】聊聊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 = ['jQuery', 'ng', 'vue', 'react'];
if (arr.indexOf('vue') !== -1){
console.log('vue存在');
}

使用ES7

使用includes()验证数组中是否存在某个元素，这样更加直观简单：

let arr = ['react', 'angular', 'vue'];
if (arr.includes('vue')){
    console.log('vue存在');
}

指数操作符

不使用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

使用ES

使用指数运算符******，就像+、-等操作符一样：

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.values(obj).forEach(() =>{
    console.log(obj); // 输出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)
}

允许逗号之后，可以避免一些不必要的报错。

Async/Await

传送门
Async/Await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、中间值都更加方便，因此有望替代Promise，成为新一代的一步代码编写方式。
转自：https://blog.fundebug.com/2017/08/28/es7-and-es8/
感谢Fundebug的分享

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界

【转】聊聊ES7与ES8特性

Array.prototype.includes()

不使用ES7

使用ES7

指数操作符

不使用ES7

使用ES

Object.values()

不使用ES8

使用ES8

Object.entries()

不使用ES8

使用ES8

padStart()

不使用ES8

使用ES8

padEnd()

不使用ES8

使用ES8

Object.getOwnPropertyDescriptors()

不使用ES8

使用ES8

函数参数列表结尾允许逗号

不使用ES8

使用ES8

Async/Await

青团社招聘：

推荐阅读更多精彩内容