JavaScript数组反转代码运行原理是什么？请逐行解释代码逻辑

先附上完整可运行的代码：

var arr = [1, 2, 3, 4, 5, 6, 7]
for (var i = 0; i < arr.length / 2; i++){
  var temp = arr[i]
  arr[i] = arr[arr.length - 1 - i]
  arr[arr.length - 1 - i] = temp
}
console.log(arr)

以下是逐行代码作用说明：

• 第1行 var arr = [1, 2, 3, 4, 5, 6, 7]
  声明数组变量arr，初始赋值为7个数字组成的数组，是本次要反转的目标对象。
• 第2行 for (var i = 0; i < arr.length / 2; i++){
  启动for循环，控制交换逻辑的执行次数：
  • 初始化循环变量i为0，用来标记当前待交换的左侧元素的下标
  • 循环终止条件为i小于数组长度的一半：反转数组只需要把前半段元素和后半段对应位置的元素交换即可，不需要全量遍历，能把遍历次数压缩一半，时间复杂度维持在O(n)
  • 每次循环结束后i自增1，指向下一个待交换的左侧元素位置
• 第3行 var temp = arr[i]
  声明临时变量temp，存储当前左侧下标i对应的元素值，避免后续赋值操作把原始值覆盖丢失。
• 第4行 arr[i] = arr[arr.length - 1 - i]
  把右侧和i对应位置的元素值，赋值给左侧下标i的位置。右侧对应下标计算逻辑为数组总长度-1 -i：比如i=0时对应最后一个下标6，i=1时对应倒数第二个下标5，以此类推。
• 第5行 arr[arr.length - 1 - i] = temp
  把之前存在temp里的原左侧元素值，赋值给右侧对应的下标位置，完成一对元素的交换。
• 第6行 }
  for循环的闭合标签，单次交换逻辑执行结束，进入下一轮循环或者跳出循环。
• 第7行 console.log(arr)
  把反转完成后的数组打印到控制台，最终输出结果为[7,6,5,4,3,2,1]。

整体实现逻辑 #

这段代码用的是双指针原地交换的思路，不需要额外开辟新数组存储结果，直接在原数组上操作，空间复杂度为O(1)，是数组反转的最优实现方案之一。如果数组长度为奇数，中间的元素不需要交换，刚好适配循环到长度一半就停止的逻辑，不会出现重复交换的问题。

内容的提问来源于stack exchange，提问作者Affan Ayan