在 DOM 對象上設置屬性時如何避免無參數重新分配

Question

我有一個主要目的是在 DOM 對象上設置屬性的方法

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

我使用 AirBnB 的代碼風格，這使得 ESLint 拋出no-param-reassign錯誤：

錯誤分配給函數參數 'el' no-param-reassign

如何在符合 AirBnB 的代碼風格的同時操作作為參數傳遞的 DOM 對象？

有人建議使用/* eslint react/prop-types: 0 */指的是另一個問題，但如果我沒記錯的話，這適用於 react，但不適用於原生 DOM 操作。

我也不認為改變代碼風格是一個答案。 我相信使用標准風格的好處之一是在項目中擁有一致的代碼，隨意更改規則感覺就像濫用了像 AirBnB 這樣的主要代碼風格。

作為記錄，我在 GitHub 上詢問了 AirBnB，他們認為在 issue #766中這些情況下的方法是什么。

Answer 1

正如@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
}

Answer 2

正如本文所解釋的，此規則旨在避免改變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 }]方法來解決提到的其他幾個答案。 修改參數的屬性不會改變該參數所指的內容，也不應該遇到此規則試圖避免的問題。

Answer 3

您可以在.eslintrc文件中覆蓋此規則，並為這樣的 param 屬性禁用它

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

這種方式規則仍然有效，但不會對屬性發出警告。 更多信息： http : //eslint.org/docs/rules/no-param-reassign

Answer 4

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
});

Answer 5

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

其他一切都只是丑陋的黑客。

Answer 6

那些希望有選擇地停用此規則的人可能會對no-param-reassign規則的擬議新選項感興趣，該選項將允許對象名稱的“白名單”與應忽略哪些參數重新分配有關。

Answer 7

按照文檔：

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

Answer 8

如果您真的不想禁用規則，則更新的替代方案可能是這樣的：

function (el) {
  Object.defineProperty(el, 'expando',{
    value: {},
    writable: true,
    configurable: true,
    enumerable: true
  });
}

參考： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Answer 9

您還可以使用 lodash assignIn來改變對象。 assignIn(obj, { someNewObj });

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

Answer 10

您可以使用方法來更新數據。 例如。 “res.status(404)”而不是“res.statusCode = 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;
});

Answer 11

根據 eslint ( https://eslint.org/docs/2.0.0/rules/no-param-reassign ) 上的文檔，我使用.eslintrc.js文件中的以下書面配置解決了它。

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

Answer 12

您可以使用：

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