本文详解两种现代 JavaScript（ES6+）方法——map() 和 filter()——根据指定索引数组从原始字符串数组中精准提取对应元素，适用于 React 等框架中传递筛选后的数据。
本文详解两种现代 javascript（es6+）方法——`map()` 和 `filter()`——根据指定索引数组从原始字符串数组中精准提取对应元素，适用于 react 等框架中传递筛选后的数据。
在实际开发中（尤其是 React 组件通信场景），我们常需基于一组索引（如用户勾选的星期几序号）从原始数据数组中提取子集。例如：原始工作日数组 ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]，配合索引数组 [0, 2, 4]，目标是高效生成 ["Mon", "Wed", "Fri"]。以下是两种推荐的 ES6 实现方式，各具语义优势与性能特点：
✅ 方法一：map() —— 直观、高效、推荐首选
当已知索引数组明确且有序时，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"]
✅ 优点：时间复杂度 O(n)，其中 n 为索引数组长度；语义清晰（“把每个索引转成对应的值”）；不依赖原数组遍历，性能更优。
⚠️ 注意：确保 index 在 weekDays 合法范围内（0 ≤ index ），否则返回 <code>undefined。生产环境建议添加校验：
const selectedWeekdays = selectedIndices .filter(index => Number.isInteger(index) && index >= 0 && index < weekDays.length) .map(index => weekDays[index]);
✅ 方法二：filter() —— 语义化“按条件保留”
若更强调“从原数组中筛选出满足索引条件的项”，可使用 filter() 配合 includes()：
const selectedWeekdays = weekDays.filter((_, i) => selectedIndices.includes(i)); // → ["Mon", "Wed", "Fri"]
✅ 优点：逻辑直白（“保留索引在 selectedIndices 中的元素”）；无需预判索引有效性（越界索引自动被忽略）。
⚠️ 注意：includes() 在内部遍历 selectedIndices，时间复杂度为 O(m × n)，其中 m 为原数组长度，n 为索引数组长度。当 selectedIndices 较大（如 >100 项）时，建议先转为 Set 提升查找效率：
const selectedIndexSet = new Set(selectedIndices); const selectedWeekdays = weekDays.filter((_, i) => selectedIndexSet.has(i));
? 实际应用建议（React 场景）
在 React 中，通常将该逻辑封装为工具函数或内联计算属性：
立即学习“Java免费学习笔记（深入）”；
// React 组件示例
function WeekdaySelector({ allDays, selectedIndices }: {
allDays: string[];
selectedIndices: number[];
}) {
const selectedWeekdays = selectedIndices
.filter(i => i >= 0 && i < allDays.length)
.map(i => allDays[i]);
return (
<div>
<h3>已选工作日：</h3>
<ul>{selectedWeekdays.map((day, i) => <li key={i}>{day}</li>)}</ul>
</div>
);
}总结：优先使用 map()（简洁高效），尤其适合索引明确、数量可控的场景；filter() 更侧重声明式表达，配合 Set 优化后亦可胜任大规模筛选。二者均符合函数式编程思想，无副作用，易于测试与复用。
