学习前提

理解变量、类型和循环；能够区分字符串与数组。

本课完成后你能做什么

用筛选、映射和查找表达数据处理，把显示格式与原始数据分开。

先理解机制

字符串不可变，trim、toLowerCase、replace 返回新字符串。length 计算 UTF-16 码元数量，并不总等于用户看到的字符数。关键词匹配可以先对查询和被查文本统一大小写；需要多语言排序时使用 localeCompare。

filter 保留满足条件的元素，map 转换每项，find 返回第一个匹配或 undefined。它们不会直接改变原数组结构，但回调仍可能修改共享对象。sort 会修改原数组，先复制再排序可以避免意外改变页面原始顺序。

数组适合顺序集合；对象适合具有命名字段的记录；Set 可去重原始值，Map 适合键值查找。不要把标题当唯一身份，标题会变，也可能重复。使用稳定 id 才能在筛选、排序和删除后定位同一条记录。

可运行示例

const lessons = [
  { id: 1, title: "HTML basics", minutes: 20 },
  { id: 2, title: "CSS layout", minutes: 35 },
  { id: 3, title: "HTML forms", minutes: 25 }
];
const query = " html ".trim().toLowerCase();
const result = lessons
  .filter(item => item.title.toLowerCase().includes(query))
  .map(item => ({ ...item, label: `${item.title} · ${item.minutes} min` }));
const ordered = [...result].sort((a, b) => b.minutes - a.minutes);
console.table(ordered);
console.log(lessons.map(item => item.id));

推演与验证

结果先显示HTML forms再显示HTML basics；原数组id顺序仍为1、2、3。把查询改为不存在的词，应得到空数组而不是错误。空查询的 includes 返回 true，意味着显示全部。

常见错误与边界

默认 sort 把值按字符串比较，数字排序须提供比较函数。find 可能没有结果，读属性前先检查。正则表达式适合模式识别，但简单子串查询不需要动态拼接正则，避免特殊字符改变含义。

动手练习

计算搜索结果的总学习时长，并确保无匹配时为0。增加两个同名不同id的课程，验证两项都保留。

参考解法与理由

reduce 的初始值0明确了空数组行为。是否去重应由业务规则决定，不应因标题相同就丢弃记录。

const total = result.reduce((sum, item) => sum + item.minutes, 0);
console.log(total);

进一步阅读