ES7与ES8特性
ES7与ES8特性
ES7特性
ES7只有2个特性:
- includes()
- 指数操作符
ES8特性
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.values(obj).forEach(value =>
{
console.log(value); // 输出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()
效果和padStart()类似
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个理由》。