"sku_list":[
{
"id":2,
"price":77.76,
"discount_price":null,
"online":true,
"img":"",
"title":"金属灰·七龙珠",
"spu_id":2,
"category_id":17,
"root_category_id":3,
"specs":[
{
"key_id":1,
"key":"颜色",
"value_id":45,
"value":"金属灰"
},
{
"key_id":3,
"key":"图案",
"value_id":9,
"value":"七龙珠"
},
{
"key_id":4,
"key":"尺码",
"value_id":14,
"value":"小号 S"
}
],
"code":"2$1-45#3-9#4-14",
"stock":5
},
{
"id":3,
"price":66,
"discount_price":59,
"online":true,
"img":"",
"title":"青芒色·灌篮高手",
"spu_id":2,
"category_id":17,
"root_category_id":3,
"specs":[
{
"key_id":1,
"key":"颜色",
"value_id":42,
"value":"青芒色"
},
{
"key_id":3,
"key":"图案",
"value_id":10,
"value":"灌篮高手"
},
{
"key_id":4,
"key":"尺码",
"value_id":15,
"value":"中号 M"
}
],
"code":"2$1-42#3-10#4-15",
"stock":999
},
{
"id":4,
"price":88,
"discount_price":null,
"online":true,
"img":"",
"title":"青芒色·圣斗士",
"spu_id":2,
"category_id":17,
"root_category_id":3,
"specs":[
{
"key_id":1,
"key":"颜色",
"value_id":42,
"value":"青芒色"
},
{
"key_id":3,
"key":"图案",
"value_id":11,
"value":"圣斗士"
},
{
"key_id":4,
"key":"尺码",
"value_id":16,
"value":"大号 L"
}
],
"code":"2$1-42#3-11#4-16",
"stock":8
},
{
"id":5,
"price":77,
"discount_price":59,
"online":true,
"img":"http://i1.sleeve.talelin.com/assets/09f32ac8-1af4-4424-b221-44b10bd0986e.png",
"title":"橘黄色·七龙珠",
"spu_id":2,
"category_id":17,
"root_category_id":3,
"specs":[
{
"key_id":1,
"key":"颜色",
"value_id":44,
"value":"橘黄色"
},
{
"key_id":3,
"key":"图案",
"value_id":9,
"value":"七龙珠"
},
{
"key_id":4,
"key":"尺码",
"value_id":14,
"value":"小号 S"
}
],
"code":"2$1-44#3-9#4-14",
"stock":7
}
],
上面的是一段从数据库中获取到的一组SKU的数据展示;
数据库中的SKU都是不同规格名的不同规格值选定的可购买的单品,这些SKU的规格值提取出来排列的情况(如下图所示)
image.png
而需要在前端展示的形式是同一种规格值横向排列,并且需要将重复值去除掉;
image.png
这时候能实现这种情况的比较简单的方式就是可以使用矩阵的思想,将它当作一个矩阵然后向右旋转90度进行转置,并将重复项进行去重即可获得我们想要的效果;
具体做法就是需要创建一个Matrix工具类,定义一个m变量,再定义一个构造函数将一个二维数组(矩阵就可以看作为是一个二维数组)作为参数传入到构造函数中,这样外界在新建一个Matrix矩阵对象的时候可以传入一个二维数组作为参数,并且可以通过这个矩阵对象调用Matrix工具类下的相关方法去对矩阵进行一系列操作;
class Matrix{
m
constructor(martix){
this.m = martix
}
export{
Matrix
}
现在的主要任务是对矩阵进行转置操作,转置操作需要对矩阵也就是二维数组进行遍历,遍历二维数组需要进行双重for循环,for循环需要知道数组的行列数;所以在Matrix工具类下需要新增两个获取行列数的方法;
get rowsNum(){
return this.m.length
}
get colsNum(){
return this.m[0].length
}
接着就可以书写将矩阵转置的方法了,这个方法的内部就是二维数组进行遍历的双重for循环,而矩阵转置的实质就是行列号进行互换;
transpose(){
const desArr = []
for (let j = 0; j < this.colsNum; j++) {
desArr[j] = [];
for (let i = 0; i < this.rowsNum; i++) {
desArr[j][i] = this.m[i][j];
}
}
return desArr
}
具体的矩阵的打印的样式是这种形式;
原矩阵:
[
[1,2,3],
[4,5,6],
[7,8,9]
]
转置后的矩阵:
[
[1,4,7],
[2,5,8],
[3,6,9]
]
image.png
这样就可以将同一规格名下的不同规格值放在同一行中;
至于去重只需要在创建相关规格的时候进行过滤即可,可以使用some函数;