【lodash的omit函数详解 - 从入门到精通】

lodash的omit函数详解 - 从入门到精通

小白视角:什么是omit?

omit在英文中意为"忽略"或"省略"。在编程中,它就是从一个对象中删除不需要的属性,返回一个新对象。

// 原始对象
const person = {name: "张三", age: 30, password: "123456"};// 使用omit删除password
const safeInfo = omit(person, ['password']);
// 结果: {name: "张三", age: 30}

初级前端:基本应用场景

1. 表单数据提交

就像当前代码中的用法,提交前去除不需要传给后端的字段:

const params = {...omit(formData.value, ['password2',  // 确认密码字段不需要提交'checkAgreement',  // 只用于前端验证// 其他不需要的字段]),password,  // 加密后的密码secretToken  // 额外添加的字段
};

2. 隐藏敏感信息

const userInfo = omit(userData, ['password', 'idNumber']);

中级前端:更深入的理解

1. 自己实现一个omit

function myOmit(obj, keysToRemove) {// 方法1: 使用解构和过滤return Object.fromEntries(Object.entries(obj).filter(([key]) => !keysToRemove.includes(key)));// 方法2: 使用reduce// return Object.keys(obj).reduce((result, key) => {//   if (!keysToRemove.includes(key)) {//     result[key] = obj[key];//   }//   return result;// }, {});
}

2. 性能考量

针对项目中的注册表单,分析不同方法的优劣:

// 方式1:使用omit (当前代码使用)
const params = {...omit(formData.value, ['password2', 'checkAgreement', /* 其他字段 */]),password,secretToken
};// 方式2:手动解构
const { password2, checkAgreement, smsCode, ...rest } = formData.value;
const params = {...rest,password,secretToken
};// 方式3:手动构造
const params = {operatorName: formData.value.operatorName,operatorId: formData.value.operatorId,// ... 列出所有需要的字段password,secretToken
};

方式1代码最清晰,方式2在字段少时效率最高,方式3最繁琐但最明确。

高级前端:深入源码与最佳实践

1. lodash-es的omit源码精髓

lodash的omit实际上是先通过baseClone创建一个浅拷贝,然后利用内部的basePick函数实现。它处理了大量边界情况,比如属性描述符、Symbol键、原型链等。

2. 树摇优化考量

使用lodash-es而非lodash的好处是支持树摇,只会打包你使用的函数:

// 推荐: 只引入需要的函数
import { omit } from 'lodash-es';// 不推荐: 引入全部
import _ from 'lodash';

3. 高性能场景中的取舍

当处理大型对象或频繁操作时,考虑这些替代方案:

// 1. 使用Object.create保留原型链
function fastOmit(obj, keys) {const result = Object.create(Object.getPrototypeOf(obj));for (const key in obj) {if (!keys.includes(key) && Object.prototype.hasOwnProperty.call(obj, key)) {result[key] = obj[key];}}return result;
}// 2. 使用Map/Set优化查找
function optimizedOmit(obj, keys) {const keysSet = new Set(keys);return Object.fromEntries(Object.entries(obj).filter(([key]) => !keysSet.has(key)));
}

4. TypeScript类型安全版本

function omit<T extends object, K extends keyof T>(obj: T, keys: K[]
): Omit<T, K> {const result = { ...obj };keys.forEach(key => delete result[key]);return result;
}

通过对表单处理这个场景深入思考,omit不仅是一个工具函数,更体现了函数式编程中数据不可变性的思想,以及前端开发中数据转换和适配的核心理念。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/77140.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考笔记9——数据库技术基础

第九章节——数据库技术基础 数据库技术基础 第九章节——数据库技术基础一、基本概念1. 数据库与数据库系统2. 数据库的三级模式2.1 内模式2.2 概念模式2.3 外模式2.4 数据库的两级映射2.5 数据库设计的基本步骤 二、数据模型1. 基本概念2. E-R模型2.1 实体2.2 联系2.3 属性 3…

Django分页教程及示例

推荐超级课程: 本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 完整代码示例:结论Django的分页模块允许你将大量数据分割成更小的块(页面)。这对于以可管理的方式显示项目列表,如博客文章或产品…

int 与 Integer 的区别详解

1. 本质区别 特性intInteger类型基本数据类型&#xff08;Primitive&#xff09;包装类&#xff08;Wrapper Class&#xff09;存储位置栈&#xff08;或作为对象成员在堆中&#xff09;堆&#xff08;对象实例&#xff09;默认值0null&#xff08;可能导致 NullPointerExcept…

mariadb使用docker compose方式安装

问题 本地mac m1上面的mysql和mariadb突然不用使用了&#xff0c;重新安装也不想&#xff0c;最近mac系统也更新了&#xff0c;brew也更新了&#xff0c;重新安装mariadb还是不能正常使用&#xff0c;现在我打算使用docker来安装本地的mariadb了。 默认配置文件my.cnf 从容器…

基于React + Antd + Java的OFD文件上传预览实现方案(OFD文件转图片)

一、前端实现方案(React + Antd) import React, {useState } from react; import {Upload, Button, Image, Carousel } from antd; import {UploadOutlined } from @ant-design/icons;const OFDUploadPreview = () => {const [previewImages, setPreviewImages] = useSta…

从零构建大语言模型全栈开发指南:第四部分:工程实践与部署-4.3.1LangChain与Dify平台实战:从RAG到Agent工作流

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 LangChain与Dify平台实战:从RAG到Agent工作流 - 4.3.1 LangChain与Dify平台实战:从RAG到Agent工作流1. LangChain核心组件与RAG架构设计1.1 LangChain核心模块1.2 RAG架构实现流程2. RAG实战:企业知识…

操作 Office Excel 文档类库Excelize

Excelize 是 Go 语言编写的一个用来操作 Office Excel 文档类库&#xff0c;基于 ECMA-376 OOXML 技术标准。可以使用它来读取、写入 XLSX 文件&#xff0c;相比较其他的开源类库&#xff0c;Excelize 支持操作带有数据透视表、切片器、图表与图片的 Excel 并支持向 Excel 中插…

R Excel 文件:高效数据处理与可视化工具的完美结合

R Excel 文件&#xff1a;高效数据处理与可视化工具的完美结合 引言 在数据分析和处理领域&#xff0c;R语言因其强大的数据处理能力和丰富的可视化功能而备受青睐。而Excel作为最常用的电子表格软件&#xff0c;其广泛的应用也使得R与Excel的结合成为数据处理与可视化的理想…

[ctfshow web入门] 零基础版题解 目录(持续更新中)

ctfshow web入门 零基础版 前言 我在刷题之前没有学过php&#xff0c;但是会python和C&#xff0c;也就是说&#xff0c;如果你和我一样会一门高级语言&#xff0c;就可以开始刷题了。我会以完全没学过php的视角来写题解&#xff0c;你也完全没有必要专门学习php&#xff0c;这…

linux第三次作业

1、将你的虚拟机的网卡模式设置为nat模式&#xff0c;给虚拟机网卡配置三个主机位分别为100、200、168的ip地址 2、测试你的虚拟机是否能够ping通网关和dns&#xff0c;如果不能请修改网关和dns的地址 3、将如下内容写入/etc/hosts文件中&#xff08;如果有多个ip地址则写多行&…

如何开发 HTML 游戏

开发 HTML 游戏适合初学者学习编程和游戏开发的基础知识。HTML 游戏通常结合了 HTML、CSS 和 JavaScript 技术&#xff0c;利用浏览器的渲染能力来实现交互式的游戏体验。 1. 确定游戏类型 在开始开发之前&#xff0c;你需要明确你的游戏类型。例如&#xff1a; 简单游戏&…

我的NISP二级之路-02

目录 一.数据库 二.TCP/IP协议 分层结构 三.STRIDE模型 四.检查评估与自评估 检查评估 自评估 五.信息安全应急响应过程 六.系统工程 七.SSE-CMM 八.CC标准 九.九项重点工作 记背: 一.数据库 关于数据库恢复技术&#xff0c;下列说法不正确的是&#xff1a…

结构化需求分析:专业方法论与实践

结构化需求分析是一种用于软件开发或其他项目中的系统分析方法&#xff0c;旨在全面、准确地理解和描述用户对系统的需求。以下是关于结构化需求分析的详细介绍&#xff1a; 一、概念 结构化需求分析是采用自顶向下、逐步分解的方式&#xff0c;将复杂的系统需求分解为若干个…

windows10安装配置并使用Miniconda3

windows10安装配置并使用Miniconda3 Conda 与 Anaconda 的区别 Conda 是包管理和环境管理工具&#xff0c;Anaconda 在 Conda 的 基础上预装了大量科学计算包 Conda 与 pip 的区别 Conda 是跨语言的包和环境管理器&#xff08;支持 Python/R 等&#xff09;&#xff0c;能安…

PyTorch中的Flatten

在 PyTorch 中&#xff0c;Flatten 操作是将多维张量转换为一维向量的重要操作&#xff0c;常用于卷积神经网络(CNN)的全连接层之前。以下是 PyTorch 中实现 Flatten 的各种方法及其应用场景。 一、基本 Flatten 方法 1. 使用 torch.flatten() 函数 import torch# 创建一个4…

Spring Boot + MyBatis + Maven论坛内容管理系统源码

项目描述 xxxForum是一个基于Spring Boot MyBatis Maven开发的一个论坛内容管理系统&#xff0c;主要实现了的功能有&#xff1a; 前台页面展示数据、广告展示内容模块&#xff1a;发帖、评论、帖子分类、分页、回帖统计、访问统计、表单验证用户模块&#xff1a;权限、资料…

探索AI编程规范化的利器:Awesome Cursor Rules

在AI辅助编程逐渐成为开发者标配的今天,如何让AI生成的代码既符合项目规范又保持高质量,成为开发者面临的新挑战。GitHub仓库**awesome-cursorrules**正是为解决这一问题而生的开源项目,它通过系统化的规则模板库,重新定义了AI编程的规范边界。本文将深入解析这一工具的核心…

AnimateCC基础教学:json数据结构的测试

一.核心代码: const user1String {"name": "张三", "age": 30, "gender": "男"}; const user1Obj JSON.parse(user1String); console.log("测试1:", user1Obj.name, user1Obj.age, user1Obj.gender);/*const u…

阿里云域名证书自动更新acme.sh

因为阿里云的免费证书只有三个月的有效期&#xff0c;每次更换都比较繁琐&#xff0c;所以找到了 acme.sh&#xff0c;还有一种 certbot 我没有去了解&#xff0c;就直接使用了 acme.sh 来更新证书&#xff0c;acme.sh 的主要特点就是&#xff1a; 支持多种 DNS 服务商自动化续…

PDF 中提取数学公式

✅ 方法一&#xff1a;使用 doc2x extract_formula_imgs Pix2Text 一键运行脚本&#xff08;自动提取识别&#xff09; &#x1f449; 适合你如果用 Python 的话&#xff0c;只需要运行一段脚本即可&#xff1a; ✅ &#x1f501; 一步搞定脚本&#xff08;仅需安装一次&…