在循环中查找所有选项的组合

13
我正在寻找最佳方法遍历一堆选项,以确保我涵盖了所有可用选项。
我创建了一个功能,允许客户构建基本上是在彼此之上叠加的其他图像的图像。这些其他图像分成不同的组。它们在图像的侧面有链接,用户可以单击这些链接来滚动查看所有不同的图像。
现在,我正在制作一个自动化流程,将运行更改图像的函数,当用户单击其中一个链接时会出现更改。我需要确保在此过程中涵盖了不同图像的每种可能组合。
假设有3个不同的帽子、4件不同的衬衫、5条不同的裤子和6双不同的鞋子。我可以用一个数组来表示每个组的选项数。当前的数组为[3, 4, 5, 6]。
什么是最佳的方法来遍历这个数组,以确保显示所有可能的选项?

2
展示代码总是很有帮助的。你能否发布你拥有的相关代码? - Waleed Khan
2
不太确定你的问题是什么 - 是一个排列组合问题吗?例如,你想要 [9,3,3,3]、[3,9,3,3]、[3,3,9,3]、[3,3,3,9] ..之类的东西吗? - Gabriel Florit
@arxanas 我会尽快获取代码,但我现在是在家里写这个。谢谢关注。 - jaz872
@Gabriel Florit 对不起,如果我没有解释清楚。可以这样想,我有一张显示服装的图片。有9个不同的帽子,3件不同的衬衫,3条不同的裤子和3双不同的鞋子。我需要循环遍历它们,以展示所有可能的服装组合。 - jaz872
可能是重复的问题,参考数组的惰性笛卡尔积(任意嵌套循环) - Phrogz
3个回答

18

你想要所有数组的笛卡尔积

我在我的网站上讨论了这个问题,并提供了JavaScript实现:
http://phrogz.net/lazy-cartesian-product

例如,要以“正向”顺序快速迭代它们,可以使用以下方法:

hats   = ['fez','fedora']
shirts = ['t-shirt','long']
pants  = ['shorts','jeans']
shoes  = ['sneaker','loafer']

lazyProduct( [hats,shirts,pants,shoes], function(hat,shirt,pant,shoe){
  // Your function is yielded unique combinations of values from the arrays
  console.log(hat,shirt,pant,shoe);
});

function lazyProduct(sets,f,context){
  if (!context) context=this;
  var p=[],max=sets.length-1,lens=[];
  for (var i=sets.length;i--;) lens[i]=sets[i].length;
  function dive(d){
    var a=sets[d], len=lens[d];
    if (d==max) for (var i=0;i<len;++i) p[d]=a[i], f.apply(context,p);
    else        for (var i=0;i<len;++i) p[d]=a[i], dive(d+1);
    p.pop();
  }
  dive(0);
}

输出结果:

fez t-shirt shorts sneaker
fez t-shirt shorts loafer
fez t-shirt jeans sneaker
fez t-shirt jeans loafer
fez long shorts sneaker
fez long shorts loafer
fez long jeans sneaker
fez long jeans loafer
fedora t-shirt shorts sneaker
fedora t-shirt shorts loafer
fedora t-shirt jeans sneaker
fedora t-shirt jeans loafer
fedora long shorts sneaker
fedora long shorts loafer
fedora long jeans sneaker
fedora long jeans loafer
fez t-shirt shorts sneaker
fez t-shirt shorts loafer

这与以下结果完全相同:

hats.forEach(function(hat){
  shirts.forEach(function(shirt){
    pants.forEach(function(pant){
      shoes.forEach(function(shoe){
        console.log(hat,shirt,pant,shoe);
      });
    });
  });
});

或(对于较旧的浏览器):

for (var h=0;h<hats.length;h++){
  var hat = hats[h];
  for (var s=0;s<shirts.length;s++){
    var shirt = shirts[s];
    for (var p=0;p<pants.length;p++){
      var pant = pants[p];
      for (var e=0;e<shoes.length;e++){
        var shoe = shoes[e];
        console.log(hat,shirt,pant,shoe);        
      }
    }
  }
}

…但它支持在运行时定义任意数量的数组。(如果你正在使用我网站上的第一个"惰性"实现,你可以随机选择项目,在反向迭代中迭代,或轻松地在任何时候停止迭代.)


这正是我一直在寻找的。谢谢@Phrogz。我原本打算对每个项目进行forEach,但一直感到有更好的方法来完成它。 - jaz872
你如何修复react中lazyProduct函数的问题: 第7行:43:期望是一个赋值或函数调用,而不是一个表达式 no-unused-expressions 第8行:43:期望是一个赋值或函数调用,而不是一个表达式 no-unused-expressions ? - poca

2

