React JS concat数组并转换为新的二维数组并按二维数组数据和排序

Posted

技术标签:

【中文标题】React JS concat数组并转换为新的二维数组并按二维数组数据和排序【英文标题】:React JS concate array and transform into new two dimension array and sort by the two dimension array data sum 【发布时间】:2019-07-15 07:35:04 【问题描述】:

我正在开发一个反应原生应用程序 假设我有这些数组列表:

let soldList1 = [
    "itemCode":"X001" , "soldRate":0.0789,
    "itemCode":"5555" , "soldRate":0.0543,
    "itemCode":"3141" , "soldRate":0.0112,
    "itemCode":"Mix-001" , "soldRate":0.01,
    "itemCode":"7689-L" , "soldRate":0.005,
    "itemCode":"1111" , "soldRate":0.003
]

let soldList2 = [
    "itemCode":"3141" , "soldRate":0.0712,    
    "itemCode":"7689-L" , "soldRate":0.03,
    "itemCode":"5555" , "soldRate":0.0234,    
    "itemCode":"1111" , "soldRate":0.011,
    "itemCode":"X001" , "soldRate":0.008,
    "itemCode":"Mix-001" , "soldRate":0.004
]

let soldList3 = [
    "itemCode":"5555" , "soldRate":0.0339,   
    "itemCode":"X001" , "soldRate":0.0221,
    "itemCode":"3141" , "soldRate":0.0111,  
    "itemCode":"1111" , "soldRate":0.0089,
    "itemCode":"Mix-001" , "soldRate":0.0077,  
    "itemCode":"7689-L" , "soldRate":0.0032
]

let soldList4 =[
    "itemCode":"8888" , "soldRate":0.13,   
    "itemCode":"9999" , "soldRate":0.11,
    "itemCode":"3141" , "soldRate":0.08,  
    "itemCode":"1111" , "soldRate":0.07
]


let soldList5 =[
    "itemCode":"3141" , "soldRate":0.044,  
    "itemCode":"1111" , "soldRate":0.011,
    "itemCode":"8888" , "soldRate":0.0011,   
    "itemCode":"9999" , "soldRate":0.0001
]

let soldList6 =[
    "itemCode":"Mix-001" , "soldRate":0.5678,  
    "itemCode":"7689-L" , "soldRate":0.546
    "itemCode":"8888" , "soldRate":0.323,   
    "itemCode":"9999" , "soldRate":0.0032,
    "itemCode":"Mix-001" , "soldRate":0.0022,  
    "itemCode":"UV-007" , "soldRate":0.0012
    "itemCode":"TT-08" , "soldRate":0.0011,  
    "itemCode":"PP-03" , "soldRate":0.0009
]

如您所见,一些列表获得了其他列表没有的元素,并且每个列表项顺序为desc order by 'soldRate',每个列表长度也可能不同。

所以目标是连接这些数组列表和处理以构建一个新的数组列表,如下所示:

let finalAllConcateAndSortedByDataSumList = [
    "itemCode":"Mix-001" , "data": [0.01, 0.004, 0.0077, 0, 0, 0.5678], "dataSum":0.5895,    
    "itemCode":"7689-L" , "data": [0.005, 0.03, 0.0032, 0, 0, 0.546], "dataSum":0.5842,       
    "itemCode":"8888" , "data": [0, 0, 0, 0.13, 0.0011, 0.323], "dataSum":0.4541,            
    "itemCode":"3141" , "data": [0.0112, 0.0712, 0.0111, 0.08, 0.044, 0], "dataSum":0.2175,   
    "itemCode":"X001" , "data": [0.0789, 0.008, 0.0221, 0, 0, 0.0221], "dataSum":0.1311,   
    "itemCode":"9999" , "data": [0, 0, 0, 0.11, 0.0001, 0.0032], "dataSum":0.1133,           
    "itemCode":"5555" , "data": [0.0543, 0.0234, 0.0339, 0, 0, 0], "dataSum":0.1116,         
    "itemCode":"1111" , "data": [0.003, 0.011, 0.0089, 0.07, 0.011, 0], "dataSum":0.1039,     
    "itemCode":"UV-007" , "data": [0, 0, 0, 0, 0, 0.0012], "dataSum":0.0012,            
    "itemCode":"TT-08" , "data": [0, 0, 0, 0, 0, 0.0011], "dataSum":0.0011,                 
    "itemCode":"PP-03" , "data": [0, 0, 0, 0, 0, 0.0009], "dataSum":0.0009,             
]

