JS对象数组分页

时间:2015-03-03 20:56:15

标签: javascript pagination

我需要一些帮助来操纵/分页JS数组对象5:

var musicItems = [
    ["assets/audio/1.wav"],
    ["assets/audio/2.wav"],
    ["assets/audio/3.wav"],
    ["assets/audio/4.wav"],
    ["assets/audio/5.wav"],
    ["assets/audio/6.wav"],
    ["assets/audio/7.wav"],
    ["assets/audio/8.wav"],
];

我想在JS中知道集合的数量(2)以及哪些元素属于哪个集合(set1-> 1-5,set2-> 6-8)。感谢任何帮助。

修改 我希望做一些像Split array into chunks

这样的事情

但正如你所看到的,我的阵列是不同的。

2 个答案:

答案 0 :(得分:4)

这只是一个关于如何使用modulo运算符%实现此目的的简单演示。将会有更高效,更小的解决方案。

var musicItems = [
    ["assets/audio/1.wav"],
    ["assets/audio/2.wav"],
    ["assets/audio/3.wav"],
    ["assets/audio/4.wav"],
    ["assets/audio/5.wav"],
    ["assets/audio/6.wav"],
    ["assets/audio/7.wav"],
    ["assets/audio/8.wav"],
];

var sets = new Object();
var set = new Array();
var setCounter = 0;

for(var i = 0; i < musicItems.length; i++) {
    set.push(musicItems[i]);

    if((i + 1) % 5 == 0 || (i + 1) >= musicItems.length) {
        setCounter++;
        sets['set' + setCounter] = set;
        set = new Array();
    }
}

console.log(sets['set1']);
console.log(sets['set2']);

基本上这样做是为了遍历musicItems,我们用模数%5检查当前项目是否可以在没有休息的情况下被5分割,所以我们知道一个集合已经完成,因为我们收集了5个项目。然后我们将该集合添加到整个集合对象中,以便稍后将其用作字典(如希望使用&#39; set1&#39;,&#39; set2&#39;等),我们清除当前集合,填写下一个n-5项。

答案 1 :(得分:0)

Bref:

  max=5,j=0;
  for(var i=0;i<musicItems.length;i=i+max){
        j++;
       sets['set' + j] = musicItems.offset(i).max(max);
  }

解释

分页概念依赖于两个参数:

  1. 抵消:
  2. Max:
  3. 然后:

    musicItems.offset(0).max(5) ;   // 1st set
       // >  [ ["assets/audio/1.wav"],["assets/audio/2.wav"],["assets/audio/3.wav"],["assets/audio/4.wav"],["assets/audio/5.wav"]  ]
    musicItems.offset(0+5).max(5) ;  // second set
       // >  [ ["assets/audio/6.wav"],["assets/audio/7.wav"],["assets/audio/8.wav"] ]
    

    必需的API:

    Array.prototype.max = function(mx) {
       return this.filter(function(e,i){return i < mx;}); }
    };
    
    Array.prototype.offset=function(os){
       return this.filter(function(e,i){return i> os-1 });
     };