在数组中移动对象（Javascript）答案

【问题标题】：Moving an object inside an array ( Javascript)在数组中移动对象（Javascript）
【发布时间】：2021-07-20 09:11:55
【问题描述】：

我有一个类似这样的对象数组

arr = [{"class":"section"},{"fieldGroup":[]},{"class":"col","name":"input"},{"class":"col","name":"dropdown"},{"class":"col","name":"date"},{"fieldGroup":[]},{"class":"col","name":"table"}]

现在我需要将带有"class":"col" 的对象移到其包含"fieldGroup" 的上一个对象中

所以我想要的输出应该是这样的

arr = [{"class":"section"},{"fieldGroup":[{"class":"col","name":"input"},{"class":"col","name":"dropdown"},{"class":"col","name":"date"}]},{"fieldGroup":[{"class":"col","name":"table"}]}]

这段代码我试过了

arr.forEach((item: any, index: number) => {
    if (item.class === "col") {
            arr[index - 1].fieldGroup.push(item);
            arr.splice(index, 1);
    }else {
        return arr;
    }
})

但收到错误提示 cannot read property push of undefined

有什么帮助吗？

【问题讨论】：

使用计算属性名称 arr[index - 1][fieldGroup] 。否则，您正在索引中寻找“fieldGroup”属性。
这能回答你的问题吗？ How to use a computed property name in ES5?
您是否 100% 确定带有 "class":"col" 的对象总是前面有带有 fieldGroup 属性的项目？您收到的错误似乎表明带有"class":"col" 的对象之前的对象没有fieldGroup 属性。您提供的示例数据似乎可以正常工作。您是否有不起作用的示例？
“我需要移动带有"class":"col" 的对象” - 为什么像{"class":"dropdown"} 这样的其他对象在没有class 的@ 时也会移动987654335@?
对不起@NickParsons 我已经编辑了代码

标签： javascript arrays object foreach

【解决方案1】：

您的问题是，当您使用.splice() 从数组中删除一个项目时，arr 中的所有项目都向下移动一个索引。例如，曾经位于索引3 的项目现在将位于索引2，曾经位于索引4 的项目现在将位于索引3 等等。您的.forEach() 循环没有考虑到这种转变，因此一旦您删除索引2 和.splice() 的项目，您的index 将更改为3 以进行下一次迭代，但实际上，您需要查看索引@987654332 @ 再次，因为您的数组项已向下移动索引。您可以通过使用标准的 for 循环来解决此问题，并在删除项目以再次查看索引时递减索引计数器：

const arr = [{"class":"section"},{"fieldGroup":[]},{"class":"col","name":"input"},{"class":"col","name":"dropdown"},{"class":"col","name":"date"},{"fieldGroup":[]},{"class":"col","name":"table"}];

for(let i = 0; i < arr.length; i++) {
  const item = arr[i];
  if (item.class === "col") {
    arr[i - 1].fieldGroup.push(item);
    arr.splice(i, 1);
    i--;
  }
}

console.log(arr);

【讨论】：

【解决方案2】：

试试看……

   var arr = [{"class":"section","name":"input"},{"fieldGroupName":"one","fieldGroup":[]},{"class":"col","name":"input"},{"class":"col","name":"dropdown"},{"class":"section","name":"input"},{"fieldGroupName":"one","fieldGroup":[]},{"class":"col","name":"date"}]
    
    arr.forEach((elm , index) =>{
     if(elm.class == 'col'){ 
         arr[1].fieldGroup.push(elm) 
         arr.splice(index, 1)
    }
})
    
    console.log(arr);

【讨论】：

【解决方案3】：

试试这个：

var arr = [{
    "class": "section"
  },
  {
    "fieldGroup": []
  },
  {
    "class": "col",
    "name": "input"
  },
  {
    "class": "dropdown"
  },
  {
    "class": "date"
  },
  {
    "fieldGroup": []
  },
  {
    "class": "col",
    "name": "table"
  }
];

let fieldGroupPosition;
let finalArr = [];
let lastGroupPosition = null;

arr.forEach((item, index) => {
  if (Array.isArray(item.fieldGroup)) {
    finalArr.push({
      fieldGroup: []
    });
    lastGroupPosition = finalArr.length - 1;
  } else {
    if (lastGroupPosition)
      finalArr[lastGroupPosition].fieldGroup.push(item);
    else
      finalArr.push(item);
  }
});

console.log(finalArr);

【讨论】：

【解决方案4】：

var a = [
  { class: "section" },
  { fieldGroup: [] },
  { class: "col", name: "input" },
  { class: "dropdown" },
  { class: "date" },
  { fieldGroup: [] },
  { class: "col", name: "table" },
];

var res = [];
var currFieldGroup = null;
for (var i in a) {
  if ("fieldGroup" in a[i]) {
    currFieldGroup = a[i];
    res.push(a[i]);
  } else if ("class" in a[i]) {
    if (currFieldGroup) {
      currFieldGroup.fieldGroup.push(a[i]);
    } else {
      res.push(a[i]);
    }
  }
}
console.log(res);

【讨论】：