AngularJS:Array.prototype.find() 在 Chrome 中不起作用

Question

我遇到一个问题，我的 Angular 代码可以在 Firefox 中运行，但不能在 Chrome 中运行。

浏览器控制台打印如下:

TypeError: undefined is not a function
    at setSelectedColor (http://localhost:3000/assets/products/controllers/mens_detail_controller.js?body=1:24:54)

这是我的 Controller (请注意发生故障的 console.log):

app.controller('MensDetailCtrl', ['$scope', '$resource', '$controller', 'Product', function($scope, $resource, $controller, Product) {
  $controller('ProductsDetailCtrl', {$scope: $scope});

  $scope.init = function(id, locale, selected_color_id)
  {
    $scope.product = Product.get({productId: id, locale: locale}, function(data) {
      var unsorted_products_colors = data.products_colors.filter(function(product_color) {
        return product_color.mens == true;
      });

      $scope.products_colors = unsorted_products_colors.sort(function(a, b) {
        return a.mens_sort_order > b.mens_sort_order;
      });

      setSelectedColor(selected_color_id);
    });

  }

  var setSelectedColor = function(selected_color_id) {
    console.log("ffff"); //prints
    if (selected_color_id) {
      console.log("eeeffff"); //prints
      // the error seems to happen at this next line, which is line 24:
      $scope.selected_color = $scope.products_colors.find(function(el) {
        return el.id == selected_color_id;
      });
    } else {
      console.log("hhffff");
      $scope.selected_color = $scope.products_colors[0];
    }
    console.log("ffffzzz"); // does NOT print

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }


}]);

为什么它在 Firefox 上工作得很好，但在 Chrome 上却不行？我该如何解决这个问题？

==更新== 即使我在崩溃之前打印出 $scope.products_colors 的值，它也会在我的浏览器控制台中打印出一个对象:

ffff
eeeffff 
[Object]0: Object$$hashKey: "004"color: Objectcolor_id: 32created_at: "2014-08-12T19:47:32.000Z"id: 91mens: truemens_sort_order: 0product_id: 15product_images: Array[2]updated_at: "2014-08-12T19:47:32.000Z"variants: Array[1]womens: truewomens_sort_order: 0__proto__: Objectlength: 1__proto__: Array[0]

==更新2==

删除 .find(...) 并将其替换为数组下标可以修复错误，但它并不能修复错误，因为我需要抓取具有特定属性的元素:

  var setSelectedColor = function(selected_color_id) {
    if (selected_color_id) {
      // $scope.selected_color = $scope.products_colors.find(function(el) {
      //         return el.id == selected_color_id;
      //       });
      $scope.selected_color = $scope.products_colors[0]
    } else {
      $scope.selected_color = $scope.products_colors[0];
    }

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }

Answer 1

我通过用 .filter(...)[0] 替换 .find 来修复它