JavaScript中如何将分割后的子数组动态存入新数组

我已经在Stack Overflow和全网查找过解决方案，但没找到合适的方法。我有一个长度可变的数组：

this.data = [ 
  { icon:'icon1.png', audio:'audio1.mp3', id:'id1', name: 'name1'}, 
  { icon:'icon2.png', audio:'audio2.mp3', id:'id2', name: 'name2'}, 
  { icon:'icon3.png', audio:'audio3.mp3', id:'id3', name: 'name3'}, 
  { icon:'icon4.png', audio:'audio4.mp3', id:'id4', name: 'name4'}, 
  { icon:'icon5.png', audio:'audio5.mp3', id:'id5', name: 'name5'}, 
  { icon:'icon6.png', audio:'audio6.mp3', id:'id6', name: 'name6'}, 
  { icon:'icon7.png', audio:'audio7.mp3', id:'id7', name: 'name7'}, 
  { icon:'icon8.png', audio:'audio8.mp3', id:'id8', name: 'name8'}, 
  { icon:'icon9.png', audio:'audio9.mp3', id:'id9', name: 'name9'}, 
  { icon:'icon10.png', audio:'audio10.mp3', id:'id10', name: 'name10'}, 
  { icon:'icon11.png', audio:'audio11.mp3', id:'id11', name: 'name11'}, 
  { icon:'icon12.png', audio:'audio12.mp3', id:'id12', name: 'name12'} 
]

我需要将该数组分割为指定长度的子数组，若无法均分则最后一个子数组包含剩余元素，已经通过以下代码实现：

var chunksize = 4; 
var chunks = []; 
this.data.forEach((item)=>{ 
  if(!chunks.length || chunks[chunks.length-1].length == chunksize) 
    chunks.push([]); 
  chunks[chunks.length-1].push(item); 
});

现在我得到了一个二维数组chunks，希望将其中的每个子数组动态存入新数组this.pages，而非手动写入如this.pages = [chunks[0], chunks[1], chunks[2]]的代码。我尝试用for循环实现，但未成功，求解决方法。

其实你要做的事情比想象中简单，因为chunks本身就是符合你需求的结构——它的每个元素就是分割好的子数组，所以直接处理它就能得到this.pages：

方法1：直接赋值（最快方式） #

如果不需要this.pages和chunks完全独立（后续修改其中一个不会影响另一个的场景），直接赋值就行：

this.pages = chunks;

方法2：创建独立拷贝（避免引用关联） #

如果希望this.pages是全新的数组，和chunks互不影响，可以用扩展运算符或者slice方法：

// 扩展运算符
this.pages = [...chunks];
// 或者slice方法
this.pages = chunks.slice();

方法3：用for循环实现（符合你的尝试方向） #

如果你还是想用for循环完成，可能之前的写法有小问题，正确的实现可以是这样：

this.pages = [];
for (let i = 0; i < chunks.length; i++) {
  this.pages.push(chunks[i]);
}

或者用forEach遍历：

this.pages = [];
chunks.forEach(chunk => {
  this.pages.push(chunk);
});

本质上chunks已经是你需要的pages结构了，所以不管用哪种方式，核心都是把chunks里的子数组批量转移到this.pages中~

内容的提问来源于stack exchange，提问作者Harry