javascript - 在HTML部分使用 "."访问对象并在JavaScript部分使用 "[]"？

Question

我知道它是这样工作的，但我不知道为什么它会这样工作。请参阅下面的代码。那么，为什么我们在 HTML 部分使用 "." 来访问对象，而在 JavaScript 部分使用 "[]" 来访问对象呢？谢谢。

<div ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="detail in details">
        <span>{{detail.numbers.length}}</span> <!-- Output: 1, 2, 3 -->
        <!-- Won't work: <span>{{details[detail].numbers.length}}</span> -->
    </div>
</div>

angular.module("testApp", []).controller("testCtrl", function ($scope) {
    $scope.details = [{"numbers": [1]}, {"numbers": [2, 2]}, {"numbers": [3, 3, 3]}];
    for (var detail in $scope.details) {
        console.log($scope.details[detail].numbers.length); //Output: 1, 2, 3
        //Won't work: console.log(detail.numbers.length);
    }
})

JSFiddle:https://jsfiddle.net/ealonwang/d5yL8ydk/18/ 。

右键单击并检查页面以查看 console.log() 结果。

Answer 1

您的示例数据有一个对象数组。您所描述的差异与 Angular 处理数组迭代的方式与 JavaScript in 的工作方式有关。

在 Angular 中，通过每次迭代返回对象来迭代对象数组。相比之下，in 运算符返回每次迭代的数组索引。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

在 HTML 中，您可以使用 ng-repeat 的替代语法，它将返回每次迭代的索引，即 “ng-repeat = (index,detail) indetails” 。或者，如果数组是静态的，您可以使用 Angular 自动生成的 $index 参数。

在 JavaScript 中，Angular 框架提供了一个迭代器函数，其工作方式与 ng-repeat 类似，它将返回每次迭代的对象。

angular.forEach($scope.details, function(detail){
  console.log(detail.numbers.length);
});

https://docs.angularjs.org/api/ng/function/angular.forEach