splice()返回undefined求助：矩形无法获取颜色问题排查

问题根源分析 #

1. splice()参数使用错误
   JavaScript的Array.splice()方法仅传索引参数时，会从该索引处开始删除数组末尾所有元素，而非单个元素。执行randomColor.splice(r)后，数组会快速被清空，后续调用randomColor[r]自然返回undefined。正确删除单个元素的写法是randomColor.splice(r, 1)，第二个参数用于指定删除的元素数量。

2. 循环次数与颜色数量不匹配
   你的嵌套循环总计会执行2*2*2*2*2*2=64次，每次循环还重复绘制2个矩形，相当于要生成128个矩形，但颜色数组仅含4个元素。即便splice用法正确，数组也会在4次循环后被清空，剩余矩形无法获取有效颜色。

3. 冗余的矩形绘制
   每次循环中连续调用了两次完全相同的rect()，导致同一位置的矩形被重复绘制，既无意义又浪费性能。

修复方案 #

根据你的颜色分配需求，分两种场景处理：

场景1：每个颜色仅使用一次（绘制4个矩形） #

调整循环次数，修正splice用法，删除冗余绘制代码：

let randomColor = ["red", 'blue', 'yellow', 'grey']
function setup() {
  createCanvas(400, 400)
  background(225)
  // 循环4次，对应4种颜色
  for (let i = 0; i < 4; i++) {
    let r = int(random(0, randomColor.length))
    // 删除并获取选中的颜色
    let selectedColor = randomColor.splice(r, 1)[0]
    console.log(selectedColor)
    fill(selectedColor)
    // 按顺序排列矩形，可自行调整坐标逻辑
    rect(20 + i * 100, 180, 30, 30)
  }
}

场景2：循环使用4种颜色（绘制大量矩形） #

若需为所有64个矩形分配颜色，无需修改原数组，直接随机选取即可：

let randomColor = ["red", 'blue', 'yellow', 'grey']
function setup() {
  createCanvas(400, 400)
  background(225)
  for (let t = 0; t < 2; t++) {
    for (let w = 0; w < 2; w++) {
      for (let x = 0; x < 2; x++) {
        for (let y = 0; y < 2; y++) {
          for (let i = 0; i < 2; i++) {
            for (let j = 0; j < 2; j++) {
              let r = int(random(0, randomColor.length))
              let selectedColor = randomColor[r]
              console.log(selectedColor)
              fill(selectedColor)
              rect(((20 + 30 * i) + (65 * x)) + 140 * t, ((10 + 30 * j) + 65 * y) + 140 * w, 30, 30)
            }
          }
        }
      }
    }
  }
}

场景3：不重复循环分配颜色 #

如果想实现用完4种颜色后重新洗牌再分配的效果，可在数组为空时重新初始化：

let randomColor = ["red", 'blue', 'yellow', 'grey']
function setup() {
  createCanvas(400, 400)
  background(225)
  for (let t = 0; t < 2; t++) {
    for (let w = 0; w < 2; w++) {
      for (let x = 0; x < 2; x++) {
        for (let y = 0; y < 2; y++) {
          for (let i = 0; i < 2; i++) {
            for (let j = 0; j < 2; j++) {
              // 数组为空时重新填充颜色
              if (randomColor.length === 0) {
                randomColor = ["red", 'blue', 'yellow', 'grey']
              }
              let r = int(random(0, randomColor.length))
              let selectedColor = randomColor.splice(r, 1)[0]
              fill(selectedColor)
              rect(((20 + 30 * i) + (65 * x)) + 140 * t, ((10 + 30 * j) + 65 * y) + 140 * w, 30, 30)
            }
          }
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Jun Wei Li