"함수 매개 변수 'elem'"eslint 규칙의 속성에 할당을 피하는 방법?

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'); 

, 내 모든 .myClass 요소의 특성 "블록"변경 해요 : 이 내 코드입니다. 부작용없이 이것을하는 방법? 그렇게하는 올바른 방법은 무엇입니까? 미리 감사드립니다.

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

처음에는 모든 의견을 주셔서 감사합니다. 동료들과 웹에서이 문제에 대한 조사를 한 후 Lecture by Douglas Crockford과 만나 이야기를 나누었습니다. 위의 대답은 단순하고 우아 해 보였지만 가장 실용적인 IMHO는 아닙니다. 그래서, 누군가 그것에 대해 더 나은 의견이 있으면 알려주세요.

기본적으로 나는 for 대신 Object.keys(htmlCollection).forEach(...)을 사용하여 Douglas Crockford 생각에 동의했습니다. 이렇게하면 코덱스 매트가 경고를 내지 않으며 코드가 더 논리적이고 유동적 인 것처럼 보였습니다.

const setDisplayStyleToElementsArray = (arr, display) => { 
 
\t 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>