2022年JS新增小技巧

1. null判断运算符??

?？类似于管道运算符||，但是表现上更为严格。

const a = 0 || 1; // 1
const b = 0 ?? 1; // 0

区别：
||运算符左边为假时（包括：null， undefined， ‘’， 0， false等），返回右边的值，否则返回左边的值
??运算符只有左边为null或者undefined时才返回右边的值，否则返回左边的值。
兼容性：

2. 链式判断运算符?.

const res = res.data ? res.data.list : []
const res = res.data && res.data.list

// 可简写成
const res = res.data?.list

?.直接在链式调用的时候判断，判断左侧的对象是否为null或undefined，如果是的，就不再往下运算，返回undefined，如果不是，则返回右侧的值

注：该运算符不仅可以用于对象，也可用于函数 如： func?.()

3. 顶层await

顶层 await 允许开发者在 async 函数外部使用 await 字段

(async function () {
  await Promise.resolve(console.log('🍭'))
})();
 
// 可简写成
await Promise.resolve(console.log('🍭'))

4. _分隔数字

typeof 1_000_000  // 'number'
1_000_000 === 1000000 // true

_操作符可分隔数字，增强可读性

5. BigInt

ES2020[1] 引入了一种新的数据类型 BigInt，用来表示任意位数的整数，支持大整数的计算问题

// 超过 53 个二进制位的数值（相当于 16 个十进制位），无法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
 
// BigInt
BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

除了使用BigInt来声明一个大整数，还可以使用数字后面加n的形式，如：

1234 // 普通整数
1234n // BigInt

6. Array.prototype.at()

Array.prototype.at()接收一个正整数或者负整数作为参数，表示获取指定位置的成员。
参数正数就表示顺数第几个，负数表示倒数第几个，这可以很方便的某个数组末尾的元素。

var arr = [1, 2, 3, 4, 5]

arr[arr.length - 1] //5
// 可简写成后
arr.at(-1) // 5

7.哈希前缀#

在类中可以通过哈希前缀#将字段私有，子类实例将无法继承

class Person {
    #money;
    #earnMoney() {
        return 'hello world';
    }
    constructor() {
        this.#money = 1000;
    }
}
 
const instance = new Person()
console.log(instance.money) //undefined
console.log(instance.earnMoney) //undefined

8. array.prototype.groupBy()

假设有一个员工列表，其中每个员工都是一个具有 2 个属性的对象：name 和 age。

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

我们需要对其进行按 age 分类，最终实现输出结果如下：

const groupedPeople = {
  20: [
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
  ],
  21: [
    { name: 'Alice', age: 21 }
  ]
}

之前的方法：借助array.reduce()

people.reduce((acc, obj) => {
    let key = obj.age
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})

可用groupBy简写成：

const groupedPeople = people.groupBy(({ age }) => age)
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [
//    { name: 'Alice', age: 21 }
//   ]
// }

groupBy也支持按条件自定义分类：

const groupedPeople = people.groupBy(({ age }) => age <= 20? 'a': 'b')
// {
//   'a': [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   'b': [
//    { name: 'Alice', age: 21 }
//   ]
// }

9. toLocaleString(‘en-US’)

将数字每隔三位用逗号分割，常见价格

const value = 123456797
Number(value).toLocaleString('en-US')  //123,456,797