溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue怎么通過笛卡兒積實現(xiàn)sku庫存配置的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
以兩個屬性為例子，舉例說明：
1x1:
白色
S
結(jié)合之后就是
[白色,S]
this.selectCheckArr=[
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 輸出：[
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
**/1x2
白色 黃色
S
結(jié)合之后就是
[白色,S ],[黃色,S ]
this.selectCheckArr=[
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 01,
"attrValueName": "黃色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 輸出：
[
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 01,
"attrValueName": "黃色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
**/2x2
白 黃
S M
結(jié)合之后就是
[白色,S ],[白色,M ],[黃色,S ],[黃色,M ]
this.selectCheckArr= [
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 01,
"attrValueName": "黃色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 輸出：
[
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
],
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 01,
"attrValueName": "黃色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "顏色",
"attrValueId": 01,
"attrValueName": "黃色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
]
]
**/ // 笛卡兒積
getProducts(specs) {
if (!specs || specs.length == 0) {
return [];
} else {
return joinSpec([
[]
], specs, 0, specs.length - 1);
}
function joinSpec(prevProducts, specs, i, max) {
var currentProducts = [],
currentProduct, currentSpecs = specs[i];
if (i > max) {
return prevProducts;
}
prevProducts.forEach(function (prevProduct) {
currentSpecs.forEach(function (spec) {
currentProduct = prevProduct.slice(0);
currentProduct.push(spec);
currentProducts.push(currentProduct);
});
});
return joinSpec(currentProducts, specs, ++i, max);
}
},注意
this.getProducts()的入?yún)?，需與博主保持一致(數(shù)組對象)，否則會有問題哦~
如果是1x1 ，就是總共生成1條
[ [ { } ] , [ { } ] ]，變成 [ [ { } , { } ] ]
如果是2x1 ，就是總共生成2條
[ [ { } ,{ } ] , [ { } ] ] 變成 [ [ { } ,{ } ] , [ { } ,{ } ] ]
var arr = [
['黑色', '白色', '藍(lán)色'],
['8GB', '16GB', '32GB'],
['大', '中', '小']
];
/**
* 生成笛卡爾積
* @returns {*}
*/
function descartes(array) {
if (array.length < 2) return array[0] || [];
return [].reduce.call(array, function (col, set) {
var res = [];
col.forEach(function (c) {
set.forEach(function (s) {
var t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
})
});
return res;
});
}
console.log(descartes(arr));該方法用于根據(jù)商品規(guī)格屬性生成商品SKU組合，以上為javascript代碼
執(zhí)行結(jié)果如下：
0: ["黑色", "8GB", "大"]
1: ["黑色", "8GB", "中"]
2: ["黑色", "8GB", "小"]
3: ["黑色", "16GB", "大"]
4: ["黑色", "16GB", "中"]
5: ["黑色", "16GB", "小"]
6: ["黑色", "32GB", "大"]
7: ["黑色", "32GB", "中"]
8: ["黑色", "32GB", "小"]
9: ["白色", "8GB", "大"]
10: ["白色", "8GB", "中"]
11: ["白色", "8GB", "小"]
12: ["白色", "16GB", "大"]
13: ["白色", "16GB", "中"]
14: ["白色", "16GB", "小"]
15: ["白色", "32GB", "大"]
16: ["白色", "32GB", "中"]
17: ["白色", "32GB", "小"]
18: ["藍(lán)色", "8GB", "大"]
19: ["藍(lán)色", "8GB", "中"]
20: ["藍(lán)色", "8GB", "小"]
21: ["藍(lán)色", "16GB", "大"]
22: ["藍(lán)色", "16GB", "中"]
23: ["藍(lán)色", "16GB", "小"]
24: ["藍(lán)色", "32GB", "大"]
25: ["藍(lán)色", "32GB", "中"]
26: ["藍(lán)色", "32GB", "小"]
以上就是“vue怎么通過笛卡兒積實現(xiàn)sku庫存配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