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

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

小白视角:什么是omit?

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

js 复制代码
// 原始对象
const person = {name: "张三", age: 30, password: "123456"};

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

初级前端:基本应用场景

1. 表单数据提交

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

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

2. 隐藏敏感信息

js 复制代码
const userInfo = omit(userData, ['password', 'idNumber']);

中级前端:更深入的理解

1. 自己实现一个omit

js 复制代码
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. 性能考量

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

js 复制代码
// 方式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的好处是支持树摇,只会打包你使用的函数:

js 复制代码
// 推荐: 只引入需要的函数
import { omit } from 'lodash-es';

// 不推荐: 引入全部
import _ from 'lodash';

3. 高性能场景中的取舍

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

js 复制代码
// 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类型安全版本

ts 复制代码
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不仅是一个工具函数,更体现了函数式编程中数据不可变性的思想,以及前端开发中数据转换和适配的核心理念。

相关推荐
烛阴40 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子43 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹3 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
ningmengjing_3 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
晓13133 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
灋✘逞_兇4 小时前
Node.Js是什么?
服务器·javascript·node.js
小飞悟5 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试