javascript 把多个数组相互匹配,动态设置商品的多种规格

应用场景
设置商品的多种规格
需求
动态添加多个规格,并给每个规格设置多个属性,
得到各个规格中的各个属性与其他规格中的各个属性相匹配

话不多说,上代码

        //每个规格和规格的属性  数据
        var data = [
            {
                name:'颜色',
                specs:['黑','白','灰']
            },
            {
                name:'尺码',
                specs:[35,36,37]
            },
            {
                name:'规格3',
                specs:['加棉','不加棉']
            },
        ]
        //两个数组相‘乘’  把两个数组中的每一项和另一个数组的每一项相匹配 的函数
        var Multiply = function (arr1,arr2){
            var arr = []
            if(arr2.length===0 && arr1.length===0){
                arr.push(['',''])
            }else if(arr2.length===0){
                for(var i = 0 ;i<arr1.length;i++){
                    arr.push([arr1[i],''])
                }
            }else if(arr1.length===0 && Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr2.length;i++){
                    arr.push(['',...arr2[i]])
                }
            }else if(arr1.length===0 && !Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr2.length;i++){
                    arr.push(['',arr2[i]])
                }
            }else if(Array.isArray(arr2[0])){
                for(var i = 0 ;i<arr1.length;i++){
                    for(var j = 0 ;j<arr2.length;j++){
                        arr.push([arr1[i],...arr2[j]])
                    }
                }
            }else{
                for(var i = 0 ;i<arr1.length;i++){
                    for(var j = 0 ;j<arr2.length;j++){
                        arr.push([arr1[i],arr2[j]])
                    }
                }
            }
            return arr
        }
        var arrData = []
        if(data.length===1){
            if(data[0].specs.length === 0){
            arrData.push(' ')
            }else{
            for(var j = 0 ;j <data[0].specs.length;j++){
                var arr = [data[0].specs[j]]
                arrData.push(arr)
            }
            }
        }else{
            for(var i = data.length - 1;i>0;i--){
            //循环调用Multiply方法   匹配多个数组
                if(i  === data.length - 1){
                    arrData = Multiply(data[i-1].specs,data[i].specs)
                }else{
                    arrData = Multiply(data[i-1].specs,arrData)
                }
            }
        }
        console.log(arrData);
        //如果需要每一项都是对象的话,可以转一下对象
        var objArr=[]
        for(var i = 0 ;i <arrData.length;i++){
            objArr.push({...arrData[i]})
        }
        console.log(objArr);

最后打印出来的结果是这样的
在这里插入图片描述
因为我这边是要求动态添加,可能会有第三个规格已经有属性了但第二个还是空数组,所以在 Multiply 方法中多了很多空数组情况下的判断,不需要的可以按需删掉判断空数组的部分。

javascript

发布了1 篇原创文章 · 获赞 3 · 访问量 50

猜你喜欢

转载自blog.csdn.net/weixin_45919023/article/details/104899811