想学源码却无从下手,从历史上可能最简单的不到十行的源码开始

我正在参与掘金会员专属活动-源码共读第一期,[点击参与]

【初心】

学习源码不是为了面试,想提高代码思维,提升编码水平,开拓写代码的思路,想通过源码学习更能很好的理解原理方面的知识。

【omit.js 的使用】

omit库是一种用于JavaScript对象的简化和转换的工具库。它涉及的功能包括筛选对象的键、重新路由对象的键以及将键中的值删除。

  1. omit方法主要用于快速过滤对象或数组中的某些键
js 复制代码
// 在使用omit库之前,我们需要通过npm安装它:
npm install omit.js  或
npm i --save omit.js

【omit.js 源码解读】

js 复制代码
// eslint-disable-next-line prefer-object-spread
function omit(obj, fields) {
  // omit 可以接收两个参数,第一个参数obj:目标对象,第二个参数fields,是个数组:目标对象中将要被删除的属性 key 组成的数组
  // Object.assign() 主要用于对象的合并,浅拷贝方法
  // Object.assign({}, obj) 第一个参数是目标对象,第二个参数是源对象,将源对象合并到目标对象上。如果不改变原来对象身上的属性,用一个空对象作为目标对象
  const shallowCopy = Object.assign({}, obj);
  // for循环遍历第二个参数 fields,删除参数中的 key 值
  for (let i = 0; i < fields.length; i += 1) {
    const key = fields[i];
    delete shallowCopy[key];
  }
  return shallowCopy;
}

export default omit;

【omit.js 测试源码】

简单示例:

js 复制代码
const omit = require('omit.js');

const obj = {
  name: 'Tom',
  age: 18,
  sex: 'male'
};

const newObj = omit(obj, ['age', 'sex']); // 使用omit过滤掉逗号分隔的键名字符串keys或键名数组
console.log(newObj); //{ name: 'Tom' }
js 复制代码

【omit库提供了两个主要方法:omit和renameKeys】

  1. 拓展:renameKeys方法:该方法用于重新路由对象中的键。
js 复制代码
const {renameKeys} = require('omit.js');

const obj = {
  name: 'John',
  age: 20,
  gender: 'male'
};

const newKeys = {
  name: 'Name',
  age: 'Age'
};
// renameKeys(obj: Object, keyMap: Object): Object
const newObj = renameKeys(obj, newKeys); // renameKeys两个参数:对象。
console.log(newObj); //{ Name: 'John', Age: 20, gender: 'male' }

【总结】

1、omit源码中主要理解了

a. 定义一个浅拷贝对象 const shallowCopy = Object.assign({}, obj);

b. 遍历第二个参数,删除参数一中的 key

2、测试用例中用了断言,有点盲区,于是查阅资料了解:

单源测试中 assert.deepEqual()assert.notEqual() 两个方法,这两个方法NodeJs里

a. assert.deepEqual(): 深度相等: 基本类型的话对比值是否相等,引用类型则是对比引用类型内的属性值是否相等,并不是对比索引

b. assert.notEqual(): 浅层不相等: 期望是结果不相等,基本类型对比值是否相等,引用类型则是对比索引是否相等

3、对源码看不懂的担心减少了,增加了信心

4、学了Object.assign()的使用,顺便写了CSDN方便以后自己复盘这个方法 Object.assign()的使用

相关推荐
元思未来17 小时前
Hermes Agent 源码探秘 (6):多平台网关 — 一个 Agent 服务所有平台
agent·源码阅读
爱写代码的小任2 天前
Hermes Agent 源码解析(三):Agent 主循环 —— run_agent.py 的核心秘密
源码阅读
爱写代码的小任2 天前
Hermes Agent 源码解析(二):入口与 CLI —— 从 `hermes` 命令到交互式 REPL
源码阅读
坐吃山猪11 天前
【Hanako】README08_LEVEL4_插件系统架构
python·架构·agent·源码阅读
LienJack15 天前
《Claude Code 源码解析系列》第7章|Skill
claude·源码阅读
LienJack15 天前
《Claude Code 源码解析系列》第8章|Agent 协作
claude·源码阅读
LienJack15 天前
《Claude Code 源码解析系列》第3章|Prompt 编写
claude·源码阅读
LienJack16 天前
《Claude Code 源码解析》第2章|ReAct 主循环
claude·源码阅读
LienJack17 天前
《Claude Code 源码解析系列》第一章-工程架构
人工智能·源码阅读
倾颜24 天前
React 19 源码主线拆解 04:Fiber 到底是什么,React 为什么需要 Fiber?
前端·react.js·源码阅读