Как избежать переназначения без параметров при установке свойства для объекта DOM

У меня есть метод, основная цель которого - установить свойство объекта DOM.

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

Я использую стиль кода AirBnB, из-за которого ESLint выдает no-param-reassignошибку:

ошибка Присваивание параметру функции 'el' no-param-reassign

Как я могу управлять объектом DOM, переданным в качестве аргумента, в соответствии со стилем кода AirBnB?

Кто-то предложил использовать /* eslint react/prop-types: 0 */ссылку на другую проблему, но, если я не ошибаюсь, это хорошо подходит для реакции, но не для собственных манипуляций с DOM.

Также я не думаю, что изменение стиля кода - это ответ. Я считаю, что одним из преимуществ использования стандартного стиля является наличие согласованного кода в разных проектах, а изменение правил по желанию кажется неправильным использованием основного стиля кода, такого как AirBnB.

Для протокола, я спросил AirBnB на GitHub, что они думают о том, как поступить в этих случаях в выпуске № 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объект, это может привести к неожиданным результатам.

Вы можете сохранить правило без изменений и сохранить стиль AirBnB, используя другую переменную, чтобы получить ссылку на элемент DOM, а затем изменить ее:

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файла и отключить его для таких свойств параметров, как это

{
    "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: {} }))