编辑:我已经使用jsperf在这里对不同的方法进行了比较,Phrogz的方法明显是最快的,是第3个的两倍。


如果我理解正确,您正在询问如何计算每列数字是不同基数的情况。您可以通过递归实现此操作。

function options(opArr, fullArray){
    var i = 0, j = opArr.length;
    if(j < fullArray.length){ // if opArr doesn't have item from each group, add new group
        while(i < fullArray[j]){ // count up for this group
            newArr = opArr.slice(0); // clone opArr so we don't run into shared reference troubles, not sure if necessary
            newArr[j] = i;
            i++;
            options(newArr, fullArray); // recurse
        }
    }else{ // opArr is now a unique array of your items
        // console.log(opArr);
    }
}
options([], [3, 9, 3, 3]);

注意:这个(例子)将导致制作 3 * 9 * 3 * 3 = 243 个数组。这样做可能会消耗大量内存。
另一种方法是从整数转换为数组,这可能会节省内存使用,因为您可以忘记所有先前计算的数组。
function countUp(arrayOfBases, callback, self){
    var arr = arrayOfBases.reverse(), x = 1, i = arr.length,
        me = (self===undefined?this:self),
        makeArr = function(arr, x, fn, me){
        var a = arr.slice(0), n = [], i = x, j = 0, k = 0;
        while(a.length > 0){
            k = a[0];
            if(k !== 0) j = i % k, i = (i - j) / k;
            else j = 0;
            n.unshift(j);
            a.shift();
        }
        fn.call(me,n);
    };
    while (i-->0) if(arr[i] !== 0) x = x * arr[i];
    i = 0;
    while(i < x){
        makeArr(arr, i, callback, me);
        i++;
    }
}
countUp([3,9,3,3], function(a){console.log(a);});

另一种方法类似于之前的方法,保留上次生成的数组,这样在循环中计算量会减少,但初始化时需要更多计算。

function countUp2(arrayOfBases, callback, self){
    var arr = arrayOfBases.reverse(), x = 1, i = arr.length, last = [],
        me = (self===undefined?this:self),
        addOne = function(arr, n, fn, me){
        var j = n.length, i = j - 1;
        n[i]++;
        while(j = i, i-- > 0 && n[j] >= arr[j]){
            if(arr[j] === 0) n[i] += n[j], n[j] = 0;
            else n[i]++, n[j] -= arr[j];
        }
        return fn.call(me,n.slice(0)), n;
    };
    while (i-->0){
        if(arr[i] !== 0) x = x * arr[i];
        last[i] = 0;
    }
    i = 0;
    last[last.length-1] = -1;
    while(i < x){
        last = addOne(arr, last, callback, me);
        i++;
    }
}
countUp2([3,9,3,3], function(a){console.log(a);});

所有这些方法都会输出。
[0,0,0,0]
[0,0,0,1]
...
[0,8,1,2]
[0,8,2,0]
...
[2,8,2,1]
[2,8,2,2]

您可以随意处理这些数据,按照您的选择进行操作。

0

也许这是一个晚回答。但我在geeksforgeeks找到了一个不同的解决方案。所以任何人都可以尝试一下。

const hats   = ['fez','fedora'];
const shirts = ['t-shirt','long'];
const pants  = ['shorts','jeans'];
const shoes  = ['sneaker','loafer'];

const data = [hats, shirts, pants, shoes];
const keys = ['hats', 'shirts', 'pants', 'shoes'];


function combination(data, keys) {
    const { length: numberOfArrays } = data;
    
    /**
     * Initialize a variable called indices
     * with the length of data array and
     * fill with zeros.
     */
    const indices = Array(numberOfArrays).fill(0);
    const result = [];

    while (true) {
        let obj = {};

        /**
         * Get the values from the inner arrays
         * with help of `indices` and make an object
         */
        for (let i = 0; i < numberOfArrays; i++) {
            obj[keys[i]] = data[i][indices[i]];
        }
        
        // Push the object into the result array
        result.push(obj);

        // Get the last array
        let pick = numberOfArrays - 1;
        
        /**
         * find the rightmost array that has more 
         * elements left after the current element  
         * in that array
         */
        while (pick >= 0 && (indices[pick] + 1 >= data[pick].length)) {
            pick--;
        }

        /**
         * No such array is found so no more  
         * combinations left 
         */
        if (pick < 0) break;

        /**
         * If found move to next element in that array
         */
        indices[pick]++;

        /**
         * for all arrays to the right of this  
         * array current index again points to  
         * first element 
         */
        for (let i = pick + 1; i < numberOfArrays; i++) {
            indices[i] = 0;
        }

    }

    return result;
}

console.log(combination(data, keys));
.as-console-wrapper {min-height: 100%!important; top: 0}


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接