发布于 由admin

深入分析 ES2023 中的 Array.prototype.toReversed(), toSorted(), toSpliced() 和 with() 非破坏性数组方法的意义和应用。

各位朋友，大家好！我是你们今天的数组方法“非破坏性改造”专家。准备好了吗？我们要开始一场关于 ES2023 全新数组方法的大冒险，保证让你的数组处理技巧更上一层楼，并且避免一不小心就破坏了原始数据的尴尬局面！

今天要讲的是 ES2023 中引入的四个“非破坏性”数组方法：toReversed(), toSorted(), toSpliced(), 和 with()。 它们的主要意义在于，它们返回的是数组的副本，而不是直接修改原始数组。这对于维护数据的完整性，尤其是在函数式编程中，至关重要。

为什么要 “非破坏性”？

在深入研究这些方法之前，我们先来聊聊“非破坏性”的重要性。 想象一下，你正在处理一个重要的用户数据数组，你需要在界面上展示一个排序后的版本，但又不想改变原始数据的顺序。 使用传统的 sort() 方法，你会直接修改原始数组，这可能会导致其他依赖该数据的组件出现问题。

这就是“非破坏性”方法的价值所在。 它们允许你创建数组的修改版本，而不会触及原始数据，从而避免潜在的副作用。

1. toReversed()： 倒序排列，优雅转身

toReversed() 方法返回一个颠倒顺序的新数组，原始数组保持不变。

语法：

const newArray = array.toReversed();

示例：

const originalArray = [1, 2, 3, 4, 5];
const reversedArray = originalArray.toReversed();

console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("反转后的数组:", reversedArray); // 输出: 反转后的数组: [5, 4, 3, 2, 1]

应用场景：

  • 展示最新消息: 在社交媒体或新闻网站上，你可能需要按时间倒序显示消息。

    const messages = [
  { id: 1, text: "第一条消息", timestamp: "2023-01-01" },
  { id: 2, text: "第二条消息", timestamp: "2023-01-02" },
  { id: 3, text: "第三条消息", timestamp: "2023-01-03" }
];

const latestMessages = messages.toReversed();

console.log(latestMessages.map(msg => msg.text)); // 输出: ["第三条消息", "第二条消息", "第一条消息"]

  • UI 元素的反向渲染: 在某些 UI 场景中，你可能需要反向渲染列表或其他元素。

注意事项：

toReversed() 方法不接受任何参数。

2. toSorted()： 排序新姿势，秩序井然

toSorted() 方法返回一个排序后的新数组，原始数组保持不变。 它可以接受一个可选的比较函数作为参数，用于自定义排序规则。

语法：

const newArray = array.toSorted(); // 默认排序（字符串 Unicode 码点）
const newArray = array.toSorted(compareFunction); // 使用比较函数排序

示例：

const originalArray = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArray = originalArray.toSorted(); // 默认排序

console.log("原始数组:", originalArray); // 输出: 原始数组: [3, 1, 4, 1, 5, 9, 2, 6]
console.log("排序后的数组:", sortedArray); // 输出: 排序后的数组: [1, 1, 2, 3, 4, 5, 6, 9]

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedNumbers = numbers.toSorted((a, b) => a - b); // 数字升序排序

console.log("数字升序排序:", sortedNumbers); // 输出: 数字升序排序: [1, 1, 2, 3, 4, 5, 6, 9]

const descendingNumbers = numbers.toSorted((a, b) => b - a); // 数字降序排序

console.log("数字降序排序:", descendingNumbers); // 输出: 数字降序排序: [9, 6, 5, 4, 3, 2, 1, 1]

const objects = [{value: 3}, {value: 1}, {value: 2}];
const sortedObjects = objects.toSorted((a, b) => a.value - b.value);

console.log('对象数组排序', sortedObjects); //输出：对象数组排序 [ { value: 1 }, { value: 2 }, { value: 3 } ]

