在 Javascript 中创建和引用对象数组

Question

我正在尝试创建一个包含任务和子任务的通用待办事项列表。任何给定的待办事项列表都会有一个或多个任务，每个任务都会有一个或多个子任务。对于每个子任务，我都显示了显示任务和子任务的卡片，以及有关用户的其他一些相关信息。因此，任何给定列表的卡片数量等于子任务的数量，并且可以按任务分类。

对我来说棘手的部分是我需要能够引用这些卡片（因为我将进行 API 调用以从不同类型的列表中获取任务和子任务数据——顺便说一句，它们都是数组)，并且我不确定引用有效具有 2 个索引（任务和子任务）的内容的最佳方式。

我的想法一直集中在创建任务的 toDoList 数组：子任务对象 [{task 1, subtask 1}, {task 1, subtask 2}, {task 2, subtask 1), etc}] ——但是当我开始这样做时，我陷入了两个地方：

1. 在以编程方式创建键值对（我使用嵌套循环遍历任务和子任务）

2. 以后如何引用它们，因为我需要将这些 task:subtask 对与特定的 DOM 对象相关联，以执行隐藏它们等功能。

我有一些代码，但感觉离题太远了，所以甚至不包括在这里。基本上，我觉得有一个不到十几行代码的简单解决方案，一个比我立即看到的更好的程序员，我会很感激帮助。非常感谢！

Answer 1

不确定您对编写数据结构有多少控制权，但也许这样的事情会起作用。

这里的想法是给所有子任务一个 ID，然后通过一组子任务 ID 跟踪任务的子任务。

var tasks = [
  {name: 'clean apartment', subtasks: [1, 2, 3]},
  {name: 'do the dishes', subtasks: [6]},
  {name: 'eat lunch', subtasks: [4, 5]}
];

var subtasks = [
  {name: 'vaccuum', id: 1},
  {name: 'dust', id: 2},
  {name: 'wipe down', id: 3},
  {name: 'make sandwich', id: 4},
  {name: 'drink a beer', id: 5},
  {name: 'soak pans', id: 6}, 
];


var i, j, l = tasks.length;
for(i; i < l; i++) {
  var task = tasks[i],
      ll = task.subtasks.length;
  for(j=0; j < ll; j++) {
    // Now you know the parent task and all its subtasks
  }
}

此外，如果您不介意使用 underscore 之类的库的帮助，则可以相反的方式进行。这样你就给所有任务一个 ID，然后给子任务一个 task 字段，它将它们映射到一个任务。使用underscore's findWhere，您可以在遍历每个子任务时轻松查找任务。

var tasks = [
  {name: 'clean apartment', id: 1},
  {name: 'do the dishes', id: 2},
  {name: 'eat lunch', id: 3}
];

var subtasks = [
  {name: 'vaccuum', task: 1},
  {name: 'dust', task: 1},
  {name: 'wipe down', task: 1},
  {name: 'make sandwich', task: 3},
  {name: 'drink a beer', task: 2},
  {name: 'soak pans', task: 2}, 
];

for(var i = 0; i < subtasks.length; i++) {
  var subtask = subtasks[i],
      task = _.findWhere(tasks, {id: subtask.task})
  // Now you know the subtask and its task
}

从我帖子中的 cmets 中，我还创建了一个 fiddle 来举例说明创建子任务卡：http://jsfiddle.net/grammar/ynw0eb25/

Answer 2

这样的结构可以胜任这项工作吗？

[    
    {taskId: '1', 

     subtasks:[{subtaskId:'1', otherAttributes:'...'}, 
               {subtaskId:'2', otherAttributes:'...'},
                ...
              ]
     },
    {taskId: '2', 
     subtasks:[{subtaskId:'1', otherAttributes:'...'}, 
               ...
              ]
    }
    ....
]