JavaScript 数组原地反转教程：理解与实现-js教程-PHP中文网

JavaScript 数组原地反转教程：理解与实现

聖光之護

发布： 2025-10-21 08:57:01

原创

248人浏览过

JavaScript 数组原地反转教程：理解与实现

本教程深入探讨javascript数组的原地反转操作。我们将解析初学者常犯的错误，即混淆创建新数组与修改原始数组的区别。文章将介绍使用`array.prototype.reverse()`这一内置方法实现原地反转，并详细讲解如何通过双指针交换算法手动实现高效的原地反转，同时强调了`@return {void}`函数签名的重要性。

在JavaScript中处理数组时，一个常见的需求是将数组元素反转。尤其是在一些算法问题中，会明确要求“原地”修改数组，即不允许创建新的数组来存储结果，而是直接在原数组上进行操作。理解“原地修改”与“返回新数组”之间的区别是解决这类问题的关键。

理解“原地修改”与常见误区

当一个函数要求“原地修改”数组（例如，函数签名中@return {void}表示不返回任何值，仅通过副作用修改输入参数）时，这意味着你不能创建并返回一个全新的数组。

考虑以下两种常见的错误实现方式：

误区一：创建新数组并返回

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

/**
 * @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; // 返回新数组，但原数组 s 未被修改
};

登录后复制

上述代码创建了一个名为arr的新数组，并将原数组s的元素逆序推入其中。虽然arr是s的反转版本，但原始数组s本身并未被修改。这违反了“原地修改”的要求。

误区二：虽然修改了原数组，但返回了新数组

/**
 * @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
    }

    for (let i = 0; i < s.length; i++) {
        s[i] = reversed[i]; // 将 reversed 的内容复制回 s，实现了原地修改
    }

    return reversed; // 返回了新数组 reversed，而不是 void
};

登录后复制

这个例子虽然通过第二个循环将reversed数组的内容复制回了s，从而实现了对原数组s的“原地修改”，但它最终返回了reversed数组。如果函数签名明确要求@return {void}，那么返回任何值都是不符合规范的。

正确的原地反转方法

实现数组原地反转主要有两种方式：使用内置方法或手动实现交换算法。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

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

JavaScript的Array原型提供了一个内置的reverse()方法，它能够直接修改原数组，并返回修改后的数组。

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
  s.reverse(); // 直接调用内置方法，原地反转数组 s
  // 无需返回任何值，因为 s 已经被修改
};

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

登录后复制

这是最简洁、最推荐的原地反转方式，因为它利用了JavaScript引擎优化的底层实现，通常效率很高。

方法二：手动实现双指针交换算法

如果面试或特定场景要求你不能使用内置方法，或者需要理解其底层逻辑，可以手动实现一个原地反转算法。核心思想是使用两个指针，一个从数组开头向后移动，一个从数组末尾向前移动，每次交换它们指向的元素，直到两个指针相遇或擦肩而过。

算法步骤：

初始化两个指针：left指向数组的第一个元素（索引0），right指向数组的最后一个元素（索引s.length - 1）。
循环条件：当left小于right时，继续循环。
在每次循环中，交换s[left]和s[right]的值。
left指针向右移动一位（left++），right指针向左移动一位（right--）。
当循环结束时，数组即被原地反转。

/**
 * @param {character[]} s
 * @return {void} Do not return anything, modify s in-place instead.
 */
var reverseString = function (s) {
    let left = 0;
    let right = s.length - 1;

    while (left < right) {
        // 使用ES6解构赋值进行元素交换，简洁高效
        [s[left], s[right]] = [s[right], s[left]];

        left++;
        right--;
    }
};

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

const testcase2 = ['x', 'y', 'z', 'w'];
console.log('原始数组:', testcase2); // 输出: 原始数组: ['x', 'y', 'z', 'w']
reverseString(testcase2);
console.log('反转后数组:', testcase2); // 输出: 反转后数组: ['w', 'z', 'y', 'x']

登录后复制

关于交换操作的说明： 在上述代码中，[s[left], s[right]] = [s[right], s[left]];是ES6的解构赋值语法，它能够简洁地实现两个变量值的交换，而无需引入临时变量。等价于：

let temp = s[left];
s[left] = s[right];
s[right] = temp;

登录后复制

时间与空间复杂度： 无论是Array.prototype.reverse()还是手动实现的双指针交换算法，它们的时间复杂度都是O(N)，其中N是数组的长度，因为都需要遍历大约一半的元素。空间复杂度都是O(1)，因为它们都在原数组上进行操作，没有额外分配与N相关的存储空间。

拓展：创建新反转数组的 Array.prototype.toReversed()

值得一提的是，JavaScript在ES2023中引入了一个新的数组方法Array.prototype.toReversed()。这个方法与reverse()的区别在于，它不会修改原数组，而是返回一个包含反转元素的新数组。

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

console.log('原数组:', originalArray);    // 输出: 原数组: [1, 2, 3, 4]
console.log('新反转数组:', reversedArray); // 输出: 新反转数组: [4, 3, 2, 1]

登录后复制

虽然toReversed()不适用于要求“原地修改”的场景，但它为那些需要保留原数组不变同时获取反转版本的情况提供了更优雅的解决方案。