源码共读 omit.js

142 阅读2分钟

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

前言

从易到难开始学习源码。学习源码不是为了面试,只是想揭开别人造的轮子背后的神秘面纱。同时也希望在此过程中提升自己的能力和开拓视野。

omit.js 的使用

omit.js 剔除对象中的属性

omit.js 的使用肯定是先安装了, 这里使用的 vite(使用 vue-cli 也是一样的步骤)。

npm install -S omit.js 
或
pnpm install -S omit.js

在文件中使用

import omit from 'omit.js';

const data = { name: 'Benjy', age: 18 };
const result= omit(data, ['name']);
console.log('data&result: ', data, result);

使用起来很简单,data 返回的是原对象,result 返回的是剔除后的对象,具体实现就来看一下源码。

omit.js 的源码

我现在从 omit.js 上把源码粘贴过来

function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  const 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;

可以看到这里先使用了 Object.assign 将 obj 深拷贝。然后循环要剔除的字段,通过delete删除深拷贝对象上的字段,最后返回深拷贝对象。

总结

最后解释下 Object.assign,其实说 Object.assign 是深拷贝是不准确的。在我们 javascript 中,数据类型分为基础类型和引用类型:基础类型(Number, String, Boolean, Undefind, Null, Symbol)直接存储于栈中,引用类型(Object…)栈中存储指向存储在堆中的对象的指针。

Object.assign 拷贝的是属性值。如果对象下是基础类型,那么 Object.assign 就是深拷贝。如果对象下的属性值是引用类型,则拷贝的是对象的指针,那么此时 Object.assign 就是浅拷贝了。

以上是我们对 omit.js 这个方法的阅读和使用,以及额外的理解,如果有什么不对的地方,还请指正!