关于我看不到十行的 omit.js 源码

前言

今天工作结束得早，趁着还有时间，来研究一下源码。经过“深思熟虑”，最终选择学习 omit 的源码。不过这是我之前从未接触过的一个东西，今天好好研究研究。

omit 介绍

什么是 omit 呢？这个听起来很陌生的东西有什么作用呢？经过几番查询资料得知，omit 可以将前面参数中后面的属性过滤掉。其实这么一看我当时还并不能完全理解这是什么意思，于是就去查看了一下它的源码部分。

源码解读

还是和之前一样，找到 package.json，然后可以看出 omit 源码在 src/index.js 文件中。代码比较简短，才不到十行。源码部分如下：

function omit(obj, fields) {// eslint-disable-next-line prefer-object-spreadconst shallowCopy = Object.assign({}, obj);for (let i = 0; i < fields.length; i += 1) {const key = fields[i];delete shallowCopy[key];}return shallowCopy;
}
export default omit; 

整体阅读下来很轻松。首先 omit 可以接收两个参数，第一个参数是目标对象，在源码里用 obj 表示，第二个参数是目标对象中将要被删除的属性 key 组成的数组，在源码中用 fields 表示。

然后就使用到了 Object.assign() 方法，该方法用于将所有可枚举属性的值从一个或多个源对象 sources 分配到目标对象 target，并返回目标对象。这么解释也比较抽象，简单点理解就是它可以用来复制对象的可枚举属性到目标对象。在这里调用这个方法发挥的作用是定义一个浅拷贝对象。

最后就开始遍历第二个参数 fields，删除参数中的 key 值。

这就是整个 omit 源码部分的流程。看完之后是不是很简单。我研读了一下源码后，也明白了这个东西的作用了。

测试源码

来看看测试用例吧。测试部分源码如下：

import assert from 'assert';
import omit from '../src';
describe('omit', () => {it('should create a shallow copy', () => {const benjy = { name: 'Benjy' };const copy = omit(benjy, []);assert.deepEqual(copy, benjy); // 通过assert.notEqual(copy, benjy); // 通过});it('should drop fields which are passed in', () => {const benjy = { name: 'Benjy', age: 18 };assert.deepEqual(omit(benjy, ['age']), { name: 'Benjy' });assert.deepEqual(omit(benjy, ['name', 'age']), {});});
}); 

在测试用例中引入了 assert 包，指的是断言测试，就是当不满足条件时就会抛出错误。

总结

简单来说，omit 作用是剔除对象中的属性，或者说删除对象中的属性。有时候碰到自己没有接触的东西，去看看源码或许能豁然开朗，前提是它不是很复杂的源码。

在阅读源码的过程，多多少少会遇到看不懂的问题。但是这都没关系，比如像我一样，碰到看不懂的就先放在那里，先将整体看完，看完之后还不会就去查阅资料。就比如这次源码中的 Object.assign() 方法，最开始我也是不知道它是用来干什么的，但是当看到后面使用了 delete 方法后我大致猜了一下它可能和对象有关，最后查阅资料也确实如此，在这里是发挥了定义一个浅拷贝对象的作用。

因此，大胆猜测，多看源码，定有收获。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享