DOMオブジェクトのプロパティを設定するときにno-param-reassignを回避する方法

DOMオブジェクトにプロパティを設定することを主な目的とするメソッドがあります

function (el) {
  el.expando = {};
}

ESLintにno-param-reassignエラーをスローさせるAirBnBのコードスタイルを使用します。

エラー関数パラメーター 'el'への割り当てno-param-reassign

AirBnBのコードスタイルに準拠しながら、引数として渡されたDOMオブジェクトを操作するにはどうすればよいですか？

誰かが別の問題/* eslint react/prop-types: 0 */を参照することを使用することを提案しましたが、私が間違っていない場合、これは反応には当てはまりますが、ネイティブDOM操作には当てはまりません。

また、コードスタイルを変更するのは正解ではないと思います。標準スタイルを使用する利点の1つは、プロジェクト間で一貫したコードがあり、ルールを自由に変更できることは、AirBnBのような主要なコードスタイルの誤用のように感じることだと思います。

参考までに、私はGitHubでAirBnBに質問しました。彼らは、問題＃766でこれらのケースに行く方法を彼らがどう思うかを尋ねました。

@Mathleticsが示唆するように、これをファイルに追加することでルールを完全に無効にすることができ.eslintrc.jsonます：

"rules": {
  "no-param-reassign": 0
}

または、特にparamプロパティのルールを無効にすることもできます

"rules": {
  "no-param-reassign": [2, { "props": false }]
}

または、その関数のルールを無効にすることもできます

/* eslint-disable no-param-reassign */
function (el) {
  el.expando = {};
}
/* eslint-enable no-param-reassign */

またはその行のみ

function (el) {
  el.expando = {}; // eslint-disable-line no-param-reassign
}

また、 AirBnBのスタイルガイドに対応するために、ESLintルールを無効にすることに関するこのブログ投稿を確認することもできます。

この記事では説明して、このルールは、変異を避けることを意図しているargumentsオブジェクトを。パラメータに割り当ててから、argumentsオブジェクトを介して一部のパラメータにアクセスしようとすると、予期しない結果が生じる可能性があります。

別の変数を使用してDOM要素への参照を取得し、それを変更することで、ルールをそのまま維持し、AirBnBスタイルを維持できます。

function (el) {
  var theElement = el;
  theElement.expando = {};
}

JSでは、オブジェクト（DOMノードを含む）は参照によって渡されるため、ここelでtheElementは同じDOMノードへの参照ですが、変更theElementしてもargumentsオブジェクトは変更されませんarguments[0]。そのDOM要素への参照が残っているだけだからです。

このアプローチは、ルールのドキュメントで示唆されています：

このルールの正しいコードの例：

/*eslint no-param-reassign: "error"*/

function foo(bar) {
    var baz = bar;
}

個人的には、私はこの"no-param-reassign": ["error", { "props": false }]アプローチを他のいくつかの答えに言及しただけで使用します。パラメータのプロパティを変更しても、そのパラメータの参照内容は変更されず、このルールが回避しようとしている種類の問題に遭遇してはなりません。

このルールを.eslintrcファイル内でオーバーライドして、このようなparamプロパティに対して無効にすることができます

{
    "rules": {
        "no-param-reassign": [2, { 
            "props": false
        }]
    },
    "extends": "eslint-config-airbnb"
}

このように、ルールはまだアクティブですが、プロパティについて警告しません。詳細：http : //eslint.org/docs/rules/no-param-reassign

このno-param-reassign警告は一般的な関数には意味がArray.forEachありますが、変更する予定の配列に対する従来のループでは適切ではありません。

ただし、これを回避するためArray.mapに、新しいオブジェクトを使用することもできます（私のような場合は、コメント付きの警告のスヌーズを嫌います）。

someArray = someArray.map((_item) => {
    let item = Object.assign({}, _item); // decouple instance
    item.foo = "bar"; // assign a property
    return item; // replace original with new instance
});

function (el) {
  el.setAttribute('expando', {});
}

他のすべてはただ醜いハックです。

選択的に、このルールを無効にしたい方は、に興味があるかもしれない提案された新しいオプションのためのno-param-reassignパラメータ再割り当てを無視すべきに関しては、オブジェクト名の「ホワイトリスト」を可能とするルール。

ドキュメントに従って：

function (el) {
  const element = el
  element.expando = {}
}

assignInオブジェクトを変更するlodash を使用することもできます。 assignIn(obj, { someNewObj });

https://lodash.com/docs/4.17.2#assignIn

データを更新するためのメソッドを使用できます。例えば。「res.statusCode = 404」の代わりに「res.status（404）」 解決策を見つけました。https://github.com/eslint/eslint/issues/6505#issuecomment-282325903

/*eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["$scope"] }]*/

app.controller('MyCtrl', function($scope) {
  $scope.something = true;
});

以下を使用できます。

(param) => {
  const data = Object.assign({}, param);
  data.element = 'some value';
}

オブジェクト配列内の値を変更したい場合は、

array.forEach(a => ({ ...a, expando: {} }))