将数组的反转附加到自身答案

【问题标题】：Append an array's reverse to itself将数组的反转附加到自身
【发布时间】：2010-12-23 12:10:14
【问题描述】：

我创建了一个颜色值数组，表示颜色从红色到蓝色的平滑过渡。

现在我希望这个数组将您从红色变为蓝色，然后再返回。显而易见的解决方案是将数组的反转附加到数组中。

我已经编写了代码来执行此操作，但它没有按照我的理解工作。相反，它正在创建反向数组，重复。不是“红到蓝，蓝到红”，而是“蓝到红，蓝到红”。

显然，我还没有掌握 javascript 中数组的一些行为。

我该怎么办？

我的第一次尝试是这样的：

colors = colors.concat(colors.reverse());

根据第一个 stackoverflow 答案，我尝试了这个：

var arrayCopy = colors;
arrayCopy.reverse();
colors = colors.concat(arrayCopy);

但这会产生相同的结果！

关于上下文，这里是周围的代码：

            ///////////////////////////////////////////////////////////
            // Creating the array which takes you from Red to Blue
            //
            var colorSteps = 400;
            var startColor = [255, 0, 0];
            var endColor = [0, 127, 255];
            var steps = new Array();
            var j = 0;
            for (j = 0; j < 3; ++j) {
                steps[j] = (endColor[j] - startColor[j]) / colorSteps;
            }
            var colors = Array();
            for (j = 0; j < colorSteps; ++j) {
                colors[j] = [
                                Math.floor(startColor[0] + steps[0] * j),
                                Math.floor(startColor[1] + steps[1] * j),
                                Math.floor(startColor[2] + steps[2] * j)
                            ];
            }

            ////////////////////////////////////////////////////////
            // Here's the bit where I'm trying to make it a mirror
            // of itself! 
            //
            // It ain't working
            //
            colors = colors.concat(colors.reverse());


            ///////////////////////////////////////////////////////
            // Demonstrating what the colors are
            //
            j = 0;
            var changeColorFunction = function () {
                if (++j >= colors.length) {
                    j = 0;
                }
                var colorName = "rgb(" + colors[j][0] + ", " + colors[j][1] + ", " + colors[j][2] + ")";
                debugText.style.background = colorName;
                debugText.innerHTML = j;
            }
            setInterval(changeColorFunction, 10);

【问题讨论】：

标签： javascript

【解决方案1】：

问题：

colors = colors.concat(colors.reverse());

... 是 colors.reverse() 改变了 colors 数组本身，这意味着您将一个反转数组附加到一个已经反转的数组。试试这个：

colors = colors.concat(colors.slice().reverse());

【讨论】：

哦，当然，克隆数组的方法不叫“Clone”或“Copy”，它叫“Slice”。学习一门新语言真是令人气愤:-)
slice(start, end) 的第一个用途不仅仅是克隆数组，而是获取它的“切片”，即包含从start 到end 的项目的新数组。通过不传递任何参数，您正在询问一个新数组，其中包含从 0 到数组末尾的元素 -> 数组本身的副本。这类似于 Python 中发生的情况（您使用[:] 切片克隆列表），因为“变量”表示指针而不是值，这与 PHP 等语言中发生的情况不同。
如果您有兴趣深入了解切片：w3schools.com/jsref/jsref_slice_array.asp

【解决方案2】：

首先将您的colors 数组复制到某处。 reverse 更改数组本身，而不仅仅是返回一个还原的。

更新

代码示例：

colors.concat(colors.slice(0).reverse());

【讨论】：