提升代码质量的最新js小技巧

1. ??

用于判断运算符左侧的值为null或undefined时，返回右侧的值

在 ES2020 引入的 ?? 运算符，也被称为null判断运算符( Nullish coalescing operator)它的行为类似||，但是更严，||运算符是左边是空字符串或false或0等falsy值，都会返回后侧的值。而??必须运算符左侧的值为null或undefined时，才会返回右侧的值。因此   

 0||1   // 1

 0??1    // 0

const data = {
  isNull: null,
  zero: 0,
  nullString: '',
  isTrue: false
};

const undefinedValue = data.isUndefined ?? '未定义'; // 结果：'未定义'
const isNull = data.isNull ?? '是否为空值'; // 结果: '是否为空值'
const text = data.nullString ?? 'Hello, world!'; // 结果: ''
const number = data.zero ?? 300; // 结果: 0
const isTrue = data.isTrue ?? true; // 结果: false

2. ?.

简化&&和三元运算符

?.也是在ES2020 引入，也称链判断运算符（optional chaining operator）

?.直接在链式调用的时候判断，判断左侧的对象是否为null或undefined，若是，就不会往下运算，并返回undefined，反之，返回右侧的值，常结合ts使用。

object?.props // 判断object是否有props值，有就返回props值
object?.[props] // 同上
fn?.(...arg) // 函数调用

3. 利用import()实现按需加载

动态导入import()以优化静态import

// 我们之前会利用import来进行初始化的加载
import defaultExport from "module-name";
import * as name from "module-name";

静态引入的import 语句需要依赖于 type="module" 的script标签，而且有的时候我们希望可以根据条件来按需加载模块，比如以下场景：

• 当静态导入的模块很明显的降低了代码的加载速度且被使用的可能性很低，或者并不需要马上使用它
• 当静态导入的模块很明显的占用了大量系统内存且被使用的可能性很低
• 当被导入的模块，在加载时并不存在，需要异步获取
• 当被导入的模块有副作用，这些副作用只有在触发了某些条件才被需要时

这个时候我们就可以使用动态引入import()，与函数相同可以用于各种地方，返回的是一个 promise

//形式 1
import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });
  
 //形式2
// 顶层 await（top-level await）简化 async 函数,顶层 await 允许开发者在 async 函数外部使用 await 字段
let module = await import('/modules/my-module.js');

4. String.prototype.replaceAll()

简化 replace 方法一次性替换所有子字符串

// replace 方法
console.log('aaa'.replace(/a/g,'A')) //AAA

// replaceAll
console.log('aaa'.replaceAll('a','A')) //AAA

5. Array.prototype.at()

 用于简化 Array.length 

Array.prototype.at()接收一个正整数或者负整数作为参数，表示获取指定位置的成员

参数正数就表示顺数第几个，负数表示倒数第几个，可以很方便的获取某个数组末尾的元素

var arr = [1, 2, 3, 4, 5]
// 获取最后一位
console.log(arr[arr.length-1]) //5
console.log(arr.at(-1)) // 5

6. 使用哈希前缀#将类字段设为私有

 在类中通过哈希前缀#标记的字段都将被私有，子类实例将无法继承

class ClassWithPrivateField {
    #privateField;
    #privateMethod() {
        return 'hello world';
    }
    constructor() {
        this.#privateField = 42;
    }
}

const instance = new ClassWithPrivateField()
console.log(instance.privateField); //undefined
console.log(instance.privateMethod); //undefined

7. Proxy 代理

Proxy的优势

• Proxy可以直接监听整个对象而非属性。
• Proxy可以直接监听数组的变化。
• Proxy有13中拦截方法，如ownKeys、deleteProperty、has 等是 Object.defineProperty 不具备的。
• Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改;
• Proxy做为新标准将受到浏览器产商重点持续的性能优化,也就是传说中的新标准的性能红利。

Object.defineProperty 的优势

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平。

Object.defineProperty 不足在于：

• Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
• Object.defineProperty不能监听数组。是通过重写数据的那7个可以改变数据的方法来对数组进行监听的。
• Object.defineProperty 也不能对 es6 新产生的 Map,Set 这些数据结构做出监听。
• Object.defineProperty也不能监听新增和删除操作，通过 Vue.set()和 Vue.delete来实现响应式的。

Proxy本质是构造函数，通过new即可产生对象，它接收两个参数：

• target表示的就是要拦截（代理）的目标对象
• handler是用来定制拦截行为（13种）

详情看Vue3与Vue2的响应式原理

8. Promise.any

 快速获取一组Promise实例中第一个fulfilled的promise

Promise.any 接收一组Promise实例作为参数

• 只要其中的一个 promise 成功，就返回那个已经成功的 promise
• 如果这组可迭代对象中，没有一个 promise 成功，就返回一个失败的 promise 和 AggregateError 类型的实例

try {
  const first = await Promise.any(promises);
  // Any of the promises was fulfilled.
} catch (error) {
  // All of the promises were rejected.
}
---------------------------------------
Promise.any(promises).then(
  (first) => {
    // Any of the promises was fulfilled.
  },
  (error) => {
    // All of the promises were rejected.
  }
)

9. BigInt

 表示任意位数的整数，支持大整数计算问题

 BigInt 是一个新的类型，它提供了一种方法来表示大于253的整数，253是Javascript可以精确地用number原语表示的最大数字。

// 超过 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

详情见：https://github.com/tc39/proposal-bigint