ES新语法特性汇总
类似闭包方式实现数组循环中执行Ajax✨
var x = 0;
var fileNameArr = Object.values(data);
for (var value of fileNameArr)
{
(function (value){
setTimeout(function (){
downFile(value);
},x*1500);
})(value);
x++;
}
Object.assign对象一些操作🧨
// Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
// Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
Object.assign(menuEntity,data.field);
// 如果只有一个参数,Object.assign会直接返回该参数。
var obj = {a: 1};
Object.assign(obj) === obj // true
// 如果该参数不是对象,则会先转成对象,然后返回。
typeof Object.assign(2) // "object"
// 由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
Object.assign(undefined) // 报错
Object.assign(null) // 报错
//2、合并多个对象:将多个对象合并到某个对象。
const merge = (target, ...sources) => Object.assign(target, ...sources);
// 如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并
//3、为属性指定默认值
const DEFAULTS =
{
logLevel: 0,
outputFormat: 'html'
};
function processContent(options)
{
let options = Object.assign({}, DEFAULTS, options);
}
// 上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。
// 注意,由于存在深拷贝的问题,DEFAULTS对象和options对象的所有属性的值,都只能是简单类型,而不能指向另一个对象。否则,将导致DEFAULTS对象的该属性不起作用。
ES9😎
异步迭代
// wait 可以和 for of 循环一起使用,运行异步操作
async function getCg (cgIdArr){
for await (let cgId of cgIdArr)
{
// ajax
}
}
Promise.finally()
Promise.resolve().then().catch(e => e).finally();
ES10💨
Array.flat(deep)
参数决定了可以扁平化到哪一个层级,没有参数的时候默认为 1,返回新的数组,对原数组不产生影响
[1, 2, [[3, 4]]].flat(1); // [1, 2, [3, 4]]
[1, 2, [[3, 4]]].flat(2); // [1, 2, 3, 4]
// 无论嵌套多深,都会变成一维数组
[1, 2, [[3, 4]]].flat(Infinity); // [1, 2, 3, 4]
// 删除数组中的空值
[1, , 2, 3].flat() // [1, 2, 3]
Array.flatMap()
区别:
[1, 2, 3, 4].flatMap(a => [a*2]); // [2, 4, 6, 8]
[1, 2, 3, 4].map(a => [a*2]); // [[2], [4], [6], [8]]
String.trimStart() 和 String.trimEnd()
去除字符串首尾空白字符
Object.fromEntries()
返回一个给定对象自身可枚举属性的键值对数组
// 通过 Object.fromEntries, 将 Map 转为 Object:
const map = new Map([ ['a', 1], ['b', 2] ]);
console.log(Object.fromEntries(map)); // { a: 1, b: 2 }
ES11👉
?? 空值处理
?? 左侧的值必须是 undefined 或者 null 的时候,才会返回返右侧的值,否则返回左侧的值。
let breeze = {
a: 0,
b: false,
c: null,
d: undefined,
e: 'ceshi',
}
let a = breeze.a ?? '1' // 0
let b = breeze.b ?? '2' // false
let c = breeze.c ?? '3' // 3
let d = breeze.d ?? '4' // 4
let e = breeze.e ?? '5' // 'ceshi'
?. 可选链 判断是否存在
?. 判断不确定的中间节点,代替 && 节省代码空间
let breeze = {}
let name = breeze.people.name // TypeError: Cannot read property 'name' of undefined
let color = breeze.people?.color // undefined
基本数据类型 BigInt
BigInt(value)
可以表示任意大的整数
任意精度的整数
链式调用🥨
class Obj{
a(){
console.log("方法1");
return this;
}
b(){
console.log("方法2");
return this;
}
}
(new Obj).a().a().b().b();