<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//兩個數組求笛卡爾積
/*let arr1 = ["a","b","c"]
let arr2 = ["1","2","3"]
let arr3 = ["x","y","z"]
// a_1 a_2 a_3 b_1 .......
//arr1.forEach(function(e1){}) e1就是arr1數組每次遍歷的元素
//如果數組的個數不確定,這種方式便不可以取
arr1.forEach(e1=>{
arr2.forEach(e2=>{
arr3.forEach(e3=>{
console.log(e1+"_"+e2+"_"+e3)
})
})
})*/
// es6 的一個方法 --- reduce 數組元素的“累加” 拿前一個元素和後面的元素依次進行計算
/*let arr1 = ["a","b","c","d"]
let arr2 = ["1","2","3","4"]
//["a_1","a_2","a_3","b_1",.....]
let arr3 = ["x","y","z"]
let arr4 = ["A","B","C"]
let arr = [arr1,arr2,arr3,arr4]
//arr.reduce(callback(pre,curr),init) pre是上一次的計算結果,curr當前元素 init是初始值
//如果設置了初始值,則第一次是拿初始值和第一個元素進行計算
//如果沒有設置初始值,則第一次是拿第一個元素和第二個元素進行計算
let res = arr.reduce((pre,cur)=>{
//pre = ["a","b","c"]
//cur = ["1","2","3"]
let result = [];//作爲每次計算的結果,作爲下一次結算的pre
pre.forEach(e1=>{
cur.forEach(e2=>{
result.push(e1+"_"+e2)
})
})
return result;
})
console.log(res)*/
//模擬真實數據
let skuProperties = [
{
"specName": "膚色",
"options": ["黑色", "黃色"]
},
{
"specName": "年齡",
"options": ["蘿莉", "御姐"]
},{
"specName": "體型",
"options": ["腿長1米8", "身高1米5"]
}]
let res = skuProperties.reduce((pre,cur)=>{
let result = [];
pre.forEach(e1=>{ // e1 {}
//cur {"specName":"膚色",options:["黑色","黃色"]}
//sku_index 位置 索引值 0_0_0
e1.sku_index = (e1.sku_index||'')+"_"; // e1 = {sku_index:'_'}
for(let i=0;i<cur.options.length;i++){
let e2 = cur.options[i]; //["黑色","黃色"]
let temp = {}
Object.assign(temp,e1);
temp[cur.specName] = e2;
temp.sku_index += i;//temp = {"膚色":"黑色",sku_index:'_0'}
result.push(temp);
}
})
return result;
},[{}])
//添加價格
res.forEach(e1=>{
e1.price = 0;
e1.availableStock = 0;
e1.sku_index = e1.sku_index.substring(1);
})
console.log(res)
/*let init = [{sku_index:_}]
let zero = [
{"膚色":"黑色",sku_index:_0},
{"膚色":"黃色",sku_index:1}
]
let first = [
{"膚色":"黑色","年齡":"蘿莉",sku_index:_0_0},
{"膚色":"黑色","年齡":"御姐"},
{"膚色":"黃色","年齡":"蘿莉"},
{"膚色":"黃色","年齡":"御姐"}
]*/
</script>
</body>
</html>
通過F12控制檯查看