Question

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

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

我使用AirBnB的代码样式，这会让ESLint抛出no-param-reassign错误：

错误分配到功能参数＆＃39; el＆＃39;无PARAM-重新分配

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

有人建议使用/* eslint react/prop-types: 0 */来引用another issue，但如果我没有弄错，这适用于反应，但不适用于原生DOM操作。

另外，我不认为改变代码风格是一个答案。我相信使用标准样式的好处之一是在项目中使用一致的代码，并且随意更改规则就像滥用AirBnB等主要代码样式一样。

为了记录，我在GitHub上询问了AirBnB，他们认为在这些情况下他们认为是in issue #766。

Answer 1

正如@Mathletics建议的那样，您可以disable the rule完全将其添加到.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
}

您还可以查看此blog post，专门禁用ESLint规则以适应AirBnB的样式指南。

Answer 2

作为this article explains，此规则旨在避免改变arguments object。如果您指定参数然后尝试通过arguments对象访问某些参数，则可能会导致意外结果。

您可以保持规则不变并通过使用另一个变量来获取对该元素的引用来维护AirBnB样式，然后修改它：

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

在JS对象（包括DOM节点）中通过引用传递，因此el和theElement是对同一DOM节点的引用，但修改theElement不会改变{ {1}}对象，因为arguments仍然只是对该DOM元素的引用。

这种方法在documentation for the rule：

中暗示

此规则的正确代码示例：

arguments[0]

就个人而言，我只会使用/*eslint no-param-reassign: "error"*/ function foo(bar) { var baz = bar; }方法提到其他几个答案。修改参数的属性不会改变该参数引用的内容，也不应该遇到此规则试图避免的各种问题。

Answer 3

您可以在.eslintrc文件中覆盖此规则，并为此类

等参数属性禁用它

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

那些希望有选择地停用此规则的人可能会对no-param-reassign规则感兴趣= CHOOSE((C5="us")+4*(C5="NIFA")+7*(C5="West")+(I5="C")+2*(I5="V")+3*(I5="F")-1,1000,2500,2500,1000,2500,2500,1000,2000,2000)规则，该规则允许＆＃34;白名单＆＃34;关于应该忽略哪个参数重新分配的对象名称。

Answer 6

如果你真的不想禁用规则，一个更新的替代方法可能是这样的：

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 7

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

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

Answer 8

~~您可以使用方法更新数据。例如。＆＃34; res.status（404）＆＃34;而不是＆＃34; res.statusCode = 404＆＃34;~~ 我找到了解决方案。 this help

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

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

Answer 9

关注documentation：

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

Answer 10

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

其他所有东西都是丑陋的。

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

Answer 13

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

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

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

13 个答案: