操作对象数组时，For 循环无法按预期工作

Question

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

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

[{boxID:0,name:"Apple Bread",weight:2}]

这个数组被声明为$scope.boxes

在高层次上，这个数组是从之前调用的函数中派生出来的，其目的是将物品（例如 Apple Bread）按重量包装到盒子中，没有盒子的总重量超过（在这种情况下） 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; 在保持所需功能的同时有效。