循环遍历一个数组并检索由5个对象组成的组javascript

loop through an array and retrieve groups of 5 objects - javascript

本文关键字：对象 5个 javascript 检索 遍历 数组 一个 循环      更新时间：2023-09-26

我有一个包含一些对象的数组，只想循环遍历该数组并一次输出4个。。我会将每4个对象放入一个父div标记中，也许还有一个ul。不完全确定最佳方法。我相信有几种方法，我想在最干净的方法方面得到一些想法或反馈。谢谢

var data = [
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    },
    {
    "parent":{
      "firstname": "firstname",
      "lastname": "lastname2"
    }
    },
    {
    "parent":{
      "firstname": "firstname2",
      "lastname": "lastname3"
    }
    }     
    ]

您可以迭代并跟踪当前组中有多少人，并在该组填满时启动一个新组。这段代码将原始数组分解为一个组数组，其中每个组中的数字不超过所需的数字。然后，您可以使用该组数组创建您想要的任何类型的输出：

function breakArrayIntoGroups(data, maxPerGroup) {
    var numInGroupProcessed = 0;
    var groups = [[]];
    for (var i = 0; i < data.length; i++) {
        groups[groups.length - 1].push(data[i]);
        ++numInGroupProcessed;
        if (numInGroupProcessed >= maxPerGroup && i !== (data.length - 1)) {
            groups.push([]);
            numInGroupProcessed = 0;
        }
    }
    return groups;
}
var groups = breakArrayIntoGroups(data, 5);

工作演示：http://jsfiddle.net/jfriend00/pas3czxn/

这里有一个更简单的版本，它使用.slice()从原始数组中一次复制maxPerGroup项：

function breakArrayIntoGroups(data, maxPerGroup) {
    var groups = [];
    for (var index = 0; index < data.length; index += maxPerGroup) {
        groups.push(data.slice(index, index + maxPerGroup));
    }
    return groups;
}
var groups = breakArrayIntoGroups(data, 5);

工作演示：http://jsfiddle.net/jfriend00/g95umf40/

好吧，我来玩。一个简单的选项是在数组上迭代并放置4条记录，然后添加一个break或任何您想要的分隔符，然后显示下一个4。继续执行此操作，直到用完阵列。。

var start = 0;
var el = document.getElementById('insertHere');
while (start < data.length) {
    for (var i = start; i < start + 4; i++) {    
    el.innerHTML += data[i].parent.firstname + " - " + data[i].parent.lastname + "<br />";
    }
    el.innerHTML += "<br/><br/>"
    start += 4;
}

http://jsfiddle.net/984ru5dL/

这样的东西会对你的数据起作用，对不起-我使用了jQuery:

var grouperise = (function (g, a) {
    var groups = {};
    $.each(a, function (n, v) {
        var ng = Math.trunc(n/g);
        groups[ng] = groups[ng] || [];
        groups[ng].push(v);
    });
    var result = [];
    for (var index in groups) {
        result.push(groups[index]);
    }
    return result;
});

用法：

var groupies = grouperise(5, data);
console.log(groupies);

毫无疑问，有人会想出更聪明的办法……：-）

您可以简单地在一批4个数组中循环，如下所示：

for(i=0; i < array.length; i=i+4){
    i-1 // gives you fourth element in batch
    i-2 // gives you third element in batch
    i-3 // gives you second element in batch
    i-4 // gives you first element in batch
}

这对于长度为4的倍数的数组来说效果很好，但如果不是这样，一个额外的检查也可以解决这个问题。

相关文章：