随着每年EcmaScript都会为js带来一些新特性，带来更多美化的编程体验，今天就走进一下es2016/2017所带来的新特性
ES7新特性
includes()
指数操作符
ES8新特性
async/await
Object.values()
Object.entries()
Object.getOwnPropertyDescriptors()
String padding
函数参数列表结尾允许逗号
开始学习ES7
1. Array.prototype.includes()
includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。
includes 函数与 indexOf 函数很相似，下面两个表达式是等价的：
arr.includes(x)
arr.indexOf(x) >= 0接下来我们来判断数字中是否包含某个元素：
// es7之前的做法
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存在');
}
2. 指数操作符
在es7中引入了指数运算符，**具有与Math.pow(..)等效的计算结果。
// es7之前的做法
const calculateExponent = (base, exponent) => {
if (exponent === 1) {
return base;
} else {
return base * calculateExponent(base, exponent - 1);
}
}
console.log(calculateExponent(2, 10)); // 输出1024
console.log(Math.pow(2, 10)); // 输出1024// es7
console.log(2**10);// 输出1024
开始学习ES8
1. async/await
这一篇章内容比较多，拆分了一个学习笔记（点击进入）
2. Object.values()
Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。
假设我们要遍历如下对象obj的所有值：
const obj = {a: 1, b: 2, c: 3};
// 不使用es8之前
const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]//es8
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]3.Object.entries
Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
接下来我们来遍历上文中的obj对象的所有属性的key和value：
// ES8以前
Object.keys(obj).forEach(key=>{
console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3
// es8
for(let [key,value] of Object.entries(obj1)){
console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3
4. Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。
函数原型：Object.getOwnPropertyDescriptors(obj)
返回obj对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。
const obj2 = {
name: 'Jine',
get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
// age: {
// configurable: true,
// enumerable: true,
// get: function age(){}, //the getter function
// set: undefined
// },
// name: {
// configurable: true,
// enumerable: true,
// value:"Jine",
// writable:true
// }
// }
5.String padding
在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。
String.padStart(targetLength,[padString])
- targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
- padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “。
console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))// 0.0 String.padEnd(targetLength,padString])
- targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
- padString:(可选) 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 “ “；
console.log('0.0'.padEnd(4,'0')) //0.00
console.log('0.0'.padEnd(10,'0'))//0.00000000
6 函数参数列表结尾允许逗号
这是一个不痛不痒的更新，主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。
// es8之前
//程序员A
var f = function(a,
b
) {
...
}
//程序员B
var f = function(a,
b, //变更行
c //变更行
) {
...
}
//程序员C
var f = function(a,
b,
c, //变更行
d //变更行
) {
...
}// es8
//程序员A
var f = function(a,
b,
) {
...
}
//程序员B
var f = function(a,
b,
c, //变更行
) {
...
}
//程序员C
var f = function(a,
b,
c,
d, //变更行
) {
...
}