javascript - 使用循环时出错

Question

我创建了一个颜色 slider (在 this library 的帮助下)，现在我正在尝试使颜色 slider 具有动态渐变。我已经成功实现了这一点，但是当我尝试最小化渐变代码(使用循环)时，我遇到了问题。

这是渐变布局。每个 slider 都有 x 种颜色来创建渐变。然后 slider 的两侧都是纯色。我的代码非常重复，所以我尝试创建循环。这些循环对我来说看起来有点难看，而且那里有一个错误，我不知道如何解决。

错误内容如下:

Uncaught TypeError: Cannot read property '1' of undefined

这是 RGB 颜色空间 slider 的代码。 (我还有 3 个色彩空间。)

setGradient(slider[0], "right", [rgba2cssString(0, rgb.g, rgb.b), rgba2cssString(255, rgb.g, rgb.b)]);
setGradient(slider[1], "right", [rgba2cssString(rgb.r, 0, rgb.b), rgba2cssString(rgb.r, 255, rgb.b)]);
setGradient(slider[2], "right", [rgba2cssString(rgb.r, rgb.g, 0), rgba2cssString(rgb.r, rgb.g, 255)]);

slider[0].previousElementSibling.style.backgroundColor = rgba2cssString(0, rgb.g, rgb.b);
slider[0].nextElementSibling.style.backgroundColor = rgba2cssString(255, rgb.g, rgb.b);
slider[1].previousElementSibling.style.backgroundColor = rgba2cssString(rgb.r, 0, rgb.b);
slider[1].nextElementSibling.style.backgroundColor = rgba2cssString(rgb.r, 255, rgb.b);
slider[2].previousElementSibling.style.backgroundColor = rgba2cssString(rgb.r, rgb.g, 0);
slider[2].nextElementSibling.style.backgroundColor = rgba2cssString(rgb.r, rgb.g, 255);

这是尝试的缩小版本(适用于所有颜色空间(“Lab”是颜色空间))。如果 gradientObject 也可以使用循环生成，将会有所帮助。

var gradientObject = {
    rgb: [[[0, rgb.g, rgb.b], [255, rgb.g, rgb.b]],
        [[rgb.r, 0, rgb.b], [rgb.r, 255, rgb.b]],
        [[rgb.r, rgb.g, 0], [rgb.r, rgb.g, 255]]],

    hsl: [[[60, hsl.s, hsl.l], [120, hsl.s, hsl.l], [180, hsl.s, hsl.l], [300, hsl.s, hsl.l], [360, hsl.s, hsl.l]],
        [[hsl.h, 0, hsl.l], [hsl.h, 100, hsl.l]],
        [[hsl.h, hsl.s, 0], [hsl.h, hsl.s, 50], [hsl.h, hsl.s, 100]]],

    hsv: [[[0, hsv.s, hsv.v], [60, hsv.s, hsv.v], [120, hsv.s, hsv.v], [180, hsv.s, hsv.v], [300, hsv.s, hsv.v], [360, hsv.s, hsv.v]],
        [[hsv.h, 0, hsv.v], [hsv.h, 100, hsv.v]],
        [[hsv.h, hsv.s, 0], [hsv.h, hsv.s, 50], [hsv.h, hsv.s, 100]]],

    Lab: [[[0, Lab.a, Lab.b], [100, Lab.a, Lab.b]],
        [[Lab.L, -128, Lab.b], [Lab.L, 128, Lab.b]],
        [[Lab.L, Lab.a, -128], [Lab.L, Lab.a, 128]]],

    alpha: [[[255, 255, 255, 0], [rgb.r, rgb.g, rgb.b, 1]]]
};

var sliderIndex = 0;
for (var colorSpaceGradient in gradientObject) {
    if (!gradientObject.hasOwnProperty(colorSpaceGradient)) return;

    var currentColorSpaceGradient = gradientObject[colorSpaceGradient],
        currentSlidersArray = [];

        for (var i = 0; i < currentColorSpaceGradient.length; i++) {
            var colorSliderGradient = currentColorSpaceGradient[i],
                colorSliderGradientArray = [];

            for (var x = 0; x < colorSliderGradient.length; x++) {
                console.log(colorSliderGradient[x]);
                colorSliderGradientArray.push(toCSSstring[colorSpaceGradient](colorSliderGradient[x]));
            }
            setGradient(slider[sliderIndex], 'right', colorSliderGradientArray);
            sliderIndex++;
        }

}

完整代码:(第 #95 - 204 行的相关代码

codePen

我的问题是，如何最小化代码而不出现错误？

Answer 1

在不太了解代码的内部工作原理的情况下，我可以在您的 hsva2cssString 函数中发现一些潜在的问题。

我怀疑给你带来麻烦的一件事是你的 if 链从第 365 行开始:

if (typeof h === 'object') { /*something*/ }
else if (Array.isArray(h)) { /*something else*/ }

你永远无法超越第一个子句。

JavaScript 的一个小怪癖是数组仍然被视为对象。因此，即使 h 是一个数组，第一个 if block 仍然会执行。尝试运行 typeof []，您就会明白我的意思。您使用 Array.isArray 的想法是正确的，问题是您永远无法达到该代码。我建议要么交换这两个子句的顺序，要么很可能完全删除第一个子句，原因如下:

在第 376 行，对 myColor.convertColor 的调用将以数组形式传入 hsvObject(因为第一个 if 子句)。该函数似乎期望第一个参数作为对象，而不是数组，这会导致您提到的错误。

此外，当函数需要第四个 alpha 值时，您的 hsv 数组具有三个元素。我可以预见那里的问题，但我不知道解决方案是更改数组本身，还是更改函数处理数组的方式。

我很谨慎地在没有更好地了解您的代码的情况下为您提供直接的解决方案，但我认为如果您仔细查看 hsva2cssString 中的 if block ，您将找到导致错误的原因。