从ES5到ES6,然后到现在的ES2019,每一次迭代与更新都新增的一些新的属性和方法,让我们更加便捷地进行前端开发,当然这次也不例外,那么ES2019又带给我们什么新鲜玩意呢?一起来看看吧~
1. Object.entries()
可以用于将对象转化为数组
let dog = {
name:'小米',
skin:'white',
age:2
}
console.log(Object.entries(dog));// [['name','小米'],['skin','white'],['age',2]]
2. Object.fromEntries()
里面传一个数组作为参数,通常用于将数组转化为对象,通常可以作为Object.entries()的反操作,例如:
let mobilePhone = {
xiaomi:23,
huawei:12,
oppo:32,
vivo:18,
apple:10
};
let mobilePhoneArr = Object.entries(mobilePhone).filter(([brand,rate])=>{
return rate > 15
});
// [['xiaomi',23],['oppo',32],['vivo',18]]
let newFilterMobilePhone = Object.fromEntries(mobilePhoneArr);
console.log(newFilterMobilePhone)
// {xiaomi:23,oppo:32,vivo:18}
注意,如果属性名一样的情况下,那么后者会把前者给替换掉,例如:
var mobileArr = [['xiaomi',23],['oppo',32],['vivo',18],['oppo',190]];
console.log(Object.fromEntries(mobileArr))//{'xiaomi':23,'oppo':190,vivo:18};
3. Array.prototype.flat()
常用于将多维数组降维为一维数组,可以传参数,表示降维的深度,默认是1,如果传入的深度参数超过了降维为一维参数所需要的深度也没关系, 如果不知道深度的情况下,我们可以传一个Infinity作为深度参数,这样的话,不管你有多深,都会打成一维数组。举个栗子:
let numberArr = [
[12,34,[13,48]],
[23,89],
[43,39],
[76,20]
];
var numberFlat = numberArr.flat(2);
console.log(numberFlat); // [12,34,13,48,23..,]
// 传入 Infinity "动态参数";
console.log(numberArr.flat(Infinity))// 同上
使用flat 移除空项
let arrIndex = [1,3,5,9,0,,12];
console.log(arrIndex.flat())// [1,3,5,9,0,12];
4. Array.prototype.flatMap(callback)
用于展平嵌套数组,相当于先对数组进行map操作,然后进行flat操作,其深度为1,此函数用一个回调函数作为参数。回调函数用于指示数组应该怎样被展平。
console.log(arr.flatMap((item)=>{
return [item*2]
})); // [24,108,20,128],相当于
console.log(arr.map((item)=>{
return [item*2]
}).flat())// [24,108,20,128]
5. String.trimStart()和String.trimEnd()
去除字符串(前)后面的空格
var str = ' Hello,ES2019! ';
console.log(str.trimLeft().trimRight()); // Hello,ES2019!
console.log(str.trimStart().trimEnd()); // Hello,ES2019!
6. 可选catch的绑定,可以不传catch参数
// 以前
try {
...
} catch (error) {
// 必须要传参数error
...
}
// 现在
try {
...
} catch {
// 不用传参数
...
}
7. Function.toString()
以前返回的是去掉空白符符号的字符串,现在是基本上是原样返回
function getFunc(a,b) {
return a + b;
}
console.log(getFunc.toString())// 字符串getFunc函数
8. 符号描述Symbol
当我们在 JS 中创建一个 Symbol时,可以指定一个在以后用于调试的描述。要得到这个描述,一般我们要再次创建Symbol,现在不用了,Symbol有一个新的只读属性description.
let symbol = Symbol('aDescription');
console.log(symbol.description)// aDescription 字符串
本人才疏学浅,如果文中有什么不妥之处,欢迎指正,谢谢~😄