应用场景：

  • 数据可视化: 在图表或报表中，你可能需要对数据进行排序，以便更好地呈现。

    const salesData = [
  { product: "A", sales: 100 },
  { product: "B", sales: 50 },
  { product: "C", sales: 150 }
];

const sortedSales = salesData.toSorted((a, b) => b.sales - a.sales); // 按销售额降序排序

console.log(sortedSales.map(item => `${item.product}: ${item.sales}`));
// 输出: ["C: 150", "A: 100", "B: 50"]

  • 用户列表排序: 在用户管理界面中，你可以根据用户名、注册时间等字段对用户列表进行排序。

注意事项：

  • 如果没有提供比较函数，toSorted() 方法将默认按照字符串的 Unicode 码点进行排序。
  • 比较函数应该返回一个数字：
    • 小于 0：a 应该排在 b 之前。
    • 大于 0：a 应该排在 b 之后。
    • 等于 0：a 和 b 的顺序不变。

3. toSpliced()： 灵活切割，精准插入

toSpliced() 方法返回一个通过删除或替换现有元素和/或添加新元素而修改后的新数组。 原始数组保持不变。 它本质上是非破坏性的 splice()。

语法：

const newArray = array.toSpliced(start, deleteCount, ...items);

参数：

  • start: 开始修改数组的索引位置。
  • deleteCount: 要删除的元素数量。
  • ...items: 要添加到数组中的元素。

示例：

const originalArray = [1, 2, 3, 4, 5];
const splicedArray = originalArray.toSpliced(2, 1, "a", "b");

console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("切割后的数组:", splicedArray); // 输出: 切割后的数组: [1, 2, 'a', 'b', 4, 5]

const numbers = [1, 2, 3, 4, 5];
const removedAndAdded = numbers.toSpliced(1, 2, 'hello', 'world');

console.log(removedAndAdded); // 输出: [ 1, 'hello', 'world', 4, 5 ]
console.log(numbers); // 输出: [ 1, 2, 3, 4, 5 ]

应用场景：

  • 数据清洗: 你可能需要从数组中删除无效或错误的数据，或者插入新的数据来修正错误。

    const data = [1, 2, null, 4, undefined, 6];
const cleanedData = data.toSpliced(2, 2, 3, 5); // 将 null 和 undefined 替换为 3 和 5

console.log(cleanedData); // 输出: [1, 2, 3, 5, 6]

  • 列表项的动态更新: 在动态列表中，你可能需要添加、删除或替换列表项。

注意事项：

  • 如果 start 超出数组的长度，则从数组末尾开始添加元素。
  • 如果 deleteCount 大于 start 之后的元素数量，则删除 start 之后的所有元素。
  • 如果没有指定 deleteCount，则默认为 0。

4. with()： 精准替换，指哪打哪

with() 方法返回一个新数组，该数组用给定索引和值替换现有值。 原始数组保持不变。 它提供了一种简洁的方式来更新数组中的单个元素，而无需使用索引赋值。

语法：

const newArray = array.with(index, value);

参数：

  • index: 要替换的元素的索引位置。
  • value: 要替换的新值。

示例：

const originalArray = [1, 2, 3, 4, 5];
const updatedArray = originalArray.with(2, "hello");

console.log("原始数组:", originalArray); // 输出: 原始数组: [1, 2, 3, 4, 5]
console.log("更新后的数组:", updatedArray); // 输出: 更新后的数组: [1, 2, 'hello', 4, 5]

const fruits = ['apple', 'banana', 'cherry'];
const replaced = fruits.with(1, 'grape');

console.log(replaced); // 输出: [ 'apple', 'grape', 'cherry' ]
console.log(fruits); // 输出: [ 'apple', 'banana', 'cherry' ]

应用场景：

  • 状态管理: 在状态管理系统中，你可能需要更新数组中的某个状态值，而不想直接修改原始状态。

    let state = {
  items: [
    { id: 1, name: "A", completed: false },
    { id: 2, name: "B", completed: true },
    { id: 3, name: "C", completed: false }
  ]
};

