~提姆備忘錄~: [Javascript]列舉所有排列組合

這是從黑暗大大看到的一篇用Javascript列出所有排列組合的文章, 程式目的在於列出各項陣列的多重組合, 記錄在這邊做個備忘~
有將程式放在JSFIDDLE, 可以直接線上測試結果~

HTML:

<html>
<head>
    <title>OutterJoin</title>

</head>
<body>
    <div id="disp"></div>
</body>
</html>

CSS:

body,input { font-size: 9pt; }
#disp { width: 400px; }
#disp span  
{
    float: left; display: inline-block; padding: 4px;
    border: 1px solid gray; margin: 2px;
}

Javascript:

$(function () {
    //排列組合用的維度
    var dimensions = [];
    dimensions.push(["紅", "綠", "藍"]);
    dimensions.push(["男", "女"]);
    dimensions.push(["XL", "L", "M", "S"]);
    //dimensions.push(["純綿", "排汗"]);
    
    //用以存放結果的陣列
    var results = [];
    
    //使用遞迴方式排列出所有組合
    //共有兩個傳入參數，目前處理的維度、排列組合時已累積的字首
    function explore(curDim, prefix) {
        
        //取出下一層維度(Remove the first item)
        var nextDim = dimensions.shift();
        
        for (var i = 0; i < curDim.length; i++) {
            if (nextDim) 
                //若仍有下一層維度，繼續展開
                //並將傳入字首加上目前維度選項成為下一層的字首
                explore(nextDim, prefix + curDim[i] + "/");
            else 
                //若已無下一層，則傳入字首加上目前維度選項成為結果
                results.push(prefix + curDim[i]);
        }
        
        //將下層維度存回，供上層維度其他選項使用
        if (nextDim) dimensions.push(nextDim);
    }
    
    //傳入第一層維度開始演算
    explore(dimensions.shift(), "");
    
    //列出結果
    var html = [];
    $.each(results, function (idx, val) {
        html.push("" + val + "");
    });
    
    $("#disp").html(html.join(""));    
});

執行結果:

~提姆備忘錄~

2012-06-13

[Javascript]列舉所有排列組合

沒有留言:

張貼留言