为什么说新的JavaScript数组方法改变了我们的编程范式？深度对比与实战解析

const fruits = ['apple', 'banana', 'cherry'];
fruits.sort(); // 原数组被改变了
console.log(fruits); // ['apple', 'banana', 'cherry']

const fruits = ['apple', 'banana', 'cherry'];
const sorted = fruits.toSorted(); // 新数组，原数组不变
console.log(fruits); // ['apple', 'banana', 'cherry'] 保持不变
console.log(sorted); // ['apple', 'banana', 'cherry'] 排序后的新数组

// ❌ 使用传统可变方法的陷阱
class EditorHistory {
constructor() {
    this.versions = []; // 存储历史版本
  }

  addVersion(data) {
    const current = data.items; // 用户当前的数据
    this.versions.push(current); // 保存到历史
  }
}

const editor = new EditorHistory();
const myData = { items: [1, 2, 3] };
editor.addVersion(myData);

myData.items.sort(); // 用户对数据进行了排序
// 问题：历史记录中的版本也被改变了！因为存的是引用

// ✅ 使用不可变方法的解决方案
class EditorHistory {
constructor() {
    this.versions = [];
  }

  addVersion(data) {
    const current = [...data.items]; // 创建一个副本
    this.versions.push(current);
  }
}

// 或者使用新的不可变方法
const sortedItems = myData.items.toSorted(); // 自动创建新数组，原数据安全

const arr = [10, 20, 30, 40, 50];

// 老办法（需要计算长度）
console.log(arr[arr.length - 1]); // 50

// 新办法（一行代码搞定）
console.log(arr.at(-1)); // 50
console.log(arr.at(-2)); // 40
console.log(arr.at(0));  // 10

// 场景：处理日志流，要快速获取最新的日志
const logs = [...]; // 成千上万条日志
const recentError = logs.find(log => log.level === 'ERROR');
const nextLog = logs.at(logs.indexOf(recentError) + 1); // 优雅！

// 或者处理循环数组（比如轮播图）
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
const currentIndex = 1;
const nextImage = images.at((currentIndex + 1) % images.length);
const prevImage = images.at(currentIndex - 1); // at(-1) 在循环时很方便

// 场景：查找用户的最后一条支付失败记录（最近的失败）
const transactions = [
  { id: 1, status: 'success', date: '2024-01-01' },
  { id: 2, status: 'failed', date: '2024-01-05' },
  { id: 3, status: 'success', date: '2024-01-10' },
  { id: 4, status: 'failed', date: '2024-01-15' }, // 最近的失败
];

// ❌ 老办法：反转数组再查找（浪费性能）
const lastFailed = transactions
  .reverse() // 创建新数组
  .find(tx => tx.status === 'failed');

// ✅ 新办法：直接从末尾查找
const lastFailed = transactions.findLast(tx => tx.status === 'failed');
const lastFailedIndex = transactions.findLastIndex(tx => tx.status === 'failed');

// 场景：电商平台统计不同城市的订单
const orders = [
  { id: 1, city: 'Beijing', amount: 100 },
  { id: 2, city: 'Shanghai', amount: 200 },
  { id: 3, city: 'Beijing', amount: 150 },
  { id: 4, city: 'Shenzhen', amount: 300 },
  { id: 5, city: 'Shanghai', amount: 250 },
];

// ❌ 老办法：手写分组逻辑（易出错）
const grouped = {};
orders.forEach(order => {
if (!grouped[order.city]) {
    grouped[order.city] = [];
  }
  grouped[order.city].push(order);
});

// ✅ 新办法：一行代码搞定
const grouped = orders.group(order => order.city);
// 结果：
// {
//   'Beijing': [{ id: 1, ... }, { id: 3, ... }],
//   'Shanghai': [{ id: 2, ... }, { id: 5, ... }],
//   'Shenzhen': [{ id: 4, ... }]
// }

// 场景：按用户对象分组（而不是简单的字符串）
class User {
constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}

const users = [
new User(1, 'Alice'),
new User(2, 'Bob'),
new User(1, 'Alice'),
];

// ❌ group() 在这里有问题
// 因为对象作为key时会转换成 '[object Object]'
const badGroup = users.group(u => u);
// { '[object Object]': [所有用户都在一起] }

// ✅ groupToMap() 完美解决
const goodGroup = users.groupToMap(u => u);
// Map 可以使用对象作为key
for (const [user, group] of goodGroup) {
console.log(`${user.name}出现了${group.length}次`);
}

┌─────────────────────────────────────────────────────────┐
│         传统可变方法 vs 新的不可变方法对比              │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  原数组: [3, 1, 4, 1, 5]                               │
│                                                         │
│  .sort() ──→ 修改原数组 ──→ 原数组: [1, 1, 3, 4, 5]   │
│                              无返回值（undefined）      │
│                                                         │
│  .toSorted() ──→ 创建新数组 ──→ 原数组: [3, 1, 4, 1, 5]│
│                    ↓                                     │
│               新数组: [1, 1, 3, 4, 5]                   │
│                                                         │
└─────────────────────────────────────────────────────────┘

const numbers = [3, 1, 4, 1, 5];
const letters = ['c', 'a', 'b'];
const items = [10, 20, 30, 40];

// toSorted(): 不可变排序
const sorted = numbers.toSorted((a, b) => a - b);
console.log(numbers); // [3, 1, 4, 1, 5] ✓ 保持原样
console.log(sorted);  // [1, 1, 3, 4, 5] ✓ 排序后的新数组

// toReversed(): 不可变反转
const reversed = letters.toReversed();
console.log(letters);   // ['c', 'a', 'b'] ✓ 保持原样
console.log(reversed);  // ['b', 'a', 'c'] ✓ 反转后的新数组

