JavaScript ES2024新特性解析：从Pipeline Operator到Records-IJ笔记

JavaScript ES2024新特性解析：从Pipeline Operator到Records

随着ECMAScript标准的持续演进，JavaScript每年都会带来令人兴奋的新特性。ES2024虽然还未正式发布，但已经有一些提案进入了Stage 3或Stage 4，这些特性将极大地提升开发体验。本文将深入探讨几个最值得期待的ES2024新特性。

1. Pipeline Operator (|>)

Pipeline Operator是函数式编程爱好者期待已久的特性，它允许我们以更直观的方式组合函数调用。

// 传统方式
const result = Math.round(Math.abs(parseFloat("-3.14159")));

// 使用Pipeline Operator
const result = "-3.14159"
  |> parseFloat
  |> Math.abs
  |> Math.round;

console.log(result); // 3

// 更复杂的示例
const users = [
  { name: "Alice", age: 25, active: true },
  { name: "Bob", age: 30, active: false },
  { name: "Charlie", age: 35, active: true }
];

const activeUserNames = users
  |> (arr => arr.filter(user => user.active))
  |> (arr => arr.map(user => user.name))
  |> (arr => arr.join(", "));

console.log(activeUserNames); // "Alice, Charlie"

2. Records & Tuples

Records和Tuples提案引入了真正的不可变数据结构，这对于状态管理和函数式编程至关重要。

// Records - 不可变对象
const user = #{
  name: "Alice",
  age: 25,
  address: #{
    city: "Beijing",
    country: "China"
  }
};

// 尝试修改会抛出错误
// user.name = "Bob"; // TypeError

// 创建新record
const updatedUser = #{ ...user, age: 26 };
console.log(updatedUser.age); // 26
console.log(user.age); // 25 - 原对象不变

// Tuples - 不可变数组
const coordinates = #[1, 2, 3];
const updatedCoordinates = #[...coordinates, 4];
console.log(updatedCoordinates); // #[1, 2, 3, 4]

// 深度相等比较
console.log(#[1, 2, 3] === #[1, 2, 3]); // true
console.log({ a: 1 } === { a: 1 }); // false

3. Decorators (Stage 3)

装饰器提案已经进入Stage 3，为类和类成员提供了强大的元编程能力。

// 自定义装饰器
function logExecutionTime(target, name, descriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    
    console.log(`${name} executed in ${end - start}ms`);
    return result;
  };
  
  return descriptor;
}

function validateEmail(target, name, descriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      throw new Error("Invalid email address");
    }
    return originalMethod.call(this, email);
  };
  
  return descriptor;
}

class UserService {
  @logExecutionTime
  @validateEmail
  sendWelcomeEmail(email) {
    // 模拟耗时操作
    for (let i = 0; i < 1000000; i++) {}
    console.log(`Welcome email sent to ${email}`);
  }
}

const service = new UserService();
try {
  service.sendWelcomeEmail("test@example.com");
  // service.sendWelcomeEmail("invalid-email"); // 抛出错误
} catch (error) {
  console.error(error.message);
}

4. Temporal API

Temporal API旨在解决JavaScript中日期时间处理的痛点，提供更现代、更易用的API。

// 创建时间点
const now = Temporal.Now.instant();
console.log(now.toString()); // 2024-03-29T01:00:00Z

// 处理时区
const zoned = now.toZonedDateTimeISO("Asia/Shanghai");
console.log(zoned.toString()); // 2024-03-29T09:00:00+08:00[Asia/Shanghai]

// 日期运算
const tomorrow = Temporal.Now.plainDateISO().add({ days: 1 });
console.log(tomorrow.toString()); // 2024-03-30

// 持续时间计算
const duration = Temporal.Duration.from({ hours: 2, minutes: 30 });
const later = now.add(duration);
console.log(later.toString()); // 2024-03-29T03:30:00Z

// 格式化
const formatter = new Intl.DateTimeFormat("zh-CN", {
  dateStyle: "full",
  timeStyle: "long",
  timeZone: "Asia/Shanghai"
});
console.log(formatter.format(zoned)); // 2024年3月29日星期六 中国标准时间 09:00:00

5. Array Grouping

Array.prototype.groupBy()方法让数组分组操作变得更加简单。

const products = [
  { name: "iPhone", category: "electronics", price: 999 },
  { name: "MacBook", category: "electronics", price: 1999 },
  { name: "T-shirt", category: "clothing", price: 29 },
  { name: "Jeans", category: "clothing", price: 79 },
  { name: "Coffee", category: "food", price: 5 }
];

// 按类别分组
const groupedByCategory = products.groupBy(product => product.category);
console.log(groupedByCategory);
/*
{
  electronics: [
    { name: "iPhone", category: "electronics", price: 999 },
    { name: "MacBook", category: "electronics", price: 1999 }
  ],
  clothing: [
    { name: "T-shirt", category: "clothing", price: 29 },
    { name: "Jeans", category: "clothing", price: 79 }
  ],
  food: [
    { name: "Coffee", category: "food", price: 5 }
  ]
}
*/

// 按价格范围分组
const groupedByPriceRange = products.groupBy(product => {
  if (product.price < 50) return "budget";
  if (product.price < 500) return "mid-range";
  return "premium";
});

// 计算每个分组的平均价格
Object.entries(groupedByPriceRange).forEach(([range, items]) => {
  const avgPrice = items.reduce((sum, item) => sum + item.price, 0) / items.length;
  console.log(`${range}: ${items.length} items, average price: $${avgPrice.toFixed(2)}`);
});