如何在遍历数组时将所有可点击元素的索引收集到同一数组中？

问题根源 #

你当前代码的核心问题是将indexes数组的声明放在了map的回调函数内部——每次map迭代都会重新创建一个全新的indexes数组，导致每次push只能保存当前迭代的单个索引，无法累积所有符合条件的结果。另外代码里还有拼写错误：clicklable应该是clickable，这会导致判断逻辑失效。

解决方案 #

方法1：提前声明数组，用forEach遍历收集

先在遍历外部定义用于存储索引的数组，再通过forEach遍历原数组，将符合条件的索引逐一存入：

// 修正原数组的格式与拼写错误
const items = [
  {type: "clickable", time: "11:41pm"},
  {type: "standard", time: "11:42pm"},
  {type: "clickable", time: "11:43pm"},
  {type: "clickable", time: "11:45pm"}
];

// 在遍历外部声明索引数组
const indexes = [];

items.forEach((item, idx) => {
  if (item.type === "clickable") {
    indexes.push(idx);
  }
});

console.log(indexes); // 输出 [0, 2, 3]

方法2：用reduce方法简洁收集

reduce方法天生适合这种“累积结果”的场景，无需额外声明数组：

const items = [
  {type: "clickable", time: "11:41pm"},
  {type: "standard", time: "11:42pm"},
  {type: "clickable", time: "11:43pm"},
  {type: "clickable", time: "11:45pm"}
];

const indexes = items.reduce((acc, item, idx) => {
  if (item.type === "clickable") {
    acc.push(idx);
  }
  return acc;
}, []); // 初始值传入空数组

console.log(indexes); // 输出 [0, 2, 3]

关于后续点击移除的补充 #

收集到索引数组后，点击元素时可以通过以下方式处理移除逻辑：

• 从indexes数组中删除目标索引：indexes.splice(indexes.indexOf(targetIdx), 1)
• 更新渲染列表：基于原数组过滤掉对应索引的元素，或直接操作组件的列表状态

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