应用场景
设置商品的多种规格
需求
动态添加多个规格,并给每个规格设置多个属性,
得到各个规格中的各个属性与其他规格中的各个属性相匹配
话不多说,上代码
//每个规格和规格的属性 数据
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