// 假设我们要将 id 为 2 的 item 的 completed 状态改为 false
const itemIdToUpdate = 2;
const updatedItems = state.items.map(item =>
  item.id === itemIdToUpdate ? { ...item, completed: false } : item
);

// 用 with 替换
const indexToUpdate = state.items.findIndex(item => item.id === itemIdToUpdate);

const updatedWith = state.items.with(indexToUpdate, {...state.items[indexToUpdate], completed: false});

console.log(updatedWith);
// 假设我们用新的状态更新整个应用，避免直接修改原state
const newState = { ...state, items: updatedWith };
console.log(state.items[1]); // 输出：{ id: 2, name: 'B', completed: true }
console.log(newState.items[1]); // 输出：{ id: 2, name: 'B', completed: false }
console.log(state === newState); //输出：false

  • 表单数据的更新: 在表单中，你可能需要更新数组中的某个字段值，例如更新某个复选框的状态。

注意事项：

  • 如果 index 超出数组的范围，则会抛出一个 RangeError 异常。
  • with() 方法只替换指定索引位置的元素，不会添加或删除元素。

性能考量

虽然这些非破坏性方法提供了更好的数据管理方式，但它们也可能带来一些性能上的开销，因为它们需要创建数组的副本。 在处理大型数组时，需要权衡数据安全性和性能之间的关系。

性能对比 (理论):

方法 是否修改原始数组 创建新数组 性能
sort() 是 否 相对较快
toSorted() 否 是 相对较慢
reverse() 是 否 相对较快
toReversed() 否 是 相对较慢
splice() 是 否 相对较快
toSpliced() 否 是 相对较慢
直接索引赋值 是 否 最快
with() 否 是 中等

总结：

  • 如果性能至关重要，并且你可以接受修改原始数组，那么传统的 sort(), reverse(), 和 splice() 方法可能更适合。
  • 如果数据安全性和可维护性更重要，那么 toSorted(), toReversed(), toSpliced(), 和 with() 方法是更好的选择。
  • 在处理大型数组时，可以考虑使用一些优化技巧，例如使用 slice() 方法创建数组的浅拷贝，然后对拷贝进行修改。

兼容性

目前，toReversed(), toSorted(), toSpliced(), 和 with() 方法是 ES2023 的一部分。 这意味着它们在最新的浏览器版本和 Node.js 环境中都可用。 但是，在较旧的环境中，你可能需要使用 polyfill 来提供这些方法的支持。

示例： 使用 polyfill

你可以使用 core-js 库来提供这些方法的 polyfill。

  1. 安装 core-js:

    npm install core-js

  2. 在你的代码中引入 polyfill:

    import 'core-js/es/array/to-reversed';
import 'core-js/es/array/to-sorted';
import 'core-js/es/array/to-spliced';
import 'core-js/es/array/with';

// 现在你就可以在任何环境中使用 toReversed(), toSorted(), toSpliced(), 和 with() 方法了

总结

ES2023 引入的 toReversed(), toSorted(), toSpliced(), 和 with() 方法为我们提供了一种更加安全和可预测的方式来处理数组。 它们通过返回数组的副本，而不是直接修改原始数组，从而避免了潜在的副作用。 虽然它们可能带来一些性能上的开销，但在许多情况下，数据安全性和可维护性比性能更重要。

快速回顾:

方法 功能 是否修改原始数组
toReversed() 返回一个反转后的新数组 否
toSorted() 返回一个排序后的新数组 否
toSpliced() 返回一个通过删除或替换元素修改后的新数组 否
with() 返回一个替换指定索引元素后的新数组 否

希望今天的讲座能够帮助你更好地理解和使用这些强大的数组方法。 记住，选择合适的方法取决于你的具体需求和应用场景。 现在，去尝试一下这些新方法，让你的代码更加健壮和优雅吧！ 感谢大家的参与！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注