Question

我正在从当前呈现为服务器端的表单构建对象。我收集下面图片中显示的所有复选框，我试图按照每个步骤（1,2,3等）下的所有复选框是基于属性parentNode的单个对象的方式对它们进行排序

目前document.querySelectorAll('.checkboxes')以下列格式提取所有复选框。

var newObj = [
    {
      name: 'one',
      parentNode: {
        id: 'stepOne'
      }
    },
    {
      name: 'two',
      parentNode: {
        id: 'stepTwo'
      }
    },
    {
      name: 'three',
      parentNode: {
        id: 'stepOne'
      }
    },
]

新对象应为：

var newObj = {
    stepOne: [
      {
        name: 'one',
        parentNode: {
          id: 'stepOne'
        }
      },
      {
        name: 'three',
        parentNode: {
          id: 'stepOne'
        }
      },
    ],
    stepTwo: [
      {
        name: 'two',
        parentNode: {
          id: 'stepTwo'
        }
      },
    ]
}

通常我会做这样的事情：

let stepOne = function(step) {
  return step.parentNode.getAttribute('id') === 'stepOne';
}

let stepTwo = function(step) {
  return step.parentNode.getAttribute('id') === 'stepTwo';
}

let allTheStepOnes = fetchCheckBoxes.filter(stepOne);

但是过滤器对dom对象不起作用，这似乎效率也很低。

Answer 1

这样做的正确方法是forEach循环并使用这样的关联数组：

let newObject = {};

originalObject.forEach((item)=>{
    let step = item.parentNode.id
    if (newObj[step] === undefined) {
        newObj[step] = []
    }
    newObj[step].push(item)
})

Answer 2

此功能应该可以解决问题

function mapObj(obj) {
    var result = {};
    for(var i = 0; i < obj.length; i++) {
        var e = obj[i];
        result[e.parentNode.id] = result[e.parentNode.id] || [];
        result[e.parentNode.id].push(e);
    }
    return result;
}

Answer 3

使用reduce我们可以将当前数组减少到新结构中。

return newObj.reduce(function(acc, item) {

如果之前已定义acc[item.parentNode.id]，请检索此项。否则将其设置为空数组：

acc[item.parentNode.id] = (acc[item.parentNode.id] || [])

将item添加到数组中，然后将其返回：

acc[item.parentNode.id].push(item);
return acc;

我们将累加器设置为{}以开始。

显示工作情况的摘录。

var newObj = [{
  name: 'one',
  parentNode: {
    id: 'stepOne'
  }
}, {
  name: 'two',
  parentNode: {
    id: 'stepTwo'
  }
}, {
  name: 'three',
  parentNode: {
    id: 'stepOne'
  }
}, ];

var newOrder = function(prevList) {
        return prevList.reduce(function(acc, item) {
            acc[item.parentNode.id] = (acc[item.parentNode.id] || [])
            acc[item.parentNode.id].push(item);
            return acc;
        }, {});
    }
    
console.log(newOrder(newObj));

过滤输入标签的dom对象

3 个答案: