目录
私有变量 Private Class Variables
类的主要作用之一是将我们的代码包含在可重用的模块中。所以会在许多不同地方使用到同一个类,而你可能不希望其中的所有内容在全局范围内都可用。
现在,通过在变量或函数前面添加一个哈希符号#
,可以将它们设为私有属性,只在类内部可用。
class Message {
#message = "Howdy"
greet() { console.log(this.#message) }
}
const greeting = new Message()
greeting.greet() // Howdy
console.log(greeting.#message) // Private field '#message' must be declared in an enclosing class
Promise.allSettled
当我们处理多个promise
时,尤其是当它们相互依赖时,记录每个事件在调试中发生的错误可能很有用。使用Promise.allSettled
,它会创建一个新的promise
,在所有promise
完成后返回一个包含每个promise
结果的数组。
const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));
Promise.allSettled([p1, p2]).then(data => console.log(data));
// [
// Object { status: "fulfilled", value: undefined},
// Object { status: "rejected", reason: undefined}
// ]
空值合并运算符 Nullish Coalescing Operator
由于JavaScript是动态类型的,因此在分配变量时,您需要牢记JavaScript对真/假值的处理。如果我们有一个带有某些值的对象,有时我们希望允许使用假值,例如空字符串或数字0。而这时设置默认值会覆盖有效值的内容:
let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18
使用双问号运算符??
将实现在只有null或未定义时才允许使用默认值。
console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0
可选链 Optional Chaining Operator
与空值合并运算符相似,JavaScript处理假值时可能无法发挥我们想要的作用。如果我们想要的是未定义的,我们可以返回一个值,但是如果它的路径是未定义的,该怎么办?
通过在点符号前添加问号,我们可以将值路径的任何部分设置为可选,以便我们仍然可以与之交互。
let person = {};
console.log(person.profile.name ?? "Anonymous"); // Cannot read property 'name' of undefined
console.log(person?.profile?.name ?? "Anonymous"); // Anonymous
console.log(person?.profile?.age ?? 18); // 18
BigInt
JavaScript可以处理的最大数字是2 ^ 53,通过MAX_SAFE_INTEGER可以查出这个值:
const max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991
如果超出这个数值做运算,事情会变得有些古怪…
console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true
使用BigInt
数据类型可以解决此问题。通过在数字末尾加上字母n
,我们就可以使用大数字运算。注意标准数字与BigInt数字不能混合使用。
const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2n); // 200000000000000000000000000000n
动态导入 Dynamic Import
在项目中,某些功能可能很少使用,而导入所有依赖项可能只是浪费资源。现在可以使用async / await
在需要时动态导入依赖项。
math.js 导出模块:
const add = (num1, num2) => num1 + num2;
export { add };
动态导入:
const doMath = async (num1, num2) => {
if (num1 && num2) {
const math = await import('./math.js');
console.log(math.add(5, 10));
};
};
doMath(4, 2);