如何遍歷此Javascript對象？

Question

我有對象：

var IOBreadcrumb = function () {
    this.breadcrumbs = [];
    this.add = function(title, url) {
      var crumb = {
        title: title, 
        url:url
      };
      this.breadcrumbs.push(crumb);
    };
  };

可以說我在面包屑中添加了3個項目：

IOBreadcrumb.add('a',a);
IOBreadcrumb.add('b',b);
IOBreadcrumb.add('c',c);

我該如何遍歷並打印出標題和網址？

Answer 1

您可以添加一個each方法：

var IOBreadcrumb = function IOBreadcrumb() {
    this.breadcrumbs = [];
    this.add = function(title, url) {
      var crumb = {
        title: title, 
        url:url
      };
      this.breadcrumbs.push(crumb);
    };

    this.each = function(callback) {
       for (var i = 0; i < this.breadcrumbs.length; i++) {
           callback(this.breadcrumbs[i]);
       }
    }

  };

並像這樣使用它：

var ioBc = new IOBreadcrumb();
ioBc.add('a',a);
ioBc.add('b',b);
ioBc.add('c',c);

ioBc.each(function(item) {
    console.log(item.title + ' ' + item.url);
});

Answer 2

添加方法

print = function(){
   for (var i = 0; i < this.breadcrumbs.length; i++) {
       var current = this.breadcrumbs[i];
       console.log(current.title, current.url);
   }
}

到您的IOBreadcrumb對象，然后調用它

IOBreadcrumb.print();

Answer 3

傑森的答案就在那里。 唯一的改進是，如果您使用的是jquery，則無需實現自己的each函數。

var ioBc = new IOBreadcrumb();
ioBc.add('a',a);
ioBc.add('b',b);
ioBc.add('c',c);

$.each(ioBc.breadcrumbs, function(item) {
    console.log(item.title + ' ' + item.url);
});

如果您不希望調用者直接訪問breadcrumbs則至少應在each函數中使用$.each

...
this.each = function(callback) {
   $.each(this.breadcrumbs, callback);
}
...