2020年js新特性

最近项目没有那么忙，就能多抽出时间来为大家更新博哥，顺便也是自己学习历程记录
本篇文章就为大家介绍一下2020年js都出现了哪些新特性
我就从使用的频繁度来为大家介绍

• 1、可选链操作符
  我们是不是在代码中经常这么写

if (data && data.list && data.list.name) {
	//do something
}
// 我们都知道这么写是为了容错，减少代码异常问题，但是这么写很不优雅

js的新特性中为我们添加了可选链操作符，以上代码就可以这么写

if (data ? .list ? .name) {
	// do something
}
// 怎么样是不是优雅多了
// 如果list不存在（null/undefined）的话，表达式就会直接返回undefined

2、空位合并操作符

我有这样一段代码

let c = a ? a : b
// 或者let c = a || b
// 意思不用我解释了吧，a存在话将a赋给c，a不存在的话将b赋给c

上面这些有个弊端：当第一个值为0 false等情况的时候，也会将b赋给c，但有时候0 或者false可能是个有效值

有了空位合并操作符，我们就可以排除上面的弊端

let c = a ?? b
// 仅在第一项为null或者undefined时，才会使用第二个值

3、BigInt

我们都知道，js的Math函数的处理一直糟糕，其中之一的体现就是无法精确表示2^53以上的数，这就是让js处理大的数字比较困难

1234567890123456789 * 123 = 151851850485185200000
// 结果丢失了精度

如果使用BigInt

1234567890123456789n * 123n = 151851850485185182464n
// 或者
BigInt(1234567890123456789) * BigInt(123) = 151851850485185182464n

1234567890123456789n * 123 // 报错，BigInt不可以和Number直接使用符号计算
console.log(1234567890123456789n > 123) // BigInt可以和Number直接进行比较
// 将BigInt转化为string
console.log(1234567890123456789n.toString()) // '1234567890123456789'
// 如果对BigInt直接使用Number方法，仍然会失去精度
console.log(Number(1234567890123456789n)) // 151851850485185200000

数字后面加上n，表示此类数字为BigInt类型，或者使用全局函数BigInt也可以转化

需要注意：BigInt不可以和Number混用，两者可以直接进行比较，但是不可以直接使用 + - * / %等符号直接计算

4、Object.entries() 和 Object.fromEntries()

let obj = {
  a:1,
  b:2,
  c:3
}
console.log(Object.entries(obj))
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]
for (let [key, value] of Object.entries(obj)) {
  console.log(key, value)
}
// a 1
// b 2
// c 3

let arr = [['a', 1], ['b', 2], ['c', 3]]
console.log(Object.fromEntries(arr))
// { a: 1, b: 2, c: 3 }

5、Promise.allSettled()

Promise.allSettled()区别，Promise.all()如果有一个是reject，直接阻断不再执行，但是Promise.allSettled()不会阻断，也就是说Promise.allSettled()缺少了安全检查

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

---

下面介绍一下可能并不常用的新特性
1、类的私有变量

我们现在实现类似私有变量的功能都是通过闭包来实现

function fn1 () {
	let a = 1
	function fn2 () {
		alert(a)
	}
}
// 闭包就是能够读取其他函数内部变量的函数，并且在fn1函数执行后，a变量不会被垃圾回收机制回收，仍然保留在内存中，我们调用fn2可以获取到

新特性中直接实现了这种操作

class People {
  #x = 1
  test () {
    console.log(this.#x)
  }
}
let a = new People()
a.test() // 1
console.log(a.#x) // 报错，私有变量，在外部调用不到

2、static 字段

在类中添加了静态关键字
他可以替代枚举

class People {
  static x = 111
  static y = 222
}
console.log(People.y) // 222

3、Top-level await

ES2017（ES8）中的 async/await 特性仅仅允许在 async 函数内使用 await 关键字，新的提案旨在允许 await 关键字在顶层内容中的使用，例如可以简化动态模块加载的过程

const resource = await import '../aaa.js'

好处：Top-level await 更易于使用，并使得异步初始化对导入程序变得透明
坏处：Top-level await 延迟了导入模块的初始化。因此，最好谨慎使用。对于需要花费很长时间的异步任务可以放到后面或者按需引入