Javascript / AngularJS：如何比较数组中对象元素的相等性？

Question

我正在为每种独特的颜色创建一堆复选框。 但是，我遇到了一个重复出现颜色的错误。

我使用JSON生成此颜色数组。 我遍历所有产品，如果$scope.colors变量中不存在颜色，则将颜色对象压入。

但是，看起来我对相同颜色对象的比较失败了。 它们的值相同，例如el1 = {name: 'Red, id: 1}和el2 = {name: 'Red, id: 1} ，但似乎使用Array.indexOf(color)总是返回-1 。

在我的角度控制器中，我有：

$scope.colors = []; // empty array

$scope.setFilterChoices = function(data) {
  for (var i = 0; i < data.length; i++) {
    var product = data[i];



    for (var j = 0; j < product.products_colors.length; j++) {
      var product_color =  product.products_colors[j];

      if ($scope.colors.indexOf(product_color.color) == -1) { // always pushes the color even if the color is the same
        $scope.colors.push(product_color.color);
      }
    }
  }
}

有没有其他方法可以查看数组中是否存在对象？

Answer 1

您可以使用angular.equals（obj1，obj2）进行对象的深层比较。

尝试类似：

// do your data munging:
$scope.colors = [];
for (var i = 0,
         dataLength = data.length; i < dataLength; i++) {
    var product = data[i];

    for (var j = 0,
             colorsLength = product.products_colors.length; j < colorsLength; j++) {
      var product_color =  product.products_colors[j];

      // loop through your color array and check objects. 
      for(var k = 0,
          scopeColorsLength = $scope.colors.length; k < scopeColorsLength; k++){
          if (angular.equals(product_color.color, $scope.colors[k])) {
            $scope.colors.push(product_color.color);
          }
       }
    }
}

Answer 2

您不仅可以比较这样的对象，还需要比较对象的特定属性：

$scope.colors = []; // empty array

$scope.setFilterChoices = function(data) {
  for (var i = 0; i < data.length; i++) {
    var product = data[i];

    for (var j = 0; j < product.products_colors.length; j++) {
      var product_color = product.products_colors[j];

      var contains = false;

      for (var k = 0; k < $scope.colors.length; k++) {
          if (angular.equals($scope.colors[k], product_color.color)) {
            contains = true;
            break;
          }
        }
      }

      if (!contains) {
        $scope.colors.push(product_color.color);
      }
    }
  }
}