在Javascript中反转数组的最有效方法是什么？

Question

最近有人问我，在 Javascript 中反转数组的最有效方法是什么。目前，我建议使用 for 循环并摆弄数组，但后来意识到有一个原生的 Array.reverse() 方法。

出于好奇，任何人都可以通过展示示例或指出正确的方向来帮助我探索这一点，以便我可以阅读吗？任何关于如何衡量性能的建议也很棒。

Answer 1

基于此设置：

var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var length = array.length;

Array.reverse(); 是第一个或第二个最慢的！

基准在这里：

https://jsperf.com/js-array-reverse-vs-while-loop/9

跨浏览器，交换循环更快。有两种常见类型的交换算法（请参阅Wikipedia），每一种都有两种变体。

两种交换算法是临时交换和异或交换。

这两种变体以不同方式处理索引计算。第一个变体比较当前左索引和右索引，然后递减数组的右索引。第二种变体比较当前左索引和长度除以一半，然后为每次迭代重新计算右索引。

您可能会也可能不会看到这两种变体之间的巨大差异。例如，在 Chrome 18 中，临时交换和异或交换的第一个变体比第二个变体慢 60% 以上，但在 Opera 12 中，临时交换和异或交换的两个变体具有相似的性能。

临时交换：

第一个变体：

function temporarySwap(array)
{
    var left = null;
    var right = null;
    var length = array.length;
    for (left = 0, right = length - 1; left < right; left += 1, right -= 1)
    {
        var temporary = array[left];
        array[left] = array[right];
        array[right] = temporary;
    }
    return array;
}

第二个变体：

function temporarySwapHalf(array)
{
    var left = null;
    var right = null;
    var length = array.length;
    for (left = 0; left < length / 2; left += 1)
    {
        right = length - 1 - left;
        var temporary = array[left];
        array[left] = array[right];
        array[right] = temporary;
    }
    return array;
}

---

异或交换：

第一个变体：

function xorSwap(array)
{
    var i = null;
    var r = null;
    var length = array.length;
    for (i = 0, r = length - 1; i < r; i += 1, r -= 1)
    {
        var left = array[i];
        var right = array[r];
        left ^= right;
        right ^= left;
        left ^= right;
        array[i] = left;
        array[r] = right;
    }
    return array;
}

第二个变体：

function xorSwapHalf(array)
{
    var i = null;
    var r = null;
    var length = array.length;
    for (i = 0; i < length / 2; i += 1)
    {
        r = length - 1 - i;
        var left = array[i];
        var right = array[r];
        left ^= right;
        right ^= left;
        left ^= right;
        array[i] = left;
        array[r] = right;
    }
    return array;
}

---

还有另一种交换方法称为解构赋值： http://wiki.ecmascript.org/doku.php?id=harmony:destructuring

解构赋值：

第一个变体：

function destructuringSwap(array)
{
    var left = null;
    var right = null;
    var length = array.length;
    for (left = 0, right = length - 1; left < right; left += 1, right -= 1)
    {
        [array[left], array[right]] = [array[right], array[left]];
    }
    return array;
}

第二个变体：

function destructuringSwapHalf(array)
{
    var left = null;
    var right = null;
    var length = array.length;
    for (left = 0; left < length / 2; left += 1)
    {
        right = length - 1 - left;
        [array[left], array[right]] = [array[right], array[left]];
    }
    return array;
}

目前，使用解构赋值的算法是所有算法中最慢的。它甚至比Array.reverse(); 还要慢。然而，使用解构赋值和Array.reverse(); 方法的算法是最短的例子，它们看起来最干净。希望他们以后的表现越来越好。

---

另外值得一提的是，现代浏览器正在提高数组push 和splice 操作的性能。

在 Firefox 10 中，这种使用数组 push 和 splice 的 for 循环算法可与临时交换和 XOR 交换循环算法相媲美。

for (length -= 2; length > -1; length -= 1)
{
    array.push(array[length]);
    array.splice(length, 1);
}

