如何在JavaScript（React）中根据索引筛选工作日字符串数组？

直接使用Array.prototype.map()遍历选中的索引数组，取出工作日数组中对应索引的元素即可，这是语义最清晰、效率最高的实现方式：

const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const selectedIndices = [0, 2, 4];

// 核心逻辑
const selectedWeekdays = selectedIndices.map(index => weekdays[index]);
// 结果：['Mon', 'Wed', 'Fri']

为什么这是最优解？ #

• 语义明确：map方法的作用就是将原数组的每个元素转换为新元素，完全契合“用索引取对应工作日”的需求，代码可读性极强。
• 效率最高：时间复杂度为O(k)，k是选中索引数组的长度，属于线性遍历，没有额外的性能开销。
• 简洁性：ES6箭头函数进一步压缩了代码量，逻辑一目了然。

可选：处理非法索引 #

如果无法保证选中的索引一定在工作日数组的有效范围内（比如索引为负数或超出数组长度），可以先过滤掉无效索引再映射：

const selectedWeekdays = selectedIndices
  .filter(index => index >= 0 && index < weekdays.length)
  .map(index => weekdays[index]);

在React中传递给子组件的示例 #

function Parent() {
  const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const selectedIndices = [0, 2, 4];
  const selectedDays = selectedIndices.map(i => weekdays[i]);

  return <ChildComponent selectedDays={selectedDays} />;
}

// 子组件接收并使用
function ChildComponent({ selectedDays }) {
  return (
    <ul>
      {selectedDays.map(day => (
        <li key={day}>{day}</li>
      ))}
    </ul>
  );
}

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