Question

我有一个如下所示的对象声明：

function box(box_Id, box_BackgroundColor, box_Width) {
    this.boxId = box_Id;
    this.boxBackgroundColor = box_BackgroundColor;
    this.boxWidth = box_Width;
}

然后，我正在创建该对象的3个新实例：

var box1 = new box('box1', 'ff0000', 70);
var box2 = new box('box2', '00ff00', 100);
var box3 = new box('box3', '0000ff', 270);

现在，我正在尝试使用jQuery $ .each（）函数循环遍历box（）对象的每个实例，并且console.log（）每次都输出一个变量。我正在使用以下代码，但控制台中没有任何内容：

$.each(box, function(){
    console.log("this.boxId = " + this.boxId);
});

有什么想法吗？万分感谢！

Answer 1

box只是一个函数，你不能迭代它。除非你特别记住它们，否则无法获得原型的所有实例。例如，这将起作用：

function Box(boxId, boxBackgroundColor, boxWidth) {
    this.boxId = boxId;
    this.boxBackgroundColor = boxBackgroundColor;
    this.boxWidth = boxWidth;
    Box.instances.push(this);
}
Box.instances = [];

var box1 = new Box('box1', 'ff0000', 70);
var box2 = new Box('box2', '00ff00', 100);
var box3 = new Box('box3', '0000ff', 270);

$.each(Box.instances, function(){
    console.log("this.boxId = " + this.boxId);
});

小注：作为JavaScript样式的一个要点，旨在用作构造函数的函数通常用标题大小写，以模仿Java，Ruby，Python等中已有的约定。不同于其中一些语言，JavaScript没有以任何方式强制执行此约定，因此上面所写的内容绝不是语法错误。但有人可能认为它是一种风格错误，因为它会阻碍你的代码对其他开发人员的可读性 - 既因为他们的心理模型，也因为普通语法高亮工具的失败（如你比较你会注意到）我的代码片段与你的）。同样，我不知道任何语言的样式指南使用下划线分隔的camelcase作为标识符。 JavaScript的标准变量标识符格式是普通的camelcase。我冒昧地纠正了这些问题，但是您是否根据社区风格指南调整您的代码取决于您。

Answer 2

。 each （）用于通用迭代器函数，可用于无缝迭代对象和数组。

function box(box_Id, box_BackgroundColor, box_Width) {
    this.boxId = box_Id;
    this.boxBackgroundColor = box_BackgroundColor;
    this.boxWidth = box_Width;
}
var box1 = new box('box1', 'ff0000', 70);
var box2 = new box('box2', '00ff00', 100);
var box3 = new box('box3', '0000ff', 270);
var boxArr=[box1,box2,box3]
$.each(boxArr, function(){
    console.log("this.boxId = " + this.boxId);
});

DEMO

Answer 3

将所有框box1，box2，box3放在一个数组中，然后对其进行迭代。

function box(box_Id, box_BackgroundColor, box_Width) {
    this.boxId = box_Id;
    this.boxBackgroundColor = box_BackgroundColor;
    this.boxWidth = box_Width;
}
var box1 = new box('box1', 'ff0000', 70);
var box2 = new box('box2', '00ff00', 100);
var box3 = new box('box3', '0000ff', 270);

var boxes = [box1,box2,box3];

$.each(boxes, function(index,b){
    console.log("this.boxId = " + b.boxId);
})

你也可以通过这个来实现它

$.each(boxes, function(){
    console.log("this.boxId = " + this.boxId); //but $each provides value & index so you can use that as I shown above
})

Answer 4

你可以尝试这样的事情。这样，您就不必记住属性名称：

function box(box_Id, box_BackgroundColor, box_Width) {
    this.boxId = box_Id;
    this.boxBackgroundColor = box_BackgroundColor;
    this.boxWidth = box_Width;
}
var box1 = new box('box1', 'ff0000', 70);
var box2 = new box('box2', '00ff00', 100);
var box3 = new box('box3', '0000ff', 270);
var boxArr = [box1, box2, box3];

$.each(boxArr, function (index, box) {
    console.log("--- Considering box" + (index + 1));
    $.each(box, function(prop, value) {
        console.log(prop +" => "+ value);
    });
});

使用jQuery $ .each（）迭代JavaScript对象的每个实例

4 个答案:

DEMO