DanLevy.net

测验：你了解现代 JavaScript 吗？

展示你卓越的 JavaScript 技能！

你了解 ES2015 与 ES2022 的区别吗？

1. 

ES2020

result 的值是多少？

console.log(null ?? 100);

检查 JavaScript 运算符的精确语义。常见的误导答案往往是旧语法的行为，而不是此特性的实际表现。

空值合并运算符（??）在左侧操作数 (a) 为 null 或 undefined 时返回右侧操作数 (b)。本例中 a 为 null，因此 result 为 100。

2. 

ES2020

以下代码的输出会是什么？

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是该特性的实际表现。

空值合并运算符（??）将 false 等 falsy 值视为有效值。由于 value 为 false，它被视为有效并直接返回。

3. 

可选链

以下代码的输出是什么？

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的表现。

可选链运算符 (?.) 在左侧为 null 或 undefined 时会停止求值。由于 obj.foo 为 null，obj.foo?.bar 的结果是 undefined。

4. 

BigInt

以下代码的输出是什么？

const a = 42n;
const result = a * 2n;
console.log(result);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际表现。

BigInt 值通过在数字后添加 n 创建。不能在算术运算中混合使用 BigInt 和普通数字。这里两个值都是 BigInt，所以乘法可以进行，结果是 84n。

5. 

动态导入

这会输出什么？

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际表现。

import() 函数返回一个 Promise，该 Promise 解析为模块对象。由于 Promise 实例是对象，typeof modulePromise 会输出 'object'。

6. 

Promise.allSettled

以下代码的结果会是什么？

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际表现。

Promise.allSettled 返回一个数组，数组中的对象描述每个 promise 的结果。第一个 promise 是 fulfilled，其值为 'success'，因此日志会打印 fulfilled: success。

7. 

String.matchAll

str.matchAll() 返回什么？

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际返回。

String.matchAll 返回匹配的迭代器，而不是数组。可以使用该迭代器获取字符串中的所有匹配组。

8. 

Import Meta

import.meta.url 表示什么？

console.log(import.meta.url);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际作用。

import.meta 是一个包含当前模块元数据的对象。import.meta.url 属性表示当前模块的 URL，可用于获取脚本运行位置的信息。

9. 

逻辑赋值

逻辑赋值后 a 的值是多少？

let a = null;
a ||= 10;
console.log(a);

检查 JavaScript 运算符的精确语义。常见的误导答案往往是旧语法的行为，而不是此特性的实际表现。

逻辑或赋值运算符 (||=) 会在左侧值为 falsy（null、undefined、0、false 等）时将右侧值赋给左侧。因为 a 为 null，所以它被赋值为 10。

10. 

逻辑空值赋值

在空值赋值后，b 的值是多少？

let b = null;
b ??= 10;
console.log(b);

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际效果。

空值合并赋值 (??=) 会在左侧值为 null 或 undefined 时赋予右侧的值。由于 b 为 null，它被赋值为 10。

11. 

WeakRef

WeakRef 提供了什么？

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

检查 JavaScript 运算符的精确语义。诱人的答案往往是旧语法的行为，而不是此特性的实际作用。

WeakRef 提供对对象的弱引用，如果没有其他引用存在，对象可以被垃圾回收。由于这里 obj 仍被强引用，deref() 返回原始对象。如果目标已被回收，deref() 将返回 undefined。

Loading comments...