javascript - javascript 数组条件的简写版本

Question

我的 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 条件并使其更加“动态”，而不是硬编码条件中的每个颜色值。

score 2 · Accepted Answer

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

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()];
});

score 1 · Accepted Answer

你可以安排你的调色板：

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

然后像这样访问它们

var palette = palettes[palette];

score 1 · Accepted Answer

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

您拥有的不是数组，而是通过对象文字语法声明的对象。
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'
    }
};

那么你可以在你的更改功能中做的很简单：

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

score 0 · Accepted Answer

我会有一个调色板对象：

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

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

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

javascript - javascript 数组条件的简写版本

4 回答 4

Related

Reference