Question

如何将javascript对象分成几组，每组4个？下面是一个数组或对象应如何保留的示例，但我想知道如何创建一个函数，以便当用户单击按钮时，其中的4个项目将显示在html ..中，再次单击时应显示再显示4个，直到没有更多项目可显示！谢谢。

var obj = [
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
    'item10',
    'item11'
]

console.log(obj.slice(0, 4));    
console.log(obj.slice(4, 8));
console.log(obj.slice(8, 12));

Answer 1

也许这样的事情行得通吗？将索引保持在全局范围内，以便您可以在两次点击事件之间保留该值。打印组将是在点击处理程序中调用的功能（显然需要修改）

var arr = [
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
    'item10',
    'item11'
];

//builds the groups of 4 from arbitrary length array
function buildGroups(arr){
  var groupedArr = [];
  for(var i = 0; i < arr.length; i++){
    if(groupedArr[Math.floor(i/4)] === undefined){
      groupedArr[Math.floor(i/4)] = [];
    }
    groupedArr[Math.floor(i/4)].push(arr[i]);
  }
  return groupedArr;
}

//get grouped version
var groupedArr = buildGroups(arr);
//init group index
var groupIndex = 0;

function printGroup(){
  if(groupedArr[groupIndex]){
    //do something with group here
    console.log(groupedArr[groupIndex]);
  }else{
    //no more groups
  }
  groupIndex++;
}

printGroup();
printGroup();
printGroup();
printGroup();

我喜欢上面的预处理，因为它更可移植..但是根据您的用例，更干净的代码构造方法可能不需要预先分组步骤：

var arr = [
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
    'item10',
    'item11'
];

var index = 0;

function printGroup(){
  if(arr[index]){
    //do something with group here
    for(var i = 0; i < 4; i++){
      if(arr[index] !== undefined){
        console.log(arr[index]);
      }
      index++;
    }
    console.log('groupEnd');
  }else{
    //no more groups
  }
}

printGroup();
printGroup();
printGroup();
printGroup();

Answer 2

您快到了。只需将.slice()更改为.splice()。如果要添加数据完整性检查，请检查obj.length，但是如果没有数据，则正常失败，并且什么也不返回。

var obj = [
    'item1',
    'item2',
    'item3',
    'item4',
    'item5',
    'item6',
    'item7',
    'item8',
    'item9',
    'item10',
    'item11'
]

console.log(obj.splice(0, 4));    // removes & returns the first 4 elements
console.log(obj.splice(0, 4));    
console.log(obj.splice(0, 4));

Answer 3

只需跟踪当前页面：

var page = 0, size = 4;

它们只是遍历该页面：

for(var index = page * size; index < obj.length && index < (page + 1) * size; index++) {
 console.log(obj[index]);
}

要获得下一页/上一页，只需增加/减少页面，然后让循环再次运行。

在click事件中将javascript对象分成具有4个项目的组

3 个答案: