javascript - 操作对象数组时 For 循环未按预期工作

Question

我有一个正在编辑的对象数组。

此数组因用户选择而异，但通常如下所示:

[{boxID:0,name:"苹果面包",weight:2}]

此数组声明为 $scope.boxes

在较高的层面上，该数组源自先前调用的函数，其要点是将元素(例如苹果面包)按重量装入盒子中，没有盒子的总重量超过(在本例中) 6磅。因此，该数组填充了代表该元素、其重量以及其所装入的 boxID(0 是第一个盒子)的对象。

我的问题是，我插入了让用户编辑盒子的功能，以便他们可以随意移动东西并自定义他们的盒子，同时仍然遵守总重量限制。

最后，我有一个功能，利用拖放功能让用户编辑和移动框周围的项目。完成后，我需要验证哪些项目属于哪里。但我什至无法让 ondragstart 函数正常工作。这个想法是 ondragstart 从数组中删除有问题的项目，然后通过以下方式重新计算所有框:

$scope.boxyboxybox2 = function() {
   $scope.displayBoxes = [];
   for (var i = 0; i < $scope.boxes.length; i++) {
     if (i == 0) {
       $scope.displayBoxes.push({
         box: $scope.boxes[i].boxID,
         contents: [{
           name: $scope.boxes[i].name,
           weight: $scope.boxes[i].weight
         }]
       });
       console.log($scope.displayBoxes);
       continue;
     }
     for (var z = 0; z < $scope.displayBoxes.length; z++) {
       if ($scope.boxes[i].boxID == $scope.displayBoxes[z].box) {
         $scope.displayBoxes[z].contents.push({
           name: $scope.boxes[i].name,
           weight: $scope.boxes[i].weight
         })
         console.log($scope.boxes[i].boxID, $scope.displayBoxes[z].box, $scope.displayBoxes);
       } else {
         $scope.displayBoxes.push({
           box: $scope.boxes[i].boxID,
           contents: [{
             name: $scope.boxes[i].name,
             weight: $scope.boxes[i].weight
           }]
         });
         console.log($scope.displayBoxes);
         break;
       }
     }
   }
   console.log($scope.displayBoxes);
 }

上面的方法不起作用，我没有正确利用 breaks 或其他东西，因为它的变体要么得到无限循环，要么我有一个对象数组(在 displayBoxes 这是返回到 DOM 的内容)，其中我有重复项，就像我有多个 Box 3 实例一样，没有明显的原因。

很难弄清楚这一点。如果有必要，我可以做一个笨蛋，但我希望这只是一个明显的小疏忽，因为我非常接近我的预期结果。

编辑:按要求 Plunker:https://plnkr.co/edit/Bq6rgeOx26QTTu8d7AXh?p=preview

Answer 1

答案是将 z 硬编码为小于 displayBoxes 数组的长度。

for (var z = $scope.displayBoxes.length-1; z < $scope.displayBoxes.length; z++) {

这使得 break; 能够有效，同时保持所需的功能。