01准备一组数据
数组适合保存有顺序的一组数据。实际开发中,列表通常由多个对象组成。先准备两个任务,分别包含标题、完成状态和预计耗时。
const tasks = [
{ title: "学习 HTML", done: true, hours: 2 },
{ title: "练习 CSS", done: false, hours: 3 }
];02用 map 转换内容
map 会为每个元素调用函数,并将返回值组成新数组。它适合提取字段或生成新的数据结构。下面提取任务标题,原始 tasks 数组不会被这个操作直接改写。
const titles = tasks.map(task => task.title);
// ["学习 HTML", "练习 CSS"]03用 filter 筛选记录
filter 保留满足条件的元素。回调返回 true 时,元素进入新数组。筛选结果中的对象仍与原数组共享引用,因此修改对象属性时仍需留意影响。
const pending = tasks.filter(task => !task.done);
// 只保留未完成的任务04用 reduce 汇总数据
reduce 将每一步的结果传递到下一步。求和时明确提供初始值 0,可以让空数组也得到合理结果。练习时可以先筛选未完成任务,再统计它们的预计耗时。
const totalHours = tasks.reduce(
(total, task) => total + task.hours,
0
);
// 5— 学以致用,从一个小练习开始 —