Question

我想了解你们如何避免eslint warning "Assignment to property of function parameter 'elem'"。我知道这是一个很好的模式，不要改变函数参数值。这使我们的代码解耦并具有高维护性。但是，在某些情况下，我遇到以下情况。我需要检索具有特定类的所有元素，然后更改其显示样式属性。这是我的代码：

const setDisplayStyleToElementsArray = (arr, display) => {
  arr.map((elem) => {
    elem.style.display = display;
    return elem;
  });
};

const elements = document.getElementsByClassName('.myClass');

const myFields = [].slice.call(elements, 0);

setDisplayStyleToElementsArray(myFields, 'block');

在这种情况下，我改变了属性＆＃34;阻止＆＃34;我所有的.myClass元素。怎么做没有副作用？这样做的正确方法是什么？提前致谢

Answer 1

我正在改变房产。怎么做没有副作用？

你做不到。更改DOM属性是的副作用。如果您的linter阻止您这样做，请将其禁用（至少在该行上）。

当然，只需不使用map或回调函数就可以避免这一特定规则。更为惯用的是

function setDisplayStyles(arr, display) {
  for (const elem of arr) {
    elem.style.display = display;
  }
}

const elements = Array.from(document.getElementsByClassName('.myClass'));
setDisplayStyles(elements, 'block');

Answer 2

首先，感谢所有评论，欣赏。在与我的同事和网络上对这个问题进行了一些研究之后，我遇到了一个Lecture by Douglas Crockford来讨论这个问题。虽然上面的答案似乎简单而优雅，但它似乎并不是最具表现力的恕我直言。所以，如果有人对此有更好的意见，请告诉我。

基本上，我决定使用Object.keys(htmlCollection).forEach(...)代替for，同意Douglas Crockford的想法。这样，codeclimate没有抛出任何警告，我的代码似乎更具逻辑性和流畅性。

＆＃13;

const setDisplayStyleToElementsArray = (arr, display) => {
	Object.keys(arr).forEach(field => arr[field].classList.add('hidden'));
};

const elements = [... document.getElementsByClassName('myClass')];
setDisplayStyleToElementsArray(elements, 'none');

＆＃13;

.myClass {
  border: 1px solid red;
}

.hidden {
  border: 1px solid blue; //could be display: none;
}

＆＃13;

<div class="myClass">One</div>
<div class="myClass">Two</div>

＆＃13;

如何避免＆＃34;赋值函数参数＆＃39; elem＆＃39;＆＃34; eslint规则？

2 个答案: