我的开发笔记

ES新语法特性汇总

10/16/2021 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++;
    }
1
2
3
4
5
6
7
8
9
10
11

# 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对象的该属性不起作用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# ES9😎

# 异步迭代

// wait 可以和 for of 循环一起使用，运行异步操作
async function getCg (cgIdArr){
    for await (let cgId of cgIdArr)
    {
        // ajax
    }
}
1
2
3
4
5
6
7

# Promise.finally()

  Promise.resolve().then().catch(e => e).finally();
1

# 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]
1
2
3
4
5
6
7
8

# 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]]
1
2
3
4

# 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 }
1
2
3
4
5

# 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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# ?. 可选链 判断是否存在

  ?. 判断不确定的中间节点，代替 && 节省代码空间
  let breeze = {}
  let name = breeze.people.name // TypeError: Cannot read property 'name' of undefined
  let color = breeze.people?.color // undefined
1
2
3
4
5

# 基本数据类型 BigInt

BigInt(value)
可以表示任意大的整数
任意精度的整数
1
2
3

# 链式调用🥨

class Obj{

	a(){
	console.log("方法1");
	return this;
	}
	b(){
	console.log("方法2");
	return this;
	}
}

(new Obj).a().a().b().b();
1
2
3
4
5
6
7
8
9
10
11
12
13