J*aScript 数组原地反转教程：理解与实现_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 数组原地反转教程：理解与实现

2025-10-21

浏览次数：次

返回列表

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

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

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

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

当一个函数要求“原地修改”数组（例如，函数签名中@return {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; // 返回新数组，但原数组 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}，那么返回任何值都是不符合规范的。

正确的原地反转方法

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

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

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

eSiteGroup站群管理系统1.0.4

eSiteGroup站群管理系统是基于eFramework低代码开发平台构建，是一款高度灵活、可扩展的智能化站群管理解决方案，全面支持SQL Server、SQLite、MySQL、Oracle等主流数据库，适配企业级高并发、轻量级本地化、云端分布式等多种部署场景。通过可视化建模与模块化设计，系统可实现多站点的快速搭建、跨平台协同管理及数据智能分析，满足政府、企业、教育机构等组织对多站点统一管控的

0 查看详情 eSiteGroup站群管理系统1.0.4

/**
 * @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']

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

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

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

算法步骤：

初始化两个指针：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()

值得一提的是，J*aScript在ES2025中引入了一个新的数组方法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()不适用于要求“原地修改”的场景，但它为那些需要保留原数组不变同时获取反转版本的情况提供了更优雅的解决方案。