在 JavaScript 中将数组分割成块


本文的任务是在 JavaScript 中将给定的数组元素分割成 n 个大小的块。我们有一些方法可以对数组执行分割操作,这些方法将在下面讨论。

让我们假设一些简单的输入和输出场景 

假设有一个包含元素的数组。例如,数组 = [10, 20, 30, 40],我们取块大小为 2。

Input = [10, 20, 30, 40]
Ouput = [[10, 20], [30, 40]]

元素将被分成两个块,第一个参数指定起始索引,第二个参数指定结束索引。

让我们看看下面这两种方法 

  • 使用slice 方法和for 循环。

  • 使用splice 方法和while 循环。

使用 Slice() 方法

JavaScript 中的 slice() 方法将数组的一部分浅复制到一个新的对象数组中。slice() 方法是提取数组的一部分或切片数组的最简单方法。

语法

以下是 JavaScript 中 slice() 方法的语法 -

slice(start, end)

这将返回调用的数组在开始和结束之间的那一部分。

示例:带有 for 循环的 Slice

在下面的示例中,for 循环与 slice 方法一起使用来将数组元素分割成块。我们通过迭代数组将数组分解成大小为 2 的块。

function array_into_chunks (array, size_of_chunk) {
   const arr = [];
   for (let i = 0; i < array.length; i += size_of_chunk) {
      const chunk = array.slice(i, i + size_of_chunk);
      arr.push(chunk);
   }
   return arr;
}
const array = [1, 6, 7, 3, 5, 9, 4];
console.log(array_into_chunks(array, 2));

示例:带有 while 循环的 Splice 方法

在下面的示例中,我们使用了while 循环遍历数组。我们在每次迭代中执行拼接操作并将每个块推入新数组,除非原始数组中没有剩余元素,即array.length 大于 0。

function array_into_chunks (array, chunkSize) {
   const arr = [];
   while (array.length > 0) {
      const chunk = array.splice(0, chunkSize);
      arr.push(chunk);
   }
   return arr;
}
const array = [1, 6, 7, 3, 5, 9, 4];
console.log(array_into_chunks (array, 2));

注意

splice() 方法会更改原始数组。但在 slice() 方法的情况下,它会创建原始数组的副本。因此,原始数组不会有任何修改。

示例 2:数组原型中的数组映射

map 函数会依次调用数组中的每个元素一次,并根据结果创建一个新数组。该函数将输出一个数组,其长度由输入数组的长度除以块大小决定。该数组将首先由 fill 函数填充未定义值(因为没有提供参数),然后每个未定义值将被一个新数组替换(使用正确的索引对提供的数组进行切片的结果)。

在下面的示例中,我们在数组的原型中定义了 chunk 方法,该方法将返回一个包含给定大小的块数组的数组。

Object.defineProperty(Array.prototype, 'chunk', {
   value: function(size_of_chunk) {
      var that = this;
      return Array(Math.ceil(that.length/size_of_chunk)).fill().map(function(_,i){
         return that.slice(i*size_of_chunk, i*size_of_chunk + size_of_chunk); 
      });
    }
});
var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120].chunk(4);
console.log(arr);

更新于: 2022年12月19日

2K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告