JS小知识：任何几种颜色(value或其他什么的)循环展示

 之前有写过调取接口获取到菜单后，指定五个背景颜色循环展示，现在来总结一下。

import React from "react"

export default function index() {
	const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
	const arrObj = [
		{ name: "LanM", color: "blue" },
		{ name: "Strawberry", color: "red" },
		{ name: "BlackBerry", color: "black" },
	]
	let bgc = []
	let name = []
	let key = 0
	for (let i = 0; i < arr.length; i++) {
		if (key == 3) {
			key = 0
		}
		bgc[i] = arrObj[key].color
		name[i] = arrObj[key].name
		key++
		console.log(bgc[i])
	}

	return (
		<div>
			{arr.map((item: any) => {
				console.log(item)

				return (
					<div key={item + ""} style={{ backgroundColor: bgc[item], width: "100px", height: "60px", color: "#fff" }}>
						{name[item]}
					</div>
				)
			})}
		</div>
	)
}

说实话，写完这个有一种顿悟的感觉，感觉以前的JS白学了

效果: