10 个让你看起来更像 JavaScript Pro 的技巧

1,939 0 10

前端发展太快了，各种技术和框架层出不穷，很多人都在喊学不会了！事实上，`JavaScript` 是主要的前端语言，尽管它每年都在快速发展，新功能不断涌现，但这取决于开发速度更快的 `JavaScript` 开发人员，因为许多相对较新的功能已经得到了很高的采用！

以下是一些已被广泛采用的新功能。

1. 无效合并运算符

这？？运算符是 ES2020 标准中引入的新运算符，它提供了一种简单的方法来在变量为 null 或未定义时提供默认值，而不是使用传统的 || 操作员。

例如：

const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: ”,
showSplashScreen: false
}
};

const undefinedValue = response.settings.undefinedValue ?? ‘some other default’; // result: ‘some other default’
const nullValue = response.settings.nullValue ?? ‘some other default’; // result: ‘some other default’
const headerText = response.settings.headerText ?? ‘Hello, world!’; // result: ”
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

当变量为 null 或未定义时，?? 运算符将返回右侧的默认值。除此之外？？运算符会将 0 和 ‘’ 视为有效值。注意：?? 运算符仅在变量为 null 或未定义时提供默认值，否则返回变量本身的值。

2.可选的链接运算符

`？ ` 运算符也是 ES2020 标准中引入的新运算符，提供了一种在访问深层嵌套属性时避免 TypeError 的简单方法。例如：

var street = user.address && user.address.street;

var fooInput = myForm.querySelector(‘input[name=foo]’)
var fooValue = fooInput ? fooInput.value : undefined

// Simplification
var street = user.address?.street
var fooValue = myForm.querySelector(‘input[name=foo]’)?.value

当对象的属性不存在时，?. 在访问深度嵌套的属性时，此运算符提高了代码的可读性和健壮性。

3.动态导入

import() 是一种在运行时根据需要动态引入模块的方法。它可用于异步加载代码，提高应用程序的性能和响应能力。例如：

// Static import
import { foo } from ‘./my-module.js’;

// Dynamic import
import(‘./my-module.js’)
.then((module) => {
const foo = module.foo;
// Do something with the module.
});

动态介绍的场景包括但不限于

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

动态引入返回一个可以像普通函数一样使用的 `promise`。它在异步加载模块以提高代码的性能和可维护性时非常有用。

4. 使用顶级 Await 简化异步函数

顶级 await 允许开发人员通过在 async 函数之外使用 await 字段来简化代码。以前，如果我们想在全局范围内使用 await，我们必须将代码包装在一个异步函数中。例子：

(async function () {
await Promise.resolve(console.log(‘🎉’));
// → 🎉
})();

现在我们可以直接使用顶层的await，例如：

await Promise.resolve(console.log(‘🎉’));

注意：顶级 await 需要支持 ES2021 标准的 JavaScript 环境才能使用。

5.使用箭头函数简化代码

箭头函数是一种简洁的函数语法，可以大大简化代码。例子：

const double = (x) => x * 2;

6. 用 Array.prototype.at() 简化 arr.length

Array.prototype.at() 以正整数或负整数作为参数来获取指定位置的成员。正数表示向下的第一个数，负数表示向下的最后一个数，这样可以很容易地找到数组末尾的元素。

例子：

var arr = [1, 2, 3, 4, 5]
console.log(arr.at(-1)) // 5

7. 使用 Proxy 代替 Object.defineProperty

Proxy 可以代理整个对象，而 Object.defineProperty 只能代理一个属性。此外，Proxy 可以监听对象的新属性和数组修改，而 Object.defineProperty 则不能。

例如，responsive reactive 的基本实现

function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
// Can do dependency collection
track(target, key)
return target[key]
},
set(target, key, val) {
target[key] = val
// Trigger dependency
trigger(target, key)
}
})
}

8.使用BigInt支持大整数计算问题

ES2020 引入了一种新的数据类型 BigInt 来表示任意位数的整数。除了使用 BigInt 声明一个大整数外，还可以使用数字后跟 n 的形式。

重要的是要了解在操作 BigInt 数字时支持什么以避免走错方向。

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

// BigInt
BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false

9. 使用 Promise.any 快速获取一组 Promise 实例中第一个 fulfilled 的 promise

Promise.any 以一组 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.
}

10. 使用散列前缀 # 使类字段私有

类中以哈希前缀#标记的字段将是私有的，不会被子类实例继承

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