Javascript 使用循环时出错

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

这是渐变布局。对于每个滑块，有x个数量的颜色创建渐变。然后在滑块的两侧是纯色。我的代码非常重复，所以我尝试创建循环。循环在我看来有点难看，还有一个错误，我不知道如何解决

错误是这样说的：

未捕获的TypeError:无法读取未定义的属性“1”

下面是rgb颜色空间滑块的代码。（我还有3个颜色空间。）

以下是尝试缩小的版本（适用于所有颜色空间（“实验室”是一个颜色空间））。如果还可以使用循环生成

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++;
        }

}

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]，
实验室：[[0，实验室a，实验室b]，[100，实验室a，实验室b]，
[Lab.L，-128，Lab.b]，[Lab.L，128，Lab.b]，
[Lab.L，Lab.a，-128]，[Lab.L，Lab.a，128]]，
阿尔法：[[255，255，255，0]，[rgb.r，rgb.g，rgb.b，1]]
};
var sliderIndex=0；
for（渐变对象中的var colorspace渐变）{
如果（！gradientObject.hasOwnProperty（colorSpaceGradient））返回；
var currentColorSpaceGradient=gradientObject[colorSpaceGradient]，
currentSlidersArray=[]；
对于（var i=0；i

完整代码：（第95-204行的相关代码

---

我的问题是，如何在不出错的情况下最小化代码？

在不了解代码内部工作原理的情况下，我可以看到

hsva2cssString

函数中存在一些潜在问题

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

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

你永远也过不了第一条

javascript的一个小怪癖是数组仍然被视为对象。因此，即使

h

是数组，第一个

if

块仍然会通过。请尝试运行

typeof[]

你就会明白我的意思。你使用

数组的想法是正确的。isArray

，问题是你永远无法达到那个代码。我建议你要么切换这两个子句的顺序，要么很可能完全删除第一个子句，原因如下：

在第376行，您对myColor.convertColor的调用将以数组形式传入

hsvObject

（因为第一个

if

子句）。该函数似乎期望第一个参数作为对象，而不是数组，这会导致您出现您提到的错误

此外，当函数期望alpha的第四个值时，hsv数组有三个元素。我可以预见其中的问题，但我不知道解决方案是改变数组本身，还是改变函数处理数组的方式

---

我很谨慎地在不了解代码的情况下为您提供一个直接的解决方案，但我认为如果您仔细查看

hsva2cssString

中的

if

块，您会发现导致错误的原因。

在不太了解代码内部工作原理的情况下，我可以看到

hsva2cssString中存在一些潜在的问题de>功能

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

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

你永远也过不了第一条

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

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

此外，当函数期望alpha的第四个值时，hsv数组有三个元素。我可以预见其中的问题，但我不知道解决方案是改变数组本身，还是改变函数处理数组的方式

我很谨慎地在不了解您的代码的情况下为您提供一个直接的解决方案，但我认为如果您仔细查看
hsva2cssString
中的
if
块，您会发现导致错误的原因。
那么问题/问题是什么？如果您遇到错误，您应该共享错误消息。@snookieordie您是对的！已更新问题那么，问题是什么