便捷蛙教程首页 ↗
← 返回教程列表
JavaScript

掌握 JavaScript 数组的三个常用方法

通过一个待办清单,理解 map、filter 和 reduce 分别解决什么问题。

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
— 学以致用,从一个小练习开始 —