javascript - 将数组的反向附加到自身

Question

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

现在我想让这个数组带你从红色到蓝色然后再返回。显而易见的解决方案是将数组的反向追加到数组。

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

显然，我还没有掌握 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);

Answer 1

问题在于:

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

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

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