快速领略ES13新特性，为你十分钟内解锁JavaScript的最新奥秘

2024-01-22 07:55:37

ES13：踏上 JavaScript 语言新征程

对象扩展：私有字段与访问器

ES13 引入私有字段，使我们能够在对象内部定义和使用仅限该对象访问的私有数据。这增强了对象的封装性，使我们能够更安全、更有效地管理敏感信息。此外，访问器允许我们定制对对象属性的访问和设置行为，进一步增强了代码的可读性和可维护性。

示例：

class Person {
  #name;
  #age;

  constructor(name, age) {
    this.#name = name;
    this.#age = age;
  }

  getName() {
    return this.#name;
  }

  setName(name) {
    this.#name = name;
  }
}

数组改进：includes() 与 flatMap()

includes() 方法的加入，使我们能够更方便地检查数组中是否包含特定元素。这简化了数组查找操作，减少了冗长的条件检查。另一方面，flatMap() 方法将数组中的所有元素降为一维数组，简化了嵌套数组的处理，使我们能够更轻松地操作和遍历复杂数据结构。

示例：

const numbers = [1, 2, 3, 4, 5];

// 检查数组中是否包含 3
console.log(numbers.includes(3)); // true

// 将嵌套数组降为一维数组
const flattenedArray = numbers.flatMap((n) => [n, n + 1]);
console.log(flattenedArray); // [1, 2, 2, 3, 3, 4, 4, 5]

函数改进：可选链与空值合并运算符

可选链 (?.) 语法允许我们安全地访问可能为 null 或 undefined 的对象属性，避免了繁琐的条件检查。这简化了代码，使我们能够更优雅地处理空值。空值合并运算符 (??) 则提供了简便的方法来处理空值，返回非空值或指定默认值，使我们能够更简洁地处理潜在的空值情况。

示例：

const user = {
  name: 'John',
  address: {
    city: 'New York',
  },
};

// 安全地访问嵌套属性
console.log(user?.address?.city); // 'New York'

// 返回非空值或默认值
const city = user.address?.city ?? 'Unknown';
console.log(city); // 'New York'

数字增强：BigInt 与舍入方法

ES13 引入了 BigInt 类型，用于处理超出 JavaScript 常规数字表示范围的超大整数。这消除了整数溢出问题，使我们能够处理涉及大数字的计算，例如金融和密码学应用。此外，舍入方法的增强提供了更灵活的数字舍入选项，使我们能够根据特定的舍入规则自定义数字的舍入行为。

示例：

const bigInt = 12345678901234567890n;
console.log(bigInt); // 12345678901234567890n

// 使用舍入方法
console.log(123.456.toFixed(2)); // '123.46'

类扩展：类字段与静态块

类字段允许我们直接在类定义中声明和初始化字段，简化了类的编写，使我们能够更直观地定义类的属性和行为。静态块的加入，使我们能够在类实例化之前执行代码，增强了类的初始化过程，使我们能够执行与类相关的初始化操作，例如加载数据或验证类的不变量。

示例：

class Person {
  name = 'John';
  age = 25;

  static greet() {
    console.log('Hello from Person class!');
  }
}

// 访问类字段
const person = new Person();
console.log(person.name); // 'John'

// 调用静态块
Person.greet(); // 'Hello from Person class!'

模板字面量：模板元标签

模板字面量中加入了模板元标签，使我们能够在模板字符串中插入表达式，并控制模板字符串的渲染行为。这增强了模板字符串的灵活性，使我们能够动态生成和操作字符串，创建更复杂和交互式的文本输出。

示例：

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 'Hello, John!'

正则表达式：点号星号（dotAll）模式

点号星号模式 (.)* 的引入，扩展了正则表达式的功能，允许匹配包含换行符的字符串。这增强了正则表达式的处理能力，使我们能够编写更灵活和强大的模式来处理复杂文本。

示例：

const regex = /.*/;
const text = 'Hello\nWorld';

// 匹配包含换行符的字符串
const match = text.match(regex);
console.log(match); // ['Hello\nWorld']

语法扩展：逻辑赋值运算符

ES13 新增了逻辑赋值运算符，包括 ||=, &&= 和 ??=. 这些运算符将逻辑操作与赋值操作相结合，简化了条件赋值的代码编写。||= 运算符将 true 赋值给其左操作数，如果其右操作数为 true；而 &&= 运算符则将 false 赋值给其左操作数，如果其右操作数为 false。??= 运算符提供了一种简便的方法来处理空值，将非空值赋值给其左操作数，否则赋值默认值。

示例：

let result = 10;

// 如果 result 为 true，将其赋值为 20
result ||= 20;
console.log(result); // 20

// 如果 result 为 false，将其赋值为 0
result &&= 0;
console.log(result); // 0

// 如果 result 为空，将其赋值为 100
result ??= 100;
console.log(result); // 20

符号扩展：符号

ES13 为 Symbol 类型增加了属性，允许我们为 Symbol 值提供一个可读的。这增强了 Symbol 的调试和可读性，使我们能够更轻松地识别和理解 Symbol 值。

示例：

const symbol = Symbol('My Symbol');

// 添加
symbol.description = 'This is my symbol.';

// 访问描述
console.log(symbol.description); // 'This is my symbol.'

错误处理：错误栈捕获

ES13 引入了错误栈捕获功能，允许我们在抛出错误时捕获当前的错误栈信息。这简化了错误的调试和跟踪，使我们能够更轻松地识别错误的根源和上下文。

示例：

try {
  throw new Error('Something went wrong!');
} catch (error) {
  // 访问错误栈
  console.log(error.stack);
}

数据结构：WeakRef 与 FinalizationRegistry

WeakRef 是一种弱引用类型，它指向另一个对象，但不阻止垃圾回收器回收该对象。这使我们能够在不创建循环引用的情况下跟踪对象，并在对象被垃圾回收时执行特定的操作。FinalizationRegistry 则是一种注册表，允许我们在对象被垃圾回收之前执行特定的操作。这使我们能够执行诸如释放资源、取消订阅事件或持久化数据等清理操作。

示例：

// 使用 WeakRef 跟踪对象
const weakRef = new WeakRef(object);

// 使用 FinalizationRegistry 执行清理操作
const registry = new FinalizationRegistry((heldValue) => {
  // 清理操作
});

// 注册对象进行清理
registry.register(object, 'some data');

安全性：同源策略放松

ES13 放宽了同源策略，允许在特定情况下跨越不同域的 iframe 共享数据。这增强了跨域通信的灵活性，使我们能够在不同的域之间创建更丰富的应用程序和集成。

示例：

// iframe 中的脚本
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';

// 允许 iframe 与父窗口共享数据
iframe.setAttribute('allow', 'cross-origin');

// 访问 iframe 中的数据
const data = iframe.contentWindow.data;