// toSpliced(): 不可变拼接（最强大的一个）
const modified = items.toSpliced(1, 1, 'X', 'Y');
console.log(items);    // [10, 20, 30, 40] ✓ 保持原样
console.log(modified); // [10, 'X', 'Y', 30, 40] ✓ 修改后的新数组

// with(): 不可变替换（最简洁的一个）
const colors = ['red', 'green', 'blue'];
const updated = colors.with(1, 'yellow');
console.log(colors);  // ['red', 'green', 'blue'] ✓ 保持原样
console.log(updated); // ['red', 'yellow', 'blue'] ✓ 替换后的新数组

// 原始数据（来自传感器）
const rawData = [
  { city: 'Beijing', temp: 5, date: '2024-01-15' },
  { city: 'Shanghai', temp: -10, date: '2024-01-15' }, // 异常低温
  { city: 'Shenzhen', temp: 25, date: '2024-01-15' },
  { city: 'Beijing', temp: 8, date: '2024-01-16' },
  { city: 'Shanghai', temp: -8, date: '2024-01-16' },
  { city: 'Guangzhou', temp: 20, date: '2024-01-16' },
];

// 需求：
// 1. 筛选出有效数据（温度在-50到50之间）
// 2. 按城市分组
// 3. 计算每个城市的平均温度并排序
// 4. 转换为摄氏度到华氏度

// ✅ 使用新的不可变方法链式操作
const analysis = rawData
  .filter(d => d.temp >= -50 && d.temp <= 50) // 筛选有效数据
  .group(d => d.city) // 按城市分组
  .entries() // 转换为 entries 遍历
  .map(([city, records]) => ({
    city,
    avgTemp: Math.round(
      records.reduce((sum, r) => sum + r.temp, 0) / records.length
    ),
    count: records.length
  }))
  .toSorted((a, b) => b.avgTemp - a.avgTemp); // 按温度降序排列（不修改原数组）

console.log(analysis);
// [
//   { city: 'Shenzhen', avgTemp: 25, count: 1 },
//   { city: 'Guangzhou', avgTemp: 20, count: 1 },
//   { city: 'Beijing', avgTemp: 6, count: 2 },
//   { city: 'Shanghai', avgTemp: -9, count: 2 }
// ]

// 如果需要进一步修改第一个结果
const modified = analysis.with(0, {
  ...analysis[0],
status: 'high_temp_alert'
});
console.log(analysis === modified); // false ✓ 完全不同的引用
console.log(analysis[0].status);     // undefined ✓ 原数组未修改
console.log(modified[0].status);     // 'high_temp_alert' ✓ 新数组已修改

处理100万条记录的对比

使用传统可变方法：
❌ 频繁修改导致中间值重复分配
❌ React/Vue 需要深度比较来感知变化
❌ 难以实现"撤销"功能

使用新的不可变方法：
✓ 每次操作都是新引用，框架瞬间感知变化
✓ 自然支持"撤销/重做"（只需保存历史版本）
✓ 更易于调试和追踪数据变化
✓ 函数式编程范式，代码更简洁

// ❌ 为什么UI不更新？
const [data, setData] = useState([1, 2, 3]);

const handleSort = () => {
  data.sort(); // 修改了原数组
  setData(data); // React检测不到引用变化，不会重新渲染
};

// ✅ 正确做法：创建新数组
const handleSort = () => {
  setData(data.toSorted()); // 新数组，React立即感知
};

✓ Chrome 110+
✓ Firefox 115+
✓ Safari 16.4+
✓ Edge 110+
✗ IE 11 (已停用，无需支持)

// 方法1：使用 polyfill
import'core-js/full/array/to-sorted';
import'core-js/full/array/to-reversed';

// 方法2：使用 polyfill 库
// npm install array-methods-polyfill

// 方法3：条件使用
function sortArray(arr, compareFn) {
if (arr.toSorted) {
    return arr.toSorted(compareFn);
  }
return [...arr].sort(compareFn); // 手动创建副本
}

// 方法4：使用 TypeScript 的 lib 选项
// tsconfig.json
{
"compilerOptions": {
    "lib": ["ES2024", "DOM"]
  }
}

// ❌ 错误理解：不可变=无成本
const huge = Array(1000000).fill(0);
const sorted = huge.toSorted(); // 内存消耗是原来的2倍

// ✅ 正确理解：权衡取舍
// 性能成本存在，但在大多数场景下远小于
// "bug修复成本" + "调试成本" + "状态同步成本"

// ❌ 不必要的不可变操作（已经是局部变量）
function processData(items) {
const sorted = items.toSorted(); // 没必要，items是参数
const reversed = sorted.toReversed(); // 没必要
return reversed;
}

// ✅ 合理使用
function processData(items) {
return items.toSorted().reverse(); // 这里可以直接用可变方法
}

// ✅ 在状态管理中必须使用
const [items, setItems] = useState([]);
const handleSort = () => {
  setItems(items.toSorted()); // 必须用新引用
};

// ✅ 1. 在状态管理中使用不可变方法
setData(data.toSorted());
setState(state.with(index, newValue));

// ✅ 2. 在函数式管道中使用
data
  .filter(...)
  .map(...)
  .toSorted()
  .forEach(...);

// ✅ 3. 在复杂数据转换中使用 group()
const grouped = data.group(item => item.category);

// ❌ 4. 不要过度包装本地变量
function helper(arr) {
  arr.sort(); // 这里可以直接修改，是局部的
}

// ✅ 5. 配合 TypeScript 获得类型安全
interface Data {
items: readonly number[]; // 标记为只读
}

const sorted = data.items.toSorted(); // 类型检查自动通过