如您所见,上面列表 1 2 3 4 5 6 中的所有'soldRate' 元素都已连接并生成新的数组列表'data' 属性,每个数据顺序的位置与上面完全相同original list 1 2 3 4 5 6....如果position中的元素值不存在于任何原始列表中,则它是'0'值

最终将 finalAllConcateAndSortedByDataSumList 中的每个对象,数据数组汇总到属性'dataSum'

那么新列表 finalAllConcateAndSortedByDataSumList 是desc order by dataSum

这是我个人尝试让它工作,但它不起作用......

let finalAllConcateAndSortedByDataSumList = soldList1.concat(soldList2)
.concat(soldList3)
.concat(soldList4)
.concat(soldList5)
.concat(soldList16).map((item) => 
    let newItem =  itemCode: item.itemCode, data: [item.soldRate], dataSum: Math.sum([item.soldRate])
    return newItem
).sort((item) =>  return item.dataSum)

所以在这里寻求帮助,代码示例真的很有帮助 谢谢

【问题讨论】:

【参考方案1】:

您可以首先提取数组中所有唯一的 itemCode 值,然后循环遍历它们,如果每个数组中都存在 itemCode,则将 soldRate0 添加到结果中。

let soldList1 = [
   itemCode: "X001", soldRate: 0.0789 ,
   itemCode: "5555", soldRate: 0.0543 ,
   itemCode: "3141", soldRate: 0.0112 ,
   itemCode: "Mix-001", soldRate: 0.01 ,
   itemCode: "7689-L", soldRate: 0.005 ,
   itemCode: "1111", soldRate: 0.003 
];

let soldList2 = [
   itemCode: "3141", soldRate: 0.0712 ,
   itemCode: "7689-L", soldRate: 0.03 ,
   itemCode: "5555", soldRate: 0.0234 ,
   itemCode: "1111", soldRate: 0.011 ,
   itemCode: "X001", soldRate: 0.008 ,
   itemCode: "Mix-001", soldRate: 0.004 
];

let soldList3 = [
   itemCode: "5555", soldRate: 0.0339 ,
   itemCode: "X001", soldRate: 0.0221 ,
   itemCode: "3141", soldRate: 0.0111 ,
   itemCode: "1111", soldRate: 0.0089 ,
   itemCode: "Mix-001", soldRate: 0.0077 ,
   itemCode: "7689-L", soldRate: 0.0032 
];

let soldList4 = [
   itemCode: "8888", soldRate: 0.13 ,
   itemCode: "9999", soldRate: 0.11 ,
   itemCode: "3141", soldRate: 0.08 ,
   itemCode: "1111", soldRate: 0.07 
];

let soldList5 = [
   itemCode: "3141", soldRate: 0.044 ,
   itemCode: "1111", soldRate: 0.011 ,
   itemCode: "8888", soldRate: 0.0011 ,
   itemCode: "9999", soldRate: 0.0001 
];

let soldList6 = [
   itemCode: "Mix-001", soldRate: 0.5678 ,
   itemCode: "7689-L", soldRate: 0.546 ,
   itemCode: "8888", soldRate: 0.323 ,
   itemCode: "9999", soldRate: 0.0032 ,
   itemCode: "Mix-001", soldRate: 0.0022 ,
   itemCode: "UV-007", soldRate: 0.0012 ,
   itemCode: "TT-08", soldRate: 0.0011 ,
   itemCode: "PP-03", soldRate: 0.0009 
];

