JavaScript 数组原地反转的实现与注意事项-js教程-PHP中文网

JavaScript 数组原地反转的实现与注意事项

心靈之曲

发布： 2025-10-21 09:07:22

原创

878人浏览过

JavaScript 数组原地反转的实现与注意事项

本文深入探讨 javascript 中数组反转的多种方法，重点区分原地修改与创建新数组的实现策略。我们将分析 `void` 返回类型在函数设计中的意义，介绍 `array.prototype.reverse()` 等内置方法，并详细讲解如何手动实现高效的原地反转算法，同时提及 `array.prototype.toreversed()` 等新特性，帮助开发者理解并正确应用数组反转技巧。

在 JavaScript 中处理数组时，经常会遇到需要将数组元素顺序反转的场景。理解“原地修改”（in-place modification）与“创建新数组”之间的区别，以及函数签名中 void 返回类型的含义，对于编写高效且符合要求的代码至关重要。

理解原地修改与 void 返回类型

许多编程挑战会明确要求“原地修改”输入数据，并且函数不返回任何值（即返回类型为 void）。这意味着函数应该直接操作传入的数组引用，而不是创建一个新的数组并返回它。

考虑以下一个常见的错误示例：

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
    let arr = []; // 创建了一个新数组

    for (let i = s.length - 1; i >= 0; i--) {
        arr.push(s[i]); // 将原数组元素逆序推入新数组
    }
    return arr; // 返回了新数组，但函数要求返回 void
};

登录后复制

在这个例子中，虽然 arr 包含了反转后的元素，但它是一个全新的数组。原始数组 s 并没有被修改。此外，函数返回了 arr，这与函数签名中 @return {void} 的要求相悖。函数被设计为通过副作用（修改传入的参数）来完成任务，而不是通过返回值。

立即学习“Java免费学习笔记（深入）”；

另一个尝试：

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
    let reversed = []; // 依然创建了一个新数组

    for (let i = s.length - 1; i >= 0; i--) {
        reversed.push(s[i]);
    }

    // 这一步实现了原地修改：将 reversed 中的元素逐个赋值回原数组 s
    for (let i = 0; i < s.length; i++) {
        s[i] = reversed[i];
    }

    return reversed; // 虽然 s 被修改了，但函数仍然返回了一个新数组 reversed
};

登录后复制

这个版本虽然最终修改了原始数组 s，达到了“原地修改”的目的，但它仍然创建了一个额外的 reversed 数组，增加了内存开销，并且函数依然返回了一个数组，而不是 void。在严格的面试或性能要求下，这可能不被认为是最佳实践。

方法一：使用内置 Array.prototype.reverse()

JavaScript 提供了内置的 Array.prototype.reverse() 方法，它可以直接在原数组上进行操作，将数组元素顺序反转，并返回修改后的数组引用。这是实现原地反转最简洁、最高效的方式。

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
    s.reverse(); // 直接调用内置方法，原地反转数组
    // 函数不返回任何值，符合 @return {void} 的要求
};

// 示例
const testcase1 = ['h', 'e', 'l', 'l', 'o'];
console.log('原始数组:', testcase1); // 输出: 原始数组: ['h', 'e', 'l', 'l', 'o']
reverseString(testcase1);
console.log('反转后数组:', testcase1); // 输出: 反转后数组: ['o', 'l', 'l', 'e', 'h']

const testcase2 = ['a', 'b', 'c', 'd'];
console.log('原始数组:', testcase2); // 输出: 原始数组: ['a', 'b', 'c', 'd']
reverseString(testcase2);
console.log('反转后数组:', testcase2); // 输出: 反转后数组: ['d', 'c', 'b', 'a']

登录后复制

Array.prototype.reverse() 方法的时间复杂度为 O(N)，空间复杂度为 O(1)，是实现原地反转的最佳选择。

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

126

查看详情

方法二：手动实现原地交换算法

如果出于学习目的或特定环境不允许使用内置方法，可以手动实现原地交换算法。核心思想是使用两个指针，一个从数组开头向后遍历，一个从数组末尾向前遍历，不断交换它们指向的元素，直到两个指针相遇或交叉。

具体步骤如下：

确定循环的边界。我们只需要遍历到数组的中间位置，因为每次循环都会交换一对元素。
使用一个索引 index 从 0 开始，另一个索引 oppositeIndex 从 s.length - 1 开始。
在每次循环中，交换 s[index] 和 s[oppositeIndex] 的值。
index 递增，oppositeIndex 递减。
循环直到 index 大于或等于 oppositeIndex。

我们可以通过计算 oppositeIndex = s.length - 1 - index，仅用一个循环变量 index 来实现。循环条件为 index < Math.floor(s.length / 2)。

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
    const len = s.length;
    // 循环到数组的中间位置，因为每次循环处理一对元素
    for (let index = 0; index < Math.floor(len / 2); index++) {
        // 计算与当前索引对称的另一个索引
        const oppositeIndex = len - 1 - index;

        // 使用解构赋值进行元素交换
        [s[index], s[oppositeIndex]] = [s[oppositeIndex], s[index]];

        // 另一种传统的交换方式：
        // let temp = s[index];
        // s[index] = s[oppositeIndex];
        // s[oppositeIndex] = temp;
    }
    // 函数不返回任何值，符合 @return {void} 的要求
};

// 示例
const testcase3 = ['1', '2', '3'];
console.log('原始数组:', testcase3); // 输出: 原始数组: ['1', '2', '3']
reverseString(testcase3);
console.log('反转后数组:', testcase3); // 输出: 反转后数组: ['3', '2', '1']

const testcase4 = ['1', '2', '3', '4'];
console.log('原始数组:', testcase4); // 输出: 原始数组: ['1', '2', '3', '4']
reverseString(testcase4);
console.log('反转后数组:', testcase4); // 输出: 反转后数组: ['4', '3', '2', '1']

登录后复制

这个手动实现方法同样具有 O(N) 的时间复杂度和 O(1) 的空间复杂度。解构赋值 [a, b] = [b, a] 是 JavaScript 中一种简洁的元素交换方式。

额外考量：Array.prototype.toReversed()

在某些情况下，你可能需要一个反转后的新数组，而不希望修改原始数组。ES2023 引入了一个新的方法 Array.prototype.toReversed()，它返回一个包含反转元素的新数组，而不会修改原始数组。

const originalArray = ['a', 'b', 'c'];
const reversedArray = originalArray.toReversed();

console.log('原始数组:', originalArray);    // 输出: 原始数组: ['a', 'b', 'c']
console.log('反转后的新数组:', reversedArray); // 输出: 反转后的新数组: ['c', 'b', 'a']

登录后复制

这个方法在需要保留原始数组完整性的场景下非常有用，但它不是原地修改，并且会创建新的数组，因此会产生额外的内存开销。

总结

在 JavaScript 中反转数组时，请根据具体需求选择合适的方法：

原地修改且不返回任何值 (void)：
- 首选 s.reverse()： 这是最简洁、高效且符合要求的解决方案。
- 手动交换算法： 当不能使用内置方法时，通过循环和元素交换实现，同样高效。
创建反转后的新数组且不修改原数组：
- originalArray.toReversed() (ES2023)： 现代且语义清晰的选择。
- [...originalArray].reverse()： 通过展开运算符创建副本再反转，兼容性更好。