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

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

【初心】

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

【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()的使用

相关推荐
callmeSoon6 天前
Vue2 模板编译三部曲(三)|生成器 Generator
vue.js·源码阅读
Tans56 天前
Java ReentrantLock 源码阅读笔记(上)
java·源码阅读
程序猿阿越9 天前
ChaosBlade源码(一)blade命令行
java·后端·源码阅读
码农明明16 天前
Android源码分析:从源头分析View事件的传递
android·操作系统·源码阅读
欧阳码农2 个月前
vue3的defineAsyncComponent是如何实现异步组件的呢?
vue.js·源码·源码阅读
鳄鱼不怕_牙医不怕2 个月前
Flutter 源码梳理系列(三十七):OffsetLayer
flutter·源码阅读
鳄鱼不怕_牙医不怕2 个月前
Flutter 源码梳理系列(三十六):RenderObject:PAINTING
flutter·源码阅读
鳄鱼不怕_牙医不怕2 个月前
Flutter 源码梳理系列(三十四):ContainerLayer
flutter·源码阅读
鳄鱼不怕_牙医不怕2 个月前
Flutter 源码梳理系列(三十一):PaintingContext
flutter·源码阅读
callmeSoon2 个月前
Vue2 模板编译三部曲(一)|架构设计 & 解析器 Parser
vue.js·源码阅读