function sumSoldRates(...arrs) 
  let itemCodes = [].concat(...arrs).reduce((acc, obj) => 
    if (!acc.includes(obj.itemCode)) 
      acc.push(obj.itemCode);
    
    return acc;
  , []);

  let result = itemCodes.map(code => 
    let obj =  itemCode: code, data: [], dataSum: 0 ;

    arrs.forEach(arr => 
      let item = arr.find(el => el.itemCode === code);

      if (item) 
        obj.data.push(item.soldRate);
        obj.dataSum += item.soldRate;
       else 
        obj.data.push(0);
      
    );

    return obj;
  );

  result.sort((a, b) => b.dataSum - a.dataSum);

  return result;


let result = sumSoldRates(
  soldList1,
  soldList2,
  soldList3,
  soldList4,
  soldList5,
  soldList6
);
console.log(result);

【讨论】:

【参考方案2】:

我将您的流程分解为多个步骤,因为它可以让您更清楚地了解您在做什么(并且更易于调试)。代码可能不像其他答案那样紧凑或“优雅”,但我相信这样更容易理解。

这是一个code sandbox,它显示了这一点(参见控制台输出)。

const getItemCodes = (list) => 
  return list.map(item => item.itemCode)


const getDataValue = (list, itemCode) => 
  let index = list.findIndex(item => item.itemCode === itemCode)
  return (index === -1 ? 0 : list[index].soldRate)


const sumArray = (array) => 
  const sum = array.reduce((prev, curr) => 
    return (parseFloat(prev) + parseFloat(curr))
  )
  return sum.toFixed(4)


const sortByDataSum = (array) => 
  array.sort((a, b) => 
    if (a.dataSum > b.dataSum) 
      return -1
     else if (a.dataSum < b.dataSum) 
      return 1
     else 
      return 0
    
  )
  return array


// concat all item codes together, which will result in duplicates
let allItemCodes = [...getItemCodes(soldList1),
                    ...getItemCodes(soldList2),
                    ...getItemCodes(soldList3),
                    ...getItemCodes(soldList4),
                    ...getItemCodes(soldList5),
                    ...getItemCodes(soldList6)]

// remove duplicate codes
allItemCodes = [...new Set(allItemCodes)] 

let finalList = []

allItemCodes.forEach((code) => 
  let item = 
    'itemCode': code,
    'data': [getDataValue(soldList1, code),
             getDataValue(soldList2, code),
             getDataValue(soldList3, code),
             getDataValue(soldList4, code),
             getDataValue(soldList5, code),
             getDataValue(soldList6, code)]
  
  item.dataSum = sumArray(item.data)
  finalList.push(item)
)

sortByDataSum(finalList)
console.log(finalList)

【讨论】:

【参考方案3】:

我会在字典中使用数组的组合:

let result =  
soldList1.concat(soldList2)
.concat(soldList3)
.concat(soldList4)
.concat(soldList5)
.concat(soldList6)
.forEach(item => 
  if(result[item.itemCode]) 
    result[item.itemCode].data.push(item.soldRate);
    result[item.itemCode].dataSum += item.soldRate;
   else 
    result[item.itemCode] = data: [item.soldRate], itemCode: item.itemCode, dataSum: item.soldRate;
  
);
let finalAllConcateAndSortedByDataSumList = Object.values(result).sort((item) =>  return item.dataSum)

console.log(finalAllConcateAndSortedByDataSumList);

【讨论】:

以上是关于React JS concat数组并转换为新的二维数组并按二维数组数据和排序的主要内容,如果未能解决你的问题,请参考以下文章

将二维数组转换成一维数组(基于reduce)

js资料分享

JS数组的方法

二维数组转换算法,最好是js,或者其他语言也行。

JS 数组的 push 与 concat 区别

php二维数组,相同值求和,并返回新的数组