本篇文章帶大家了解一下如何在javascript中將數(shù)組拆分為偶數(shù)塊？有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

數(shù)組是JavaScript編程中最常用的結(jié)構(gòu)之一，這也是為什么了解它的內(nèi)置方法很重要。

在本文中，我們研究一下如何在 JS 中將數(shù)組拆分為n個(gè)大小的塊。

具體來說，主要研究?jī)煞N方法：

• 使用slice()方法和 for 循環(huán)

• 用splice()方法和 while 循環(huán)

使用 slice() 方法將數(shù)組分割成偶數(shù)塊

slice()方法是提取數(shù)組塊，或者將其切成塊的最簡(jiǎn)單方法：

slice(start, end) 方法返回一個(gè)新的數(shù)組對(duì)象，這一對(duì)象是一個(gè)由 begin 和 end 決定的原數(shù)組的淺拷貝（包括 begin，不包括end）。原始數(shù)組不會(huì)被改變。

注意：start和end都可以是負(fù)整數(shù)，這僅表示它們是從數(shù)組末尾枚舉的。 -1是數(shù)組的最后一個(gè)元素，-2是倒數(shù)第二個(gè)，依此類推…

因此，要將列表或數(shù)組分割成偶數(shù)塊，我們使用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));

運(yùn)行結(jié)果：

[[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ]]

在上面的代碼中，我們通過遍歷數(shù)組并按每個(gè)chunkSize對(duì)其進(jìn)行切片，將arr分解成大小為3的小塊。在最后一次迭代中，只剩下一個(gè)元素(10)，所以它自己就組成一個(gè)塊?！就扑]學(xué)習(xí)：javascript高級(jí)教程】

使用 splice() 方法將數(shù)組分割成偶數(shù)塊

即使splice()方法看起來與slice（）方法相似，但其用法和副作用卻大不相同。 我們仔細(xì)來看看：

// splice 做以下兩件事: // 1. 刪除從 startIdx 開始的 deleteCount 元素 // 2. 將提供的新元素(newElem1, newElem2…)插入到myArray中，以索引startIdx開始 // 該方法的返回值是一個(gè)包含所有已刪除元素的數(shù)組  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]

我們通過一個(gè)代碼示例來實(shí)際了解這一點(diǎn)：

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

運(yùn)行結(jié)果：

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ] ]

在這里，我們使用while循環(huán)遍歷數(shù)組。 在每次迭代中，我們執(zhí)行拼接操作，并將每個(gè)塊添加到結(jié)果數(shù)組中，直到原始數(shù)組中不再有其他元素為止（arr.length> 0）。

需要注意的非常重要的一點(diǎn)是splice()會(huì)更改原始數(shù)組。 如slice()創(chuàng)建原始數(shù)組的副本，因此原始數(shù)組不會(huì)有任何更改。

總結(jié)

在本文中，我們介紹了在 JS 中將列表分割為多個(gè)塊的幾種簡(jiǎn)單方法。在此過程中，我們學(xué)習(xí)了如何使用幾個(gè)內(nèi)置的數(shù)組方法，如slice()和splice()。

原文地址：https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript/

作者：Abhilash Kakumanu

譯文地址：https://segmentfault.com/a/1190000039833328