ES8基本特性整理
es8特性
tip: es8标准已于2017年6月发布
Object.values()
- 遍历对象属性值
let obj = {a: 1, b: 2, c: 3}
// - 使用Object.keys()获取
Object.keys(obj).forEach((key) => {
console.log(obj[key])
})
// - 使用for/of 获取
for (let key of Object.keys(obj)) {
console.log(obj[key])
}
// - 使用es8
Object.values(obj).forEach(value => { console.log(value) })
console.log(Object.values(obj)) // 输出结果为value组成的数组 [1,2,3]
tip: 虽然使用for/in也可以，但是当它碰到迭代枚举属性时，会破坏像prototype和tostring的属性得到意想不到的值。
Object.entries()
- 遍历对象的属性名和属性值
let obj = {a: 1, b: 2, c: 3}
// 使用Object.keys()遍历
Object.keys(obj).forEach((key) => {
console.log(key + ':' + obj[key])
})
// 使用for/of遍历
for (let key of Object.keys(obj)) {
console.log(key + ':' + obj[key])
}
// 使用Object.entries()
Object.entries(obj).forEach(([key, value]) => {
console.log(key + ':' + value)
})
console.log(Object.entries(obj)) // [['a',1],['b',2],['c',3]]
tip: Object.entries(x)强制x转换为对象，并以数组的方式返回其可枚举的自定义字符串
字符串填充
- padStart()
在字符串开始部位填充空格，返回一个给出长度的字符串–常用于格式化字符串
console.log('abc'.padStart(10))
console.log('abcdef'.padStart(10))
// abc
// abcdef
console.log('123'.padStart(10,'*')) // *******123
- padEnd()
在字符串尾端填充空格，返回一个给出长度的字符串
console.log('0.00'.padEnd(20) + '0.00')
console.log('10,000.00'.padEnd(20) + '10,000.00')
// 0.00 0.00
// 10,000.00 10,000.00
console.log('158'.padEnd(11,'*')) // 158********
console.log('158'.padEnd(11,'*').length) // 11
Object.getOwnPropertyDescriptors()
- Object.getOwnPropertyDescriptors返回对象obj所有自身属性描述。
这是一个多参数版本的Object.getOwnPropertyDescriptors(obj,propName)将会返回obj中propName属性的一个单独描述。 - 在ES5中，ECMAScript中没有单个方法来简化两个对象之间的正确拷贝。开发者要使用Object.assign()来拷贝对象, Object.assign()分配属性只有copy和定义新的属性。当我们使用更加复杂对象和类原型，这可能会出问题。
- Object.getOwnPropertyDescriptors允许创建真实的对象浅副本并创建子类,它通过给开发者描述符来做到这一点.在Object.create(prototype, object)放入描述符后，返回一个真正的浅拷贝。
Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
)
函数参数列表尾部允许逗号
- 避免不必要的报错
function(a,b,c){
console.log(a)
}
// es8
function(a,b,c,){
console.log(a)
}
async/await – 后续整理
- 使用promise写异步代码
function fetchData(url) {
return fetch(url)
.then(request => request.text())
.then(text => {
return JSON.parse(text);
})
.catch(err => {
console.log(`Error: ${err.stack}`);
});
}
- 使用async/await
async function fetchData(url) {
try {
let request = await fetch(url);
let text = await request.text();
return JSON.parse(text);
}
catch (err) {
console.log(`Error: ${err.stack}`);
}
}
tip: Async/Await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、中间值都更加方便，因此有望替代Promise，成为新一代的一步代码编写方式。