如何用JavaScript基于Array.map索引实现黑白双列交替网格

规律推导 #

整理给定的索引与颜色对应规则，可以发现颜色每4个索引为一个循环周期：

• 索引对4取余结果为0、3时，格子颜色为白色
• 索引对4取余结果为1、2时，格子颜色为黑色

代码实现 #

直接在Array.map的回调里通过index计算对应颜色即可，无需依赖CSS方案：

const gridItems = Array.from([1,2,3,4,5,6,7,8,9,10]).map((num, index) => {
  const remainder = index % 4;
  const bgColor = remainder === 1 || remainder === 2 ? 'black' : 'white';
  // 此处替换为你的列表项渲染逻辑即可
  return {
    content: num,
    bgColor
  }
})

// 规则验证：输出对应索引和颜色
gridItems.forEach((item, idx) => console.log(`${idx}-${item.bgColor}`))

运行上述代码的输出完全匹配预期规则：0-white 1-black 2-black 3-white 4-white 5-black 6-black 7-white 8-white 9-black

内容的提问来源于stack exchange，提问作者Karl Taylor