Como evitar no-param-reassign ao definir uma propriedade em um objeto DOM

Eu tenho um método cujo objetivo principal é definir uma propriedade em um objeto DOM

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

Eu uso o estilo de código do AirBnB, o que faz o ESLint gerar um no-param-reassignerro:

Erro de atribuição ao parâmetro de função 'el' no-param-reassign

Como posso manipular um objeto DOM passado como um argumento enquanto conforma o estilo de código do AirBnB?

Alguém sugeriu usar /* eslint react/prop-types: 0 */referindo-se a outro problema, mas se não me engano, isso se aplica bem para reagir, mas não para manipulação de DOM nativo.

Além disso, não acho que mudar o estilo do código seja uma resposta. Acredito que um dos benefícios de usar um estilo padrão é ter um código consistente entre os projetos e alterar as regras à vontade parece um uso indevido de um estilo de código importante como o do AirBnB.

Para registro, perguntei ao AirBnB no GitHub, o que eles acham que é o caminho a seguir nesses casos na edição # 766 .

Como @Mathletics sugere, você pode desativar a regra inteiramente adicionando isto ao seu .eslintrc.jsonarquivo:

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

Ou você pode desativar a regra especificamente para propriedades param

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

Como alternativa, você pode desativar a regra para essa função

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

Ou apenas para essa linha

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

Você também pode verificar esta postagem do blog sobre a desativação das regras ESLint especificamente para acomodar o guia de estilo do AirBnB.

Como este artigo explica , essa regra tem o objetivo de evitar a mutação do argumentsobjeto . Se você atribuir a um parâmetro e, em seguida, tentar acessar alguns dos parâmetros por meio do argumentsobjeto, isso pode levar a resultados inesperados.

Você pode manter a regra intacta e manter o estilo AirBnB usando outra variável para obter uma referência ao elemento DOM e, em seguida, modificá-lo:

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

Em JS, os objetos (incluindo nós DOM) são passados ​​por referência, então aqui ele theElementestão referências ao mesmo nó DOM, mas modificar theElementnão altera o argumentsobjeto, pois arguments[0]permanece apenas uma referência a esse elemento DOM.

Essa abordagem é sugerida na documentação da regra :

Exemplos de código correto para esta regra:

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

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

Pessoalmente, eu usaria apenas a "no-param-reassign": ["error", { "props": false }]abordagem de algumas outras respostas mencionadas. Modificar uma propriedade do parâmetro não altera o que esse parâmetro se refere e não deve gerar os tipos de problemas que esta regra está tentando evitar.

Você pode substituir esta regra dentro do seu .eslintrcarquivo e desativá-la para propriedades de parâmetros como este

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

Dessa forma, a regra ainda está ativa, mas não avisará para propriedades. Mais informações: http://eslint.org/docs/rules/no-param-reassign

O no-param-reassignaviso faz sentido para funções comuns, mas para um Array.forEachloop clássico sobre uma matriz que você pretende modificar, não é apropriado.

No entanto, para contornar isso, você também pode usar Array.mapcom um novo objeto (se você for como eu, não gosta de adiar avisos com comentários):

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', {});
}

Todo o resto são apenas hacks feios.

Aqueles que desejam desativar esta regra seletivamente podem estar interessados ​​em uma nova opção proposta para a no-param-reassignregra que permitiria uma "lista branca" de nomes de objetos com relação a quais reatribuições de parâmetros deveriam ser ignoradas.

Seguindo a documentação :

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

Você também pode usar o lodash, assignInque transforma o objeto. assignIn(obj, { someNewObj });

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

Você pode usar métodos para atualizar dados. Por exemplo. "res.status (404)" em vez de "res.statusCode = 404" Encontrei a solução. 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;
});

Você pode usar:

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

Se você quiser alterar qualquer valor dentro de uma matriz de objeto, você pode usar

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