javascript 数组条件的简写版本答案

【问题标题】：Shorthand version for javascript array conditionjavascript 数组条件的简写版本
【发布时间】：2012-11-12 20:58:35
【问题描述】：

我的 JavaScript 文件中有 10 个颜色样式数组。我需要检查下拉列表中当前选择的值是否等于我创建的数组名称之一，并在更改后分配数组。

这里有 2 个数组：

var red = {
    primary_color: 'red',
    primary_hover_color: 'black',
    menu_color: '#9c9fa3'
}

var yellow = {
    primary_color: '#22c39b',
    primary_hover_color: '#187e65',
    menu_color: '#9c9fa3'
}

然后我也有这个下拉菜单：

$('#color_palette').change(function() {
    var palette = $(this).val();

    if (palette = 'red') { palette = red }
    if (palette = 'yellow') { palette = yellow }
    // etc etc
});

我想知道是否有这个的简写版本，而不是必须检查每个值的 if 条件并使其更加“动态”，而不是硬编码条件中的每个颜色值。

【问题讨论】：

请先学习javascript。那些不是数组。 if 没有布尔条件，只有赋值。
Convert string to variable name in Javascript 的可能重复项
我正在学习它，因此我的问题......它们不是数组对象吗？
@mousesports，不，它们只是“对象”。数组使用[] 语法。另外，不知道为什么有人反对这个问题......这是完全合法的。
它们是对象。所有数组都是对象，但并非所有对象都是数组。

标签： javascript jquery arrays jquery-ui

【解决方案1】：

您可以将颜色放在单个对象中

var colors = {
red: {
  primary_color: 'red',
  primary_hover_color: 'black',
  menu_color: '#9c9fa3'
},

yellow: {
  primary_color: '#22c39b',
  primary_hover_color: '#187e65',
  menu_color: '#9c9fa3'
}
}

然后将您的支票更改为

$('#color_palette').change(function() {
    var palette = colors[$(this).val()];
});

【讨论】：

【解决方案2】：

你可以安排你的调色板：

var palettes = {
   red: red,
   yellow: yellow
};

然后像这样访问它们

var palette = palettes[palette];

【讨论】：

【解决方案3】：

首先，让我们修复您发布的代码中的问题；

您拥有的不是数组，而是通过对象字面量语法声明的对象。
if (palette = 'red') 将palette 设置为"red"；它没有做任何比较；那是== 和===。你应该拥有的是：
```
if (palette === "red")
```

在您的更改处理程序中，您将覆盖您的变量 palette，其中包含用户选择的值以及每个 if 块的内容。

$('#color_palette').change(function() {
    var palette = $(this).val(); // <-- set here

    if (palette = 'red') { palette = red  // <--- overwritten here}
    if (palette = 'yellow' /* well, and here, but we fixed that in #2 */) { palette = yellow }
    // etc etc
});

您应该考虑将所有颜色样式包含在一个母对象中；

var styles = {
    red: {
        primary_color: 'red',
        primary_hover_color: 'black',
        menu_color: '#9c9fa3'
    },
    yellow: {
        primary_color: '#22c39b',
        primary_hover_color: '#187e65',
        menu_color: '#9c9fa3'
    }
};

那么你可以在你的 change 函数中做的很简单：

$('#color_palette').change(function() {
    palette = styles[$(this).val()];
});

【讨论】：

感谢马特的解释。

【解决方案4】：

我会有一个调色板对象：

palettes = {
    red: {
        primary_color: 'red',
        /* etc. */
    }, 
    yellow: {
         primary_color: 'yellow',
        /* etc. */
    }
}

然后，您可以轻松选择它：

var selectedPalette = palettes[$(this).val()];

【讨论】：