JS输出二维数组所有组合拼接的函数

作者 拓荒 日期 2017-05-05
JavaScript

在做一个商品发布功能的时候遇到需要选择规格的功能，且规格可能是多个，每个又有多个规格值，多个规格之间搭配还可能有多种价格和库存，如下图：
示例图
首先想到的是当每个规格中都有选中的选项的时候将选中的数据以二位数组的形式先存起来；
先声明一个数组：

var arr = new Array();

获取规格类型的数量和声明一个用来计数的变量

var guigeCell = document.getElementsByClassName("guige-cell");
var guigeCellNum = guigeCell.length;
var j = 0;

当点击一个规格值的时候给这个规格加上一个class(selected)，这个class既可以是选中后的样式也可以用来标记这个规格有值被选中了，然后让 j 加一；

function (){
    if(this.className==='unit-item-option'){
        this.className = 'unit-item-option selected';
    }else{
        this.className = 'unit-item-option';
    };
    for(i=0;i<guigeCellNum;i++){
        if(guigeCell[i].getElementsByClassName("selected").length!=0){
            j++;
        }
    };
    //判断所有的规格是否都有被选中的项,然后将每个规格中的值再以数组的形式存储
    if(j===guigeCellNum){
        for(i=0;i<guigeCellNum;i++){
            arr[i]=new Array();
            for(z=0;z<guigeCell[i].getElementsByClassName("selected").length;z++){
                arr[i].push(guigeCell[i].getElementsByClassName("selected")[z].innerText)
            }
        }
    }
}

最后得到的arr就是一个二维数组[[“白色”,”红色”],[“M”],[“XXL”],[“套餐一”]]，对应上面的图片应该是这样：
控制台输出日志
然后就是处理arr这个数组，让这个二维数组里面的值相互拼接在生成另一个数组[[“白色”,”M”,”套餐一”],[“白色”,”XXL”,”套餐一”],[“红色”,”M”,”套餐一”],[“红色”,”XXL”,”套餐一”]]

var len = arr.length;
//声明一个新的数组
var results = [];
var indexs = {};
function specialSort(start) {
    start++;
    if (start > len - 1) {
        return;
    }
    if (!indexs[start]) {
        indexs[start] = 0;
    }
    if (!(arr[start] instanceof Array)) {
        arr[start] = [arr[start]];
    }
    for (indexs[start] = 0; indexs[start] < arr[start].length; indexs[start]++) {
        specialSort(start);
        if (start == len - 1) {
            var temp = [];
            for (var i = len - 1; i >= 0; i--) {
                if (!(arr[start - i] instanceof Array)) {
                    arr[start - i] = [arr[start - i]];
                }
                temp.push(arr[start - i][indexs[start - i]]);
            }
            results.push(temp);
        }
    }
}
specialSort(-1);

数组results就是最终得到的结果，可以将其打印出来看一下
控制台输出日志

（完）

FEATURED TAGS
JavaScript