Javascript 循环对象并从数组创建缺失的对象

Question

我有一个从数据库加载的数据对象。用户可以选择页面上的选项，对于初始对象中不存在的每个选项，我需要创建它们。

我为我在这里尝试的内容编写了一些伪代码，但它会导致内存问题并崩溃。

这里的目标是迭代每个 task > Roles 数组，并检查是否缺少需要创建的对象。需要创建的对象来自selectedRoles。

期望的结果:

在第一个任务中，它应该创建 3 个 Angular 色(当前为空)。在第二个任务中，它将创建 Angular 色 1 和 3，因为 id 为 2 的 Angular 色已经存在。

var tasks = [{
  "User": {
    "FirstName": "Joe",
    "LastName": "Dirt",
    "selected": false,
    "marked": false
  },
  "Tool": {
    "id": 31,
    "text": "Admin",
    "ToolID": "31",
    "ToolName": "Admin",
    "ToolSuite": "Enterprise Product"
  },
  "Roles": []
}, {
  "User": {
    "FirstName": "Bart",
    "LastName": "Simpson",
    "selected": false,
    "marked": false
  },
  "Tool": {
    "id": 35,
    "text": "Wordpress",
    "ToolID": "35",
    "ToolName": "Wordpress",
    "ToolSuite": "Enterprise Product"
  },
  "Roles": [{
    RoleName: 'Role 2',
    Role: 2,
    RoleID: 2
  }]
}];

// New selected roles from list
var selectedRoles = [1, 2, 3];

////////////////////////////////////////////////////////////////////////

/* 
  Loop over the configured tasks and
  if there is not an existing role
  matching a role id from "SelectedRoles",
  create a new role within that task.
*/

// Loop over the tasks
tasks.forEach((task) => {
    // If we have roles, loop over them
  if (task.Roles.length) {
    for (let i = 0; i < task.Roles.length; i++) {
            // If this roleID does not exist in our selectedRoles, create the task
      if(selectedRoles.indexOf(task.Roles[i].RoleID) >= 0){
        // Create this role and add it to our task
        task.Roles.push(createRole('Role ' + task.Roles[i].RoleID, task.Roles[i].RoleID, task.Roles[i].RoleID));
      }
    }
  }
});

console.log(tasks)

function createRole(RoleName, RoleID, Role){
    return {
    RoleName: RoleName,
    RoleID: RoleID,
    Role: Role
  }
}

有什么关于更干净(和有效)的方法来处理这个问题的想法吗？

Answer 1

var tasks = [{
  "User": {
    "FirstName": "Joe",
    "LastName": "Dirt",
    "selected": false,
    "marked": false
  },
  "Tool": {
    "id": 31,
    "text": "Admin",
    "ToolID": "31",
    "ToolName": "Admin",
    "ToolSuite": "Enterprise Product"
  },
  "Roles": []
}, {
  "User": {
    "FirstName": "Bart",
    "LastName": "Simpson",
    "selected": false,
    "marked": false
  },
  "Tool": {
    "id": 35,
    "text": "Wordpress",
    "ToolID": "35",
    "ToolName": "Wordpress",
    "ToolSuite": "Enterprise Product"
  },
  "Roles": [{
    RoleName: 'Role 2',
    Role: 2,
    RoleID: 2
  }]
}];

// New selected roles from list
var selectedRoles = [1, 2, 3];

////////////////////////////////////////////////////////////////////////

/* 
  Loop over the configured tasks and
  if there is not an existing role
  matching a role id from "SelectedRoles",
  create a new role within that task.
*/
tasks.forEach((task) => {
    if(task.Roles.length == 0){
      for(var i = 0; i < selectedRoles.length; i++){
        task.Roles.push(createRole('Role ' + selectedRoles[i], selectedRoles[i], selectedRoles[i]));
      }
    }
    else{
      var concatRoleArr = [];
      var roleIdArr = [];
      for(var i = 0; i < task.Roles.length; i++){
         roleIdArr.push(task.Roles[i].RoleID);
      }
      for(var i = 0; i < selectedRoles.length; i++){
        var roleIndex = roleIdArr.indexOf(selectedRoles[i]);
        if(roleIndex < 0){
          concatRoleArr.push(createRole('Role ' + selectedRoles[i], selectedRoles[i], selectedRoles[i]));
        }
      }
      task.Roles = task.Roles.concat(concatRoleArr);
    }
});

console.log(tasks);


function createRole(RoleName, RoleID, Role){
    return {
    RoleName: RoleName,
    RoleID: RoleID,
    Role: Role
  }
}

这是您更新的代码以及您想要的内容。我们改变了你的循环。我们首先检查是否有任何 Angular 色。如果没有，我们循环遍历 selectedRoles 并将每个 Angular 色添加到 Angular 色中。

如果任务中存在 Angular 色，我们创建一个新数组(concatRoleArr)，将所有roleId收集到一个新数组中，然后再次循环selectedRoles。如果现有 Angular 色 id 数组不包含当前查看的 selectedRole(indexOf 为 -1)，则将其添加到新的 concatRoleArr，否则继续。完成后，将 task.Roles 数组与 concatRoleArr 连接起来。

您遇到了内存问题，因为您的原始代码存在无限循环。您将 Angular 色添加到 task.Roles 中，因此循环会继续进行，因为当您不断向其中添加更多 Angular 色时，for 循环永远不会到达 task.Roles 的结尾。它不断添加更多内容，因为如果数组中存在，则检查 >= 0 的 indexOf 将为 true，您的 Angular 色总是这样做，因为无论如何您只是循环遍历现有 Angular 色。检查 < 0 检查它是否不存在，因为它将返回 -1。