2024年必须要知道的7大Javascript特性

1. Promise.withResolvers（带解析器的 Promise）

这个新特性引入了一个创建 Promise 的新方法，它公开了其解析（resolve）和拒绝（reject）的回调函数。通过 Promise.withResolvers，开发者们可以创建可以在执行函数之外解析或拒绝的 Promise，从而在异步编程中提供了更大的灵活性。

const [promise, resolve, reject] = Promise.withResolvers();  
  
setTimeout(() => resolve('两秒后解析成功'), 2000);  
  
promise.then(value => console.log(value));  
// 两秒后输出: 两秒后解析成功

2. Object.groupBy()（对象分组）

Object.groupBy() 方法是一个新的添加，允许开发者按特定属性对数组中的对象进行分组，使数据处理变得更加简单。

const pets = [  
  { type: 'dog', name: 'Max' },  
  { type: 'cat', name: 'Kiki' },  
  { type: 'dog', name: 'Buddy' }  
];  
  
const groupedByType = Object.groupBy(pets, pet => pet.type);  
console.log(groupedByType);  
// 输出:  
// {  
//   dog: [{ type: 'dog', name: 'Max' }, { type: 'dog', name: 'Buddy' }],  
//   cat: [{ type: 'cat', name: 'Kiki' }]  
// }

3. Temporal（时间）

JavaScript 目前的日期和时间处理方法不够灵活且容易出错。Temporal 提案引入了一个新的 API，以更直观和高效的方式处理日期和时间。例如，Temporal API 提供了新的日期、时间和持续时间的数据类型，以及用于创建、操作和格式化这些值的函数。

const today = Temporal.PlainDate.from({ year: 2023, month: 11, day: 19 });  
console.log(today.toString()); // 输出: 2023-11-19  
  
const duration = Temporal.Duration.from({ hours: 3, minutes: 30 });  
const tomorrow = today.add(duration);  
console.log(tomorrow.toString()); // 输出: 2023-11-20

4. Pipe Operator（管道运算符）

管道运算符（|>）是一个提议中的语法，用于将函数调用链接在一起。它让你编写的代码更易读、更有表现力。例如，以下代码使用管道运算符过滤了一个数字数组，将每个数字乘以 2，然后将结果记录到控制台中：

const numbers = [1, 2, 3, 4, 5];  
const results = numbers  
  .filter(n => n % 2 === 0)  
  |> (_ => _.map(n => n * 2))  
  |> (_ => _.forEach(n => console.log(n)));  
  
// 输出:  
// 4  
// 8

5. Records and Tuples（记录和元组）

Records 和 Tuples 是提议中的数据结构，提供了一种更简洁和类型安全的方式来创建对象和数组。Records 类似于对象，但它们具有固定的属性和特定类型。Tuples 类似于数组，但它们具有固定的长度，并且每个元素可以有不同的类型。

let record = #{  
  id: 1,  
  name: "JavaScript",  
  year: 2024  
};  
console.log(record.name); // 输出: JavaScript

6. RegExp /v Flag（正则表达式 /v 标志）

/v 标志是正则表达式语法的一个提议性添加，它使开发者能够编写更易读和易维护的正则表达式。/v 标志会忽略正则表达式中的空格和注释，使复杂模式更易于阅读和理解。

const regex = /foo # 匹配字面字符串 'foo'  
               bar # 然后匹配 'bar'  
              /vx;  
console.log(regex.test('foobar')); // 输出: true

7. Decorators（装饰器）

装饰器是一种提议的语法，用于添加元数据或修改类、函数或属性的行为。装饰器可以用于实现各种功能，如日志记录、缓存和依赖注入。

function logged(target, key, descriptor) {  
  const original = descriptor.value;  
  descriptor.value = function(...args) {  
    console.log(`调用 ${key}，参数为`, args);  
    return original.apply(this, args);  
  };  
  return descriptor;  
}  
  
class Example {  
  @logged  
  sum(a, b) {  
    return a + b;  
  }  
}  
  
const e = new Example();  
e.sum(1, 2); // 控制台输出: 调用 sum，参数为 [1, 2]

这些只是预计在 2024 年到来的 JavaScript 中许多令人兴奋的新功能中的几个。这些功能将使 JavaScript 变得更加强大、表现力更强，更加愉快。