如何使用 JavaScript 將數組拆分爲偶數塊

做者：Abhilash Kakumanu
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

數組是JavaScript編程中最經常使用的結構之一，這也是爲何瞭解它的內置方法很重要。

在本文中，咱們研究一下如何在 JS 中將數組拆分爲n個大小的塊。

具體來講，主要研究兩種方法：

1. 使用slice()方法和 for 循環
2. 用splice()方法和 while 循環

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

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

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

注意：start和end均可以是負整數，這僅表示它們是從數組末尾枚舉的。 -1是數組的最後一個元素，-2是倒數第二個，依此類推...

所以，要將列表或數組分割成偶數塊，咱們使用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 ]]

在上面的代碼中，咱們經過遍歷數組並按每一個chunkSize對其進行切片，將arr分解成大小爲3的小塊。在最後一次迭代中，只剩下一個元素(10)，因此它本身就組成一個塊。

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

即便splice()方法看起來與slice（）方法類似，但其用法和反作用卻大不相同。 咱們仔細來看看：

// splice 作如下兩件事:
// 1. 刪除從 startIdx 開始的 deleteCount 元素
// 2. 將提供的新元素(newElem1, newElem2…)插入到myArray中，以索引startIdx開始
// 該方法的返回值是一個包含全部已刪除元素的數組

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()會更改原始數組。 如slice()建立原始數組的副本，所以原始數組不會有任何更改。

總結

在本文中，咱們介紹了在 JS 中將列表分割爲多個塊的幾種簡單方法。在此過程當中，咱們學習瞭如何使用幾個內置的數組方法，如slice()和splice()。

~完，我是刷碗智，我要去刷碗了，咱們下期見！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://stackabuse.com/how-to...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。