javascript什么是高阶函数_map和filter如何使用【教程】

高阶函数是接收函数为参数或返回函数的函数;map要求回调必须返回值,否则填undefined,filter依据返回值真值性筛选,链式调用顺序影响结果,且需注意this绑定问题。

javascript什么是高阶函数_map和filter如何使用【教程】

高阶函数不是语法糖,而是把函数当参数传、或返回函数的函数;mapfilter 就是典型——它们不改原数组,只生成新数组,但用错就容易得到 undefined 或空数组。

为什么 map 返回一堆 undefined

因为 map 要求回调函数**必须有返回值**,漏写 return 或返回空(比如只写 console.log())就会让对应位置变成 undefined

  • ✅ 正确:[1, 2, 3].map(n => n * 2)[2, 4, 6]
  • ❌ 错误:[1, 2, 3].map(n => { n * 2 })[undefined, undefined, undefined](花括号里没 return
  • ⚠️ 注意:map 不跳过稀疏数组的空位,[1, , 3].map(x => x * 2) 返回 [2, , 6],不是 [2, 6]

filter 为什么没筛出想要的数据?

filter 只看回调返回值的“真值性”(truthy/falsy),不是非得返回 true/false;但它**不会自动过滤 nullundefined0、空字符串这些假值**——除非你显式写进条件里。

  • ✅ 显式判断:['', 'hello', null, 0].filter(s => s && typeof s === 'string')['hello']
  • ✅ 快速去假值:[0, 1, '', 'hi', null, undefined].filter(Boolean)[1, 'hi']
  • ❌ 错误假设:[0, 1, 2].filter(n => n > 0) 筛掉 0 是对的,但如果你本意是“去掉所有 falsy 值”,别依赖 n > 0 这种写法

filter 还是先 map?链式调用怎么选

顺序取决于你要表达的逻辑:想“先挑再加工”,就 filter().map();想“先加工再挑”,就 map().filter()。但后者容易出坑——比如加工后产生 undefined,再 filter 就可能误删。

绘蛙

绘蛙

电商场景的AI创作平台,无需高薪聘请商拍和文案团队,使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

立即学习Java免费学习笔记(深入)”;

  • ✅ 推荐(语义清晰 + 安全):users.filter(u => u.active).map(u => u.name)
  • ⚠️ 风险操作:users.map(u => u?.name).filter(n => n) —— 如果 unullu?.nameundefinedfilter(n => n) 会把它干掉,但你可能只是想跳过无效对象,而不是筛选名字
  • ? 性能提示:每次 mapfilter 都新建数组;大数据量时,拆成变量比嵌套链式更易调试、也更可控

真正容易被忽略的是 this 绑定问题:在严格模式下,mapfilter 的回调里 this 默认是 undefined,如果回调里用了 this.xxx 却没用箭头函数或 .bind(),它会静默失败,不报错也不生效。

https://www.php.cn/faq/2027249.html

发表回复

Your email address will not be published. Required fields are marked *