0

如何将 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));

4

3 回答 3

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();

于 2018-07-06T15:05:04.267 回答
1

你快到了。只需更改.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));

于 2018-07-06T15:09:36.740 回答
1

只需跟踪当前页面：

var page = 0, size = 4;

他们只是遍历该页面：

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

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

于 2018-07-06T15:14:44.397 回答