在Javascript中如何每次以4个元素为一组遍历数组？

Question

我有一个长数字数组列表，我想每次循环处理其中4个元素。

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

我希望能循环遍历它们，以便我可以像这样处理1-4，5-8，9-12

- reddy

---

使用for循环，其中索引每次增加4，并使用切片每次访问4个元素。 - Jaromanda X

数组的长度是否总是能被4整除？如果不是，你可能需要添加一些边界检查，否则在超出数组项数时会得到未定义的值。 - Matt U

@MattU 它总是可以被4整除 - reddy

Answer 1

使用for循环，其中i每次增加4个。

注：当Jaromanda X发表相同观点时，我正在撰写答案。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

for (var i = 0; i < arr.length; i += 4) {
  console.log("Working with: " + arr.slice(i, i + 4));
}

- Yousername

---

但是在for循环内部如何访问它们？我不仅仅是将它们打印出来。 - reddy

Answer 2

使用ES6和数组函数：

Using ES6和数组函数：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

[...Array(Math.ceil(arr.length / 4)).keys()].forEach(i => {
    const [a, b, c, d] = arr.slice(i * 4, (i+1) * 4)
 
    // a, b, c and d are the four elements of this iteration
    console.log(`iteration n°${i}`, a, b, c, d)
})

注意: 如果数组长度不是4的倍数，将使用Math.ceil来防止出现错误。

- Harijoe

---

为什么你在使用.map而没有返回任何东西？ - Jaromanda X

好眼力 @MarkMeyer。 - Harijoe

@JaromandaX 你是对的，在这里使用forEach而不是map更好 - Harijoe

Answer 3

lodash chunk 方法可以实现这个功能。

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

- challet