Javascript 中将数组拆分为偶数块

达到完美境界并不是无以复加，而是无可去除。——<安托万·德·圣·埃克苏佩里>

介绍

数组是 JavaScript 编程中最常用的结构之一，这就是为什么了解它的内置方法（例如口袋的背面）很重要的原因。

在本教程中，我们将看看在 JavaScript 中如何将数组拆分为 n 不同大小的块。

具体来说，我们将看看两种方法：

使用 slice() 方法和 for 循环
使用 splice() 方法和 while 循环

使用 slice() 方法将数组拆分为偶数块

提取数组块的最简单方法，或者更确切地说，将其切片，是以下 slice() 方法：

slice(start, end) - 返回被调用数组的一部分，在 start 和 end 索引之间。

注：这两个 start 和 end 可负整数，这只是表示，他们正在从数组的末尾列举。-1 是数组的最后一个元素，-2 倒数第二个等等…

返回的数组 slice() 返回一个浅拷贝，这意味着原始数组中的任何引用都将按原样复制，并且不会为全新的对象分配内存。

因此，要将列表或数组切成偶数块，让我们使用以下 slice() 方法：

function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sliceIntoChunks(arr, 3));

// 运行上面的代码会产生以下输出：
[[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ]]

在上面的代码中，我们将 arr 分解为大小为 3 的更小的块，方法是遍历数组并将其切片为每个 chunkSize 。在最后一次迭代中，只剩下一个元素(10)，它必须组成自己的块。

使用 splice() 方法将数组分割成偶数块

尽管 splice() 方法看起来与 slice() 方法类似，但它的使用和副作用是非常不同的。让我们仔细看看:

// Splice does the following two things:
// 1. Removes deleteCount elements starting from startIdx (in-place)
// 2. Inserts the provided new elements (newElem1, newElem2...) into myArray starting with index startIdx (also in-place)
// The return value of this method is an array that contains all the deleted elements
myArray.splice(startIdx, deleteCount, newElem1, newElem2...)

let arrTest = [2, 3, 1, 4]
let chunk = arrTest.splice(0,2)
console.log(chunk) // [2, 3]
console.log(arrTest) // [1, 4]

让我们通过一个代码示例来看看它的实际效果：

function spliceIntoChunks(arr, chunkSize) {
    const res = [];
    while (arr.length > 0) {
        const chunk = arr.splice(0, chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(spliceIntoChunks(arr, 2));
// 运行此代码产生：
// [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ] ]

这里我们使用 while 循环来遍历数组。在每次迭代中，我们执行拼接操作并将每个块推送到结果数组中，直到原始数组中没有更多元素 ( arr.length > 0)。

需要注意的一个非常重要的事情是 splice() 更改了原始数组。其中 asslice() 创建了原始数组的副本，因此原始数组不会有任何更改。

总结

在本文中，我们讨论了几种在 JavaScript 中将列表拆分为偶数块的简单方法。尽管这样，我们学会了如何与几个像内置阵列方法的工作 slice() 和 splice()

参考

https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

介绍

使用 slice() 方法将数组拆分为偶数块

使用 splice() 方法将数组分割成偶数块

总结

参考

FEATURED TAGS

FRIENDS