【Lodash】 Filter 与Map 的结合使用

用Filter过滤数据之后,想给某个字段重新赋值

在使用 `filter()` 方法过滤数据后,如果你想给某个字段赋值,你可以使用 `map()` 方法来修改数组中的元素。`map()` 方法可以对数组中的每个元素应用一个函数,并返回一个新的数组。

以下是一个示例代码,演示了如何在过滤数据后给某个字段赋值:

javascript 复制代码
const items = [

  { id: 1, name: 'Apple', price: 1.5 },

  { id: 2, name: 'Orange', price: 2.0 },

  { id: 3, name: 'Banana', price: 1.0 },

  { id: 4, name: 'Grapes', price: 2.5 },

];



const filteredItems = items

  .filter(item => item.price > 1.5) // 过滤价格大于 1.5 的项目

  .map(item => ({ ...item, discounted: true })); // 给过滤后的项目添加一个字段 "discounted"



console.log(filteredItems);

上述代码会在过滤数据后,给符合条件的项目添加一个名为 "discounted" 的字段,并将其值设置为 `true`。最终输出的 `filteredItems` 数组将包含符合过滤条件的项目,并且每个项目都会具有新添加的 "discounted" 字段。需要注意的是,这里使用了对象扩展操作符 `{ ...item }` 来克隆原始项目对象,以便修改其属性。

相关推荐
胡萝卜术8 小时前
当大模型遇上浏览器:用 React + WebGPU 在前端跑通 DeepSeek-R1 的实战笔记
前端·javascript·面试
不好听6138 小时前
Tailwind CSS 原子化 CSS 完全入门:为什么现代前端开发都在用?
前端·css
人间凡尔赛8 小时前
Next.js 16 生产级实战:Cache Components + View Transitions 完整指南
开发语言·javascript·ecmascript
触底反弹8 小时前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
why技术9 小时前
分享一套我一直在使用的 AICoding 组合拳,小而美的典范。
前端·后端·ai编程
朦胧之9 小时前
AI应用-消费流式输出
前端·javascript·ai编程
小林ixn9 小时前
在浏览器跑通 15 亿参数大模型:我用 React + WebGPU 复刻了 DeepSeek-R1
前端·react.js·前端框架
Csvn10 小时前
容器查询 @container 实战:告别无休止的媒体查询
前端
谷哥的小弟12 小时前
TypeScript对象类型
javascript·typescript
稚南城才子,乌衣巷风流12 小时前
函数:编程中的核心概念
开发语言·前端·javascript