原文链接： github.com
介绍
或许是因为 ES7/ES8 更新的东西相比 ES6 来说比较少，所以关于他们的文章和知识也就用得比较少，反正我也是整理一点咯。
1、ES7 - includes()
Array.prototype.includes() 使用场景：验证数组中是否存在某个元素。
1-不使用ES7 使用 indexOf() 判断返回值是否 -1 ，若是则为不存在，反之存在。
let t = ['hello','leo','perfect']; if(t.indexOf('leo')!=-1) console.log('存在');
2-使用ES7 使用 includes() 简单判断，返回 True 为存在，False 不存在。
let t = ['hello','leo','perfect']; if(t.includes('leo')) console.log('存在');
2、ES7 - 指数操作符
1-不使用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
2-使用ES7 使用指数运算符**，就像+、-等操作符一样：
console.log(7**3);
3、ES8 - Object.values()
通常用于遍历对象的属性值。
1-不使用ES8
使用Object.keys()遍历对象的属性值，需要通过属性名key去获取属性值：
let obj = {a: 1, b: 2, c: 3}; Object.keys(obj).forEach((key) => // Object.keys() 对象=>数组 { console.log(obj[key]); // 输出1, 2, 3 });
2-不使用ES8 使用Object.values()遍历对象的属性值，无需使用使用属性名：
let obj = {a: 1, b: 2, c: 3} Object.values(obj).forEach(value => { console.log(value); // 输出1, 2, 3 });
4、ES8 - Object.entries()
遍历对象的属性名和属性值。
1-不使用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 })
2-不使用ES8 使用Object.values()遍历对象的属性值，无需使用使用属性名：
let obj = {a: 1, b: 2, c: 3}; Object.entries(obj).forEach(([key, value]) => { console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3 })
5、ES8 - padStart()
在字符串前面填充指定的字符串。
1-不使用ES8
使用Object.keys()遍历对象的属性名和属性值：
console.log('0.00') // 0.00 console.log('10,000.00') // 10,000.00 console.log('250,000.00') // 250,000.00
2-不使用ES8 使用padStart()可以在字符串前面填充指定的字符串：
console.log('0.00'.padStart(20)) // 0.00 console.log('10,000.00'.padStart(20)) // 10,000.00 console.log('250,000.00'.padStart(20)) // 250,000.00
6、ES8 - padEnd()
在字符串后面填充指定的字符串。
1-不使用ES8
使用Object.keys()遍历对象的属性名和属性值：
console.log('0.00 ' + '0.00' ) // 0.00 0.00 console.log('10,000.00 ' + '10,000.00' ) // 10,000.00 10,000.00 console.log('250,000.00 ' + '250,000.00') // 250,000.00 250,000.00
2-不使用ES8 使用padEnd()可以在字符串后面填充指定的字符串：
console.log('0.00'.padEnd(20) + '0.00' ) // 0.00 0.00 console.log('10,000.00'.padEnd(20) + '10,000.00' ) // 10,000.00 10,000.00 console.log('250,000.00'.padEnd(20) + '250,000.00') // 250,000.00 250,000.00
7、ES8 - 函数参数列表结尾允许逗号
1-不使用ES8
var f = function(a, b, c, d // d之后不能带逗号 ) { console.log(d) }
2-使用ES8
var f = function(a, b, c, d, // d之后允许带逗号 ) { console.log(d) }
允许逗号之后，可以避免一些不必要的报错。
8、ES8 - 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 ，成为新一代的一步代码编写方式。
