在DOM对象上设置属性时如何避免无参数重新分配

我有一个主要目的是在DOM对象上设置属性的方法

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

我使用AirBnB的代码风格，这使ESLint抛出no-param-reassign错误：

错误分配给功能参数“ el”的无参数重新分配

在符合AirBnB的代码风格的同时，如何操作作为参数传递的DOM对象？

有人建议用/* eslint react/prop-types: 0 */指的是另一个问题，但如果我没有弄错的适用以及为反应，而不是原生DOM操作。

我也不认为更改代码样式是解决方案。我相信使用标准样式的好处之一是跨项目具有一致的代码，并且随意更改规则感觉就像滥用AirBnB这样的主要代码样式一样。

作为记录，我在GitHub上问了AirBnB，他们认为在这些有争议的案例＃766中该怎么办。

正如@Mathletics建议的那样，您可以通过将其添加到文件中来完全禁用该规则.eslintrc.json：

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

或者您可以禁用专门针对参数属性的规则

"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
}

您也可以查看 有关禁用ESLint规则的博客文章，以专门适应AirBnB的样式指南。

如本文所述，此规则旨在避免使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 = {}
}

您也可以使用lodash assignIn来改变对象。 assignIn(obj, { someNewObj });

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

您可以使用更新数据的方法。例如。 我找到了解决方案，而不是“ 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;
});

您可以使用：

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

如果要更改对象数组内的任何值，可以使用

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