この記事は、パブリックアカウント@ RuoChuanVisionによって 開始された毎週のソースコード読み取りアクティビティ に参加しました。詳細についてはクリックして一緒に参加してください。これは、ソースコードの読み取りの36番目の問題 です。

オブジェクトが使用されているが、オブジェクトのプロパティの1つが必須ではないシナリオが発生します。jsの開発と使用の経験がある人として、オブジェクトのプロパティを削除する方法を尋ねるとき、私たちは皆、削除を考えます。ただし、削除後、オブジェクトにはそのようなプロパティはありません。したがって、解決策は次のとおりです。使用されているオブジェクトのすべてのプロパティをコピーしますが、使用されていないオブジェクトのプロパティはコピーしません。このような文は、コード内の多くの行に対応しています。使用するツールメソッドが作成されていれば非常に嬉しいです〜omit.jsがこれを行います！その使い方とソースコードを一緒に学ぼう〜

1.準備

クローンコード

https://github.com/benjycui/omit.js

省略とは何か知っていますか？

一部のフィールドを削除したオブジェクトの浅いコピーを作成するためのユーティリティ関数です。

var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }

数字の外：省略という言葉に初めて出会ったとき、それが何を意味するのか本当にわかりません。意味は次の図に示されています。

この記事を読むことができます。廃止、キャンセル、削除、省略の共通点は何ですか。より多くの語彙の説明のためにそれらを並べ替えることができますか。省略のソースコードを見てみましょう：

2.ソースコードの解釈

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の浅いコピーを作成します。（注：このブロックでは、パラメーターをチェックせずに、デフォルトでオブジェクトを渡します。try... catchまたは対応する例外処理ロジックがありません）

fields配列をトラバースし、オブジェクトのプロパティを1つずつ削除します。（注：ファイルを強制的に配列にするのは良くないと思います。使用時に属性を削除したい場合があります。文字列をサポートするのが最適です。文字列の場合は、この文字列を属性として削除してください。。）

Object.assignが浅いコピーであることを確認しましょう。次の図を参照してください。

如上图所示，使用Object.assign将obj的属性复制给obj2, 其中obj的属性c是数组，属于引用类型的数据。当修改obj时，我们发现obj2的c属性也发生变化了。所以Object.assign()方法是一个对象的浅拷贝方法。omit的源码可以说非常简单，但是package.json中的一些npm包还是挺有学习价值的，我们来简单了解一下：

3.npm包积累

father: Library toolkit based on rollup, docz, storybook, jest, prettier and eslint。

在omit.js的package.json文件中的好几个 npm script都有用到father,例如：

"start": "father doc dev --storybook",
"build": "father doc build --storybook",
"compile": "father build",
"gh-pages": "father doc deploy",

能够看到father又能打包编译又能生成文档，下图是执行run start命令的执行结果：

storybook： Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation。（引自：storybook.js.org/）

我们执行run start之所以能够把readme.md显示在浏览器中就又storybook的功劳。

assert: The assert module from Node.js, for the browser. 所以使用方法还是要看nodejs.org/api/assert.…

在omit.js的tests/index.test.js中使用assert进行测试用例的书写：

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

umi-fabric：prettier、eslint、stylelintを含む構成ファイルのコレクション

omit.jsの.eslintrc.jsファイルの内容は次のとおりです。

const base = require('@umijs/fabric/dist/eslint');

module.exports = {
  ...base,
  rules: {
    ...base.rules,
    'no-template-curly-in-string': 0,
    'prefer-promise-reject-errors': 0,
    'react/no-array-index-key': 0,
    'react/sort-comp': 0,
    'import/no-named-as-default': 0,
    'import/no-named-as-default-member': 0,
  },
};

umijs / fabricにはいくつかのルールがあり、独自のルールを補足したり、使用時にいくつかのルールをオーバーライドしたりできることがわかります。

np：より良いnpm公開

次のようにomit.jsで使用されるnmpパッケージの公開を支援します。

"prepublishOnly": "npm run compile && np --yolo --no-publish",

最初にコンパイル（実際にはfather-build）を実行し、次にnpを使用します。次の図は操作の結果です。

間違いなく失敗しました。gitpushtagsの権限があります。

rc-tools：reactコンポーネント用のオフラインツール

どこに役立つのかわかりません。

これまでのところ、omit.jsは終了していますが、プロジェクトでどのように使用できますか？下記参照：

4.適用することを学ぶ

次のコードのように、コードにdeleteを書くことがよくあると思います。

try {
  const param = JSON.parse(JSON.stringify(this.form))
  delete param.lonLat
  await createCarStore({
    ...param,
  });
  this.$message.success('提交成功！');
  this.$router.go(-1);
} catch (error) {
  this.$message.error(error.data.remark);
}

omit.jsを使用すると、次のように記述できます。

try {
  const param = omit(this.form, ['lonLat'])
  await createCarStore({
    ...param,
  });
  this.$message.success('提交成功！');
  this.$router.go(-1);
} catch (error) {
  this.$message.error(error.data.remark);
}

2本の線が1本の線になります。

5.まとめ

この問題のソースコードを学習した後、作成者には次のような利点があります。

Object.assginメソッドを確認し、ディープコピーとシャローコピーの理解を深めました
父や童話などのnpmパッケージの使用について学ぶ
npmパッケージを公開する方法を学びました
省略.jsを使用してプロジェクトコードを最適化できます

ナゲッツテクノロジーコミュニティのクリエイター署名プログラムの募集に参加しています。リンクをクリックして登録し、送信してください。

なぜomit.jsは削除オブジェクトのプロパティをツールメソッドとしてカプセル化するのですか？

1.準備

2.ソースコードの解釈

3.npm包积累

4.適用することを学ぶ

5.まとめ

おすすめ