但是，您可能应该坚持使用交换循环算法，直到许多其他浏览器匹配或超过它们的数组 push 和 splice 性能。

Answer 2

您可以通过简单的方式使用地图来做到这一点。

let list = [10, 20, 30, 60, 90]
let reversedList = list.map((e, i, a)=> a[(a.length -1) -i]) // [90, 60...]

Answer 3

原生方法总是更快。

所以尽可能使用Array.reverse。否则，在O(1) 中运行的实现将是最好的；）

否则就使用这样的东西

var reverse = function(arr) {
   var result = [],
       ii = arr.length;
   for (var i = ii - 1;i !== 0;i--) {
       result.push(arr[i]);
   }
   return result;
}

Benchmark!

如果您使用 for 构造的所有三个阶段而不是只使用一个阶段，那么有趣的循环会更快。

for(var i = ii - 1; i !== 0;i--) 比 var i = ii - 1;for(;i-- !== 0;) 快

Answer 4

我 opened a Firefox bug 关于 Firefox 中缓慢的反向性能。来自 Mozilla 的某个人查看了已接受帖子中使用的基准，并说它非常具有误导性——在他们的分析中，本机方法通常更适合反转数组。 （应该是这样！）

Answer 5

这是使用三元运算符反转数组的最有效和最简洁的方法。

function reverse(arr) {
  return arr.length < 2 ? arr : [arr.pop()].concat(reverse(arr));
}
console.log(reverse([4, 3, 3, 1]));

Answer 6

交换函数是最快的。这是我编写的一个反向函数，它与上面提到的交换函数略有相似，但执行速度更快。

function reverse(array) {
  var first = null;
  var last = null;
  var tmp = null;
  var length = array.length;

  for (first = 0, last = length - 1; first < length / 2; first++, last--) {
    tmp = array[first];
    array[first] = array[last];
    array[last] = tmp;
  }
}

你可以在这里找到基准测试http://jsperf.com/js-array-reverse-vs-while-loop/19

Answer 7

由于没有人想出它并完成反转数组的方法列表......

array.sort(function() {
    return 1;
})

它的速度是两种方法的两倍，但除此之外，速度非常慢。

http://jsperf.com/js-array-reverse-vs-while-loop/53

Answer 8

您可以使用.slice().reverse()：

const yourArray = ["first", "second", "third", "...", "etc"];
const reversedArray = yourArray.slice().reverse();
console.log(reversedArray);

请注意，.slice() 用于防止修改 yourArray，因为 .reverse() 已就地。

Answer 9

这是一个 java 示例 http://www.leepoint.net/notes-java/data/arrays/arrays-ex-reverse.html 展示如何反转数组。很容易转换为 javascript。

我建议使用简单地捕获函数被调用之前和函数被调用之后的时间的东西。哪个花费最少的时间/时钟周期将是最快的。

Answer 10

这是另一个永久修改数组反转其元素的示例：

var theArray = ['a', 'b', 'c', 'd', 'e', 'f'];

function reverseArrayInPlace(array) {
  for (var i = array.length - 1; i >= 0; i -= 1) {
    array.push(array[i]);
  }
  array.splice(0, array.length / 2);
  return array;
};
reverseArrayInPlace(theArray);
console.log(theArray); // -> ["f", "e", "d", "c", "b", "a"]

Answer 11

另一个建议，与上面类似，但使用 splice 代替：

var myArray=["one","two","three","four","five","six"];
console.log(myArray);
for(i=0;i<myArray.length;i++){
myArray.splice(i,0,myArray.pop(myArray[myArray.length-1]));
}
console.log(myArray);

Answer 12

如果你想复制一个反转版本的数组并保持原样：

a = [0,1,2,3,4,5,6,7,8,9];
b = []
for(i=0;i<a.length;i++){
    b.push(a.slice(a.length-i-1,a.length-i)[0])
}

b 的输出：

[ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

Answer 13

将以下内容粘贴到浏览器或 node.js 上的任何 javascript 运行时控制台中，将对大量数字进行直接的基准测试。

在我的情况下说 40,000

var array = Array.from({ length: 40000 }, () =>
  Math.floor(Math.random() * 40000)
);
var beforeStart = Date.now();
var reversedArray = array.map((obj, index, passedArray) => {
  return passedArray[passedArray.length - index - 1];
});
console.log(reversedArray);
var afterCustom = Date.now();
console.log(array.reverse());
var afterNative = Date.now();
console.log(`custom took : ${afterCustom - beforeStart}ms`);
console.log(`native took : ${afterNative - afterCustom}ms`);

您也可以直接运行 sn-p 来查看自定义版本的效果。

Answer 14

为了完整起见，还应该从更广泛的角度考虑效率，而不仅仅是执行时性能。

因此，我想添加一个交换功能，它比accepted answer 中的功能慢（请使用性能工具自行测试），但它具有以下其他有益特性：

• 它不需要临时变量来交换
• 它使输入数组保持不变
• 它也适用于数值数组以外的值，因为它只是交换引用
• 它不会在每个迭代步骤中启动函数调用
• 它一直是可读的（尽管这仍有待改进）

function fastSwapReverse (array) {
  // half length for odd arrays is added by 1
  var len = array.length;
  var half = len % 2 === 0 ? len / 2 : Math.ceil(len / 2)
  var k = 0, A = new Array(len)

  // from 0 to half swap the elements at
  // start: 0 + i
  // end: len - i -1
  for (k = 0; k < half; k++) {
    A[k] = array[len - k - 1];
    A[len - k - 1] = array[k];
  }

  return A;
}

虽然原始的Array.prototype.reverse 方法也会改变数组

Answer 15

使用for 循环从背面开始复制数组并返回该新数组。这是高效的并且具有 O(n) 时间复杂度。

var array1 = ["yes", "no", "maybe", "always", "sometimes", "never", "if"];
var array2 = [5,8,2,9,5,6,3,1];

function reverseArray(arr) {
  var newArray = [];
  for (var x = arr.length - 1; 0 <= x; --x) {
    newArray.push(arr[x]);
  }
  return newArray;
}

console.log(reverseArray(array1)); // ["if", "never", "sometimes", "always", "maybe", "no", "yes"]
console.log(reverseArray(array2)) // [1, 3, 6, 5, 9, 2, 8, 5]

Answer 16

这是我发现的一些技巧。归功于 Codemanx 的原始解决方案

array.sort(function() {
   return 1;
})

在 Typescript 中，这可以简化为一行

array.sort(() => 1)

var numbers = [1,4,9,13,16];

console.log(numbers.sort(() => 1));

既然这将是 JavaScript 的未来，我想我会分享一下。

如果你的数组只有 2 个元素，这里还有一个技巧

array.push(array.shift());

Answer 17

您还可以使用 reduceRight 来遍历数组的每个值（从右到左）

const myArray = [1, 2, 3, 4, 5]
const reversedArray = myArray.reduceRight((acc, curr) => [...acc, curr], [])
console.log(reversedArray) // [5, 4, 3, 2, 1]

Answer 18

// array-reverse-polyfill.js v1
Array.prototype.reverse = Array.prototype.reverse || function() {
    return this.sort(function() {
        return -1;
    });
};

如果您使用的是现代浏览器，则可以使用本机反向功能。如果它不是现代的，这个 polyfill 会为你添加这个功能。所以就用它吧：

我还没有发现任何情况下 Firefox 的行为与其他浏览器相反。无论如何，如果你想确保函数按字母顺序排序，只需先做一点测试。

// array-reverse-polyfill.js v1.1
;(function(){
    var order = ['a', 'b'].sort(function(a, b){
        return -1;
    });
    order = order[0] === 'b' ? -1 : 1;
    Array.prototype.reverse = Array.prototype.reverse || function() {
        return this.sort(function() {
            return order;
        });
    };
})();

使用示例：

let a = [1,2,3,4,5];
a.reverse();
console.log(a);