将对象连接到数组中答案

【问题标题】：Concatenate object into array将对象连接到数组中
【发布时间】：2014-03-06 21:31:41
【问题描述】：

var groupArrays = {
    "group1" : [
        "volvo",
        "bmw",
        "audi"
    ],
    "group2" : [
        "red"
    ],
    "group3" : [
        "1991"
    ]
};

这个对象是在过滤汽车列表后创建的，我想用它创建一些 css 选择器，以便在 javascript 中使用来显示过滤后的元素。所以基本上我想要的是一个带有可能选择器的数组，如下所示：

var selectors = [".volvo.red.1991", ".bmw.red.1991", ".audi.red.1991"];

如果组数未知，创建selectors 数组的最简单方法是什么？

【问题讨论】：

您需要显示更多数据，以便我们了解分组模式是什么。如果 group2 或 group3 中有多个项目，one 会做什么？目前尚不清楚构建选择器的算法是什么。您是否只是尝试构建 group1、group2 和 group3 的所有可能组合？
继续这个思路：如果用户没有选择任何品牌怎么办？我不认为你的问题可以通过几个嵌套循环优雅地解决。如果我们考虑滤波器设计：为什么我们需要选择1991或red三次？

标签： javascript jquery arrays javascript-objects

【解决方案1】：

var groupArrays = {
    "group1": [
         "volvo",
         "bmw",
         "audi"
     ],
     "group2": [
         "red"
     ],
     "group3": [
         "1991"
     ]
};

var selectors = [];
var selector;

for (var g1 = 0; g1 < groupArrays.group1.length; g1++) {
    for (var g2 = 0; g2 < groupArrays.group2.length; g2++) {
        for (var g3 = 0; g3 < groupArrays.group3.length; g3++) {
            selector = "." + groupArrays.group1[g1] +
                        "." + groupArrays.group2[g2] +
                        "." + groupArrays.group3[g3];
            selectors.push(selector);
        }
    }
}

console.log(selectors);

JS Fiddle

为任意数量的组更新了代码

var groupArrays = {
    "group1": [
        "volvo",
        "bmw",
        "audi"
    ],
    "group2": [
        "red","green"
    ],
    "group3": [
        "1991","1992"
    ]
};

var selectors = [];
var values = [];
var ga = [];

for (var group in groupArrays) {
    ga.push(groupArrays[group]);
}

traverse(ga, 0);

console.log(selectors);

function traverse(ga, index) {
    if (index >= ga.length) {
        selectors.push("." + values.join("."));

        return;
    }

    var hold = ga[index].slice(0);
    var gacopy = ga[index];

    while(gacopy.length > 0) {
        var pickedValue = gacopy[gacopy.length - 1];
        values.push(pickedValue);
        gacopy.pop();

        traverse(ga, index + 1);

        values.splice(values.indexOf(pickedValue), 1);
    }

    ga[index] = hold;
}

JS Fiddle

【讨论】：

组数未知

【解决方案2】：

只需一系列简单的嵌套循环即可完成此操作。不过，class 1991 以数字开头可能会有一些问题。

var selectors = [];
var i = groupArrays.group1.length,
    j,
    k;
while (i--) {
    j = groupArrays.group2.length;
    while (j--) {
        k = groupArrays.group3.length;
        while (k--) {
            selectors.push(
                '.' + groupArrays.group1[i] +
                '.' + groupArrays.group2[j] +
                '.' + groupArrays.group3[k]
            );
        }
    }
}
selectors; // [".audi.red.1991", ".bmw.red.1991", ".volvo.red.1991"]

如果您在 groupArrays 中有未知数量的项目，您可能需要 for..in 循环遍历它并使用生成的键进行递归。

【讨论】：

组数未知

【解决方案3】：

你可以使用map函数

var selectors = [];
groupArrays["group1"].map(function(x) {
    groupArrays["group2"].map(function(y) {
        groupArrays["group3"].map(function(z) {
                    selectors.push('.' + x + '.' + y + '.' + z)})})});

【讨论】：

组数未知