[源码共读] 第 36 期 | omit.js 剔除对象中的属性

Janus_
65 阅读2分钟

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

这是源码共读的第 36 期 | 可能是历史上最简单的一期 omit.js 剔除对象中的属性，点击了解本期详情一起参与。

1. 什么是 Omit.js ?

删除对象某些属性，并返回浅拷贝副本。

2. package.json

{
  "name": "omit.js",
  "version": "2.0.2",
  "description": "Utility function to create a shallow copy of an object which had dropped some fields.",
  "main": "lib/index.js",   // 定义 npm 包的入口文件
  "module": "es/index.js",  // 定义 npm 包的 ESM 规范的入口文件
  "types": "index.d.ts",    // typeScript 声明文件，同 typings
  "files": [                // 指定打包后发布到 npm 的文件
    "lib",
    "es",
    "dist",
    "index.d.ts"
  ],
  "scripts": {
    "start": "father doc dev --storybook",	// 开发环境下构建文档
    "build": "father doc build --storybook",	// 编译打包并生成文档
    "compile": "father build",							// 编译打包
    "gh-pages": "father doc deploy",
    "prepublishOnly": "npm run compile && np --yolo --no-publish",  // 发布包
    "lint": "eslint .",
    "test": "father test",  // 运行测试用例
    "coverage": "father test --coverage"  // 测试覆盖率
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/benjycui/omit.js.git"
  },
  "keywords": [
    "object",
    "omit"
  ],
  "author": "Benjy Cui<benjytrys@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/benjycui/omit.js/issues"
  },
  "homepage": "https://github.com/benjycui/omit.js#readme",
  "devDependencies": {
    "@umijs/fabric": "^2.2.2",
    "assert": "^1.4.1",
    "eslint": "^7.4.0",
    "father": "^2.29.5",
    "np": "^6.3.1",
    "rc-tools": "^6.3.3"
  }
}

Father

方便使用者构建组件库，为组件提供打包功能。

umi-fabric

github.com/umijs/fabri…

一个包含 prettier，eslint，stylelint 的配置文件合集

np

协助 npm 包发布。

assert

node.js 的断言库，用于写测试用例。

3. 核心代码

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() 为 ES6 对象新增特性，Object.assign({}, obj)为浅拷贝，效果相当于拓展运算符{...obj}。

遍历第二个数组参数，依次删除对象中的属性。

4. 单元测试

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']), {});
  });
});

之前在廖雪峰的 JavaScript 教程里学过 node，里面就有写测试，虽然学了没用过，但是还是能看懂。

5. 总结

  • 作为源码共读的开始，本期并不难，循序渐进地更有利于学习。
  • 刚开始不知道要看什么，看了其他同学的笔记学习了很多👍。
  • 很少用到调试，很不熟练，在接下来的源码共读里要多学习多使用✊。
avatar
文章
阅读
粉丝