Question

0:{region: "1", id: "1P1", P1: "7", quantity: 12, multiSum: 84, …}
1:{region: "1", id: "1P2", P2: "7", quantity: 25, multiSum: 175, …}
2:{region: "1", id: "1P3", P3: "7", quantity: 44, multiSum: 308, …}
3:{region: "1", id: "1P4", P4: "7", quantity: 66, multiSum: 462, …}
4:{region: "1", id: "1P5", P5: "7", quantity: 99, multiSum: 693, …}
5:{region: "1", id: "1P6", P6: "7", quantity: 9, multiSum: 63, …}
6:{region: "3", id: "3P1", P1: "8", quantity: 102, multiSum: 816, …}
7:{region: "3", id: "3P2", P2: "8", quantity: 212, multiSum: 1696, …}
8:{region: "3", id: "3P3", P3: "7", quantity: 244, multiSum: 1708, …}
9:{region: "3", id: "3P4", P4: "6", quantity: 964, multiSum: 5784, …}
10:{region: "3", id: "3P5", P5: "4", quantity: 894, multiSum: 3576, …}
11:{region: "3", id: "3P6", P6: "1", quantity: 904, multiSum: 904, …}

嘿，我在构造这些数据时遇到了麻烦。我想做的是遍历数据，并创建一个对象[区域]，并包含属于该区域的所有数据。

可视化：

    ["1": {P1: 7, P2: 7: P3: 7,..., quantity1: 12, quantity2: 25,...},
"3": {P1: 8, P2: 8: P3: 7,..., quantity1: 102, quantity2: 212,...}]

这是来自userInputs的数据，因此是重复的。我将不胜感激。

谢谢！

Answer 1

一种替代方法是使用函数<article> <ul id="list" style="list-style-type:none"> <li><a href="#Tiger" onclick="myFnc('G. cuvier')">Tiger</a></li> <li><a href="#Hammerhead" onclick="myFnc('S. mokarran')">Hammerhead</a></li> <li><a href="#Bull" onclick="myFnc('C. leucas')">Bull</a></li> <li><a href="#Great White" onclick="myFnc('C. carcharias')">Great White</a></li> <li><a href="#Mako" onclick="myFnc('I. oxyrinchus')">Mako</a></li> <li><a href="#Greenland" onclick="myFnc('S. microcephalus')">Greenland</a></li> <li><a href="#Whale" onclick="myFnc('R. typus')">Whale</a></li> <li><a href="#Thresher" onclick="myFnc('A. vulpinus')">Thresher</a></li> <li><a href="#Oceanic" onclick="myFnc('C. longimanus')">Oceanic WhiteTip</a></li> <li><a href="#Goblin" onclick="myFnc('M. owstoni')">Goblin</a></li> //if the user entered Hello I want the new list to look like this //<li><a href="#Hello" onclick="myFnc('Hello')">Hello</a></li> </ul> </article> <input type="text" id="inputName" /> <button id="btnName">Click me!</button>对区域进行分组。

此方法为每个区域增加一个reduce和quatity，并将其余的键分配给分组的区域。

最后，此方法将删除包含当前计数multiSum和counts的助手属性quantity。

由于multiSum和quantity属性的影响，该方法有些硬编码，但是，是以后对其进行改进的一个很好的开始。

multiSum

let arr = [{region: "1", id: "1P1", P1: "7", quantity: 12, multiSum: 84},{region: "1", id: "1P2", P2: "7", quantity: 25, multiSum: 175},{region: "1", id: "1P3", P3: "7", quantity: 44, multiSum: 308},{region: "1", id: "1P4", P4: "7", quantity: 66, multiSum: 462},{region: "1", id: "1P5", P5: "7", quantity: 99, multiSum: 693},{region: "1", id: "1P6", P6: "7", quantity: 9, multiSum: 63},{region: "3", id: "3P1", P1: "8", quantity: 102, multiSum: 816},{region: "3", id: "3P2", P2: "8", quantity: 212, multiSum: 1696},{region: "3", id: "3P3", P3: "7", quantity: 244, multiSum: 1708},{region: "3", id: "3P4", P4: "6", quantity: 964, multiSum: 5784},{region: "3", id: "3P5", P5: "4", quantity: 894, multiSum: 3576},{region: "3", id: "3P6", P6: "1", quantity: 904, multiSum: 904}],
    knownKeys = ['region', 'id', 'multiSum', 'quantity'],
    result;
    
Object.values(result = arr.reduce((a, c) => {
  if (!a[c.region]) a[c.region] = {counts: {multiSum: 0, quantity: 0}};
  
  let counts = a[c.region].counts;    
  Object.assign(a[c.region], {[`quantity${counts.quantity += 1}`]: c.quantity, [`multiSum${counts.multiSum += 1}`]: c.multiSum});    
    
  Object.keys(c).forEach(k => {
    if (!knownKeys.includes(k)) Object.assign(a[c.region], {[k]: c[k]});
  });
  
  return a;
}, {})).forEach(v => delete v.counts);

console.log(result);

Answer 2

您可以将其构造为对象数组，然后通过索引或使用for..of对其进行迭代：

let arr = [
  {region: "1", id: "1P1", P1: "7", quantity: 12, multiSum: 84},
  {region: "1", id: "1P2", P2: "7", quantity: 25, multiSum: 175},
  {region: "1", id: "1P3", P3: "7", quantity: 44, multiSum: 308},
  {region: "1", id: "1P4", P4: "7", quantity: 66, multiSum: 462},
  {region: "1", id: "1P5", P5: "7", quantity: 99, multiSum: 693},
  {region: "1", id: "1P6", P6: "7", quantity: 9, multiSum: 63}
]

for (obj of arr) {
  console.log(obj);
  // do whatever data manipulation you need based on obj.region here
}

或者您可以将其构造为一个对象，然后通过对象键对其进行迭代：

let obj = {
  0: {region: "1", id: "1P1", P1: "7", quantity: 12, multiSum: 84},
  1: {region: "1", id: "1P2", P2: "7", quantity: 25, multiSum: 175},
  2: {region: "1", id: "1P3", P3: "7", quantity: 44, multiSum: 308},
  3: {region: "1", id: "1P4", P4: "7", quantity: 66, multiSum: 462},
  4: {region: "1", id: "1P5", P5: "7", quantity: 99, multiSum: 693},
  5: {region: "1", id: "1P6", P6: "7", quantity: 9, multiSum: 63}
}

for (key in obj) {
  console.log(obj[key])
  // do whatever data manipulation you need based on obj[key].region here
}

哪个更好取决于数据以及您打算如何处理。如果键是有意义的，并且您需要能够通过键访问特定的单个元素，那么对象可能更好。如果键只是您在此显示的顺序编号，并且没有其他意义，那么使用普通数组可能会更好。

（有很多其他遍历数组或对象键的方法；这些只是两个示例。）

如何构造这些数据？ JS

2 个答案: