Cómo evitar no-param-reassign al configurar una propiedad en un objeto DOM

Tengo un método cuyo objetivo principal es establecer una propiedad en un objeto DOM

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

Utilizo el estilo de código de AirBnB que hace que ESLint arroje un no-param-reassign error:

error Asignación al parámetro de función 'el' no-param-reassign

¿Cómo puedo manipular un objeto DOM pasado como argumento mientras se ajusta al estilo de código de AirBnB?

Alguien sugirió usar /* eslint react/prop-types: 0 */refiriéndose a otro problema pero si no me equivoco, esto se aplica bien para reaccionar, pero no para la manipulación DOM nativa.

Además, no creo que cambiar el estilo del código sea una respuesta. Creo que uno de los beneficios de usar un estilo estándar es tener un código consistente en todos los proyectos y cambiar las reglas a voluntad se siente como un mal uso de un estilo de código importante como el de AirBnB.

Para que conste, le pregunté a AirBnB en GitHub, cuál creen que es el camino a seguir en estos casos en el número 766 .

Como sugiere @Mathletics, puede deshabilitar la regla por completo agregando esto a su .eslintrc.jsonarchivo:

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

O puede deshabilitar la regla específicamente para propiedades de parámetros

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

Alternativamente, puede deshabilitar la regla para esa función

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

O solo para esa línea

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

También puede consultar esta publicación de blog sobre cómo deshabilitar las reglas de ESLint específicamente para adaptarse a la guía de estilo de AirBnB.

Como explica este artículo , esta regla está destinada a evitar la mutación del argumentsobjeto . Si asigna un parámetro y luego intenta acceder a algunos de los parámetros a través delarguments objeto, puede generar resultados inesperados.

Puede mantener la regla intacta y mantener el estilo AirBnB usando otra variable para obtener una referencia al elemento DOM y luego modificar eso:

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

En JS, los objetos (incluidos los nodos DOM) se pasan por referencia, por lo que aquí ely theElementson referencias al mismo nodo DOM, pero la modificación theElementno muta el argumentsobjeto, ya que arguments[0]sigue siendo solo una referencia a ese elemento DOM.

Este enfoque se insinúa en la documentación de la regla :

Ejemplos de código correcto para esta regla:

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

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

Personalmente, solo usaría el "no-param-reassign": ["error", { "props": false }]enfoque en un par de otras respuestas mencionadas. La modificación de una propiedad del parámetro no cambia a qué se refiere ese parámetro y no debería generar los tipos de problemas que esta regla está tratando de evitar.

Puede anular esta regla dentro de su .eslintrcarchivo y deshabilitarla para propiedades de parámetros como esta

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

De esta forma, la regla sigue activa pero no advertirá sobre las propiedades. Más información: http://eslint.org/docs/rules/no-param-reassign

La no-param-reassignadvertencia tiene sentido para funciones comunes, pero para un clásicoArray.forEach bucle sobre una matriz que tiene la intención de mutar, no es apropiado.

Sin embargo, para evitar esto, también puede usar Array.mapcon un nuevo objeto (si es como yo, no le gusta posponer advertencias con comentarios):

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 lo demás son trucos feos.

Aquellos que deseen desactivar selectivamente esta regla podrían estar interesados ​​en una nueva opción propuesta para la no-param-reassignregla que permitiría una "lista blanca" de nombres de objetos con respecto a qué reasignación de parámetros debería ignorarse.

Siguiendo la documentación :

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

También puede usar lodash assignInque muta el objeto. assignIn(obj, { someNewObj });

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

Puede utilizar métodos para actualizar datos. P.ej. "res.status (404)" en lugar de "res.statusCode = 404" encontré la solución. 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;
});

Puedes usar:

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

Si desea cambiar cualquier valor dentro de una matriz de objetos, puede usar

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