JS二维数组中数据的提取-用矩阵的思维解决复杂的业务问题

首先先看一下业务场景

还是以sku为例，我们分析下这个sku，这些数据，假如说用json处理我们应该是这样的

[
{"title":"xxxx",
"spec":[
{
"id":"1",
"type":"网络类型",
"value":"全网通"
},
{
"id":"2",
"type":"机身颜色",
"value":"鲸月蓝"
}.
{
"id":"3",
"type":"套餐类型",
"value":"官方标配"
}.
{
"id":"4",
"type":"存储容量",
"value":"6+128G"
}]
},
{"title":"xxxx",
"spec":[
{
"id":"1",
"type":"网络类型",
"value":"全网通"
},
{
"id":"2",
"type":"机身颜色",
"value":"全网通"
}.
{
"id":"3",
"type":"网络类型",
"value":"全网通"
}.
{
"id":"4",
"type":"网络类型",
"value":"全网通"
}]
}
....
]

大概就是这样的格式。我就不一一列举了，首先在业务层面来讲，我们得先提取关键部分，我在这写一段伪代码去勾勒一下

//定义一个矩阵类
//定义一个Sku数据处理器 - - 不在项目中就这么叫吧。。。
class SkuListDataProcessor{
list
//上述数据传入这个类中
constructor(list){
this.list=list
}
function _createMatrix(){
	//我们在上述数据格式中看到了数字里面包含了个spec,而spec内的数据正是我们想要提取出来的
	const m=[]
	list.foreach(el=>{
		//spec是个数组，将spec加入到m数组中，这样我们就封装出了一个二维数组
		m.push(el.spec);
	})
	//将简单处理好的数据传入下面封装的Matrix类中
		return new Matrix(m);
}
}

说到二维数组其实都比较绕，然而我们可以换种写法去写，抛开id等各种情况不看，我们就看value，因为value才是我们需要的值以及最终的结果。
这样子的话雏形就成了这样

	[
		[全网通,鲸月蓝，官方标配，6+128GB],
		[全网通,湖光绿,官方标配,6+256GB],
		[全网通,鲸月蓝,套餐1,6+256GB]
	]

这就像个矩阵了，行和列的关系，我们假如做成图上的效果，肯定是少不了遍历的了接着上面的matrix封装类往下走,因为遍历到行和列，要两层遍历，达到可复用性的效果，我们可以将其封装成一个类

class Matrix{
	//注意,这里传入的是spec里面的对象列表，title什么的还在，并不是上面写的理想化雏形~~
	m
	//传入二维数组
	constructor(m){
	this.m=m
	}
	//获取列的长度
	get coloumNum()(
	return m.length
	)
	get rowNum(){
	//既然是二维数组，里面一层的长度都是一致的,所以去第一个行中的值进行处理
	return m[0].length
	}
	//遍历操作
	function:foreach(cb){
	//列循环
	for(int i=0;i<rowNum;i++){
		for(int j=0;j<columnNum;j++){
				const el=m[i][j];
				//回调函数
				cb(el,i,j);
			}
		}
	}
	
}

有的人会问了，回调i，j有什么用？
我们再看看理想化的模型长啥样

	[
		[全网通,鲸月蓝，官方标配，6+128GB],
		[全网通,湖光绿,官方标配,6+256GB],
		[全网通,鲸月蓝,套餐1,6+256GB]
	]

首先，当我们呈现给用户的时候，是一列一列的数据放在一个skutitle中
所以我们如何确定这个是不是一列呢，我们可以借助回调过来的数据，i，当初始化i为-1，当i更新时我们就知道，这个sku的title值要开始变了，因为列的序号发生改变了，这里品品~~

//在这里我用伪代码进行编写

class SkuListDataProcessor{
list
//上述数据传入这个类中
constructor(list){
this.list=list
}
function _createMatrix(){
	//我们在上述数据格式中看到了数字里面包含了个spec,而spec内的数据正是我们想要提取出来的
	const m=[]
	list.foreach(el=>{
		//spec是个数组，将spec加入到m数组中，这样我们就封装出了一个二维数组
		m.push(el.spec);
	})
	//将
	return new Matrix(m);
}
function _initMatrix(){
	const m=this._createMatrix();
	list=[]

	m.foreach((el,i,j)=>{
		int currentJ=-1;
		if(j!=currentJ){
			childList=[]
			//列换成当前值
			currentJ=j
			//假如数组换列
			list[currentJ]=childList
		}
			list[currentJ].push(el.value)
	})

}
}