如何避免“功能參數'elem'的屬性賦值”拖延規則？

Question

我想了解你們如何避免eslint警告“功能參數'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');

在這種情況下，我將更改所有.myClass元素的屬性“ block”。 如何做到沒有副作用？ 正確的做法是什么？ 提前致謝

Answer 1

我正在改變財產。 如何做到沒有副作用？

你不能。 更改該DOM屬性是一個副作用。 如果皮棉機阻止您這樣做，請禁用它（至少在該行上禁用）。

當然，可以通過不使用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

首先，感謝所有評論，謝謝。 在與同事和網絡上對這個問題進行了一些研究之后，我碰到了道格拉斯·克羅克福德（Douglas Crockford）的一次講座 ，其中談到了這一點。 盡管上面的答案似乎簡單而優雅，但它似乎並不是最有效的恕我直言。 因此，如果有人對此有更好的意見，請告訴我。

基本上，我決定使用Object.keys(htmlCollection).forEach(...)代替for ，這與Douglas Crockford的想法一致。 這樣，代碼氣候不會發出任何警告，並且我的代碼似乎更具邏輯性和靈活性。

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

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

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