ES新语法特性汇总

lijunyi2021-10-16前端ESx

类似闭包方式实现数组循环中执行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();
Last Updated 2024/5/24 16:21:58