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