DOM 객체에 속성을 설정할 때 매개 변수 재 할당을 방지하는 방법

주요 목적은 DOM 개체에 속성을 설정하는 방법이 있습니다.

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

ESLint에서 no-param-reassign오류를 발생 시키는 AirBnB의 코드 스타일을 사용 합니다.

함수 매개 변수 'el'에 대한 오류 할당 no-param-reassign

AirBnB의 코드 스타일을 준수하면서 인수로 전달 된 DOM 객체를 어떻게 조작 할 수 있습니까?

누군가 /* eslint react/prop-types: 0 */가 다른 문제를 언급하는 것을 제안 했지만 내가 착각하지 않는다면 이것은 반응에는 잘 적용되지만 네이티브 DOM 조작에는 적용되지 않습니다.

또한 코드 스타일을 변경하는 것이 답이라고 생각하지 않습니다. 표준 스타일 사용의 이점 중 하나는 프로젝트 전반에 걸쳐 일관된 코드를 유지하고 규칙을 변경하는 것이 AirBnB와 같은 주요 코드 스타일을 오용하는 것처럼 느껴진다는 것입니다.

기록을 위해 GitHub의 AirBnB에 질문 # 766 에서 이러한 경우 에 대처할 방법이 무엇이라고 생각하는지 물었습니다 .

@Mathletics가 제안한 것처럼 파일에 다음 을 추가 하여 규칙을 완전히 비활성화 할 수 있습니다 .eslintrc.json.

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

또는 특별히 param 속성에 대한 규칙을 비활성화 할 수 있습니다.

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

또는 해당 기능에 대한 규칙을 비활성화 할 수 있습니다.

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

또는 해당 라인에만

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

특히 AirBnB의 스타일 가이드를 수용하기 위해 ESLint 규칙 비활성화에 대한 이 블로그 게시물 을 확인할 수도 있습니다 .

이 기사에서 설명하는 것처럼 이 규칙은 arguments객체의 변형을 방지하기위한 것 입니다. 매개 변수에 할당 한 다음 arguments개체 를 통해 일부 매개 변수에 액세스하려고 하면 예기치 않은 결과가 발생할 수 있습니다.

규칙을 그대로 유지하고 다른 변수를 사용하여 DOM 요소에 대한 참조를 가져온 다음 수정하여 AirBnB 스타일을 유지할 수 있습니다.

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

(DOM 노드 포함) JS 개체에서, 그래서 여기에 참조로 전달 el과 theElement같은 DOM 노드에 대한 참조가 있지만, 개량이 theElement변이없는 arguments사람 개체 arguments[0]남아 그 DOM 요소 단지 참조.

이 접근 방식은 규칙 에 대한 문서에 암시되어 있습니다 .

이 규칙에 대한 올바른 코드의 예 :

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

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

개인적으로 나는 "no-param-reassign": ["error", { "props": false }]언급 된 몇 가지 다른 답변에 접근 방식을 사용합니다 . 매개 변수의 속성을 수정해도 해당 매개 변수가 참조하는 내용이 변경되지 않으며이 규칙이 피하려는 종류의 문제가 발생하지 않아야합니다.

.eslintrc파일 내에서이 규칙을 재정의하고 다음 과 같은 매개 변수 속성에 대해 비활성화 할 수 있습니다.

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

이 방법으로 규칙은 여전히 ​​활성 상태이지만 속성에 대해 경고하지 않습니다. 추가 정보 : http://eslint.org/docs/rules/no-param-reassign

no-param-reassign경고는 일반적인 기능에 대한 의미가 있지만, 고전에 대한 Array.forEach당신이 그것을 돌연변이하려는 배열을 통해 루프 적절한 것이 아니다.

그러나이 문제를 해결하려면 Array.map새 개체와 함께 사용할 수도 있습니다 (나와 같은 경우 주석으로 경고 일시 중지를 싫어함).

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

다른 모든 것은 추악한 해킹입니다.

이 규칙을 선택적으로 비활성화하려는 사람들은 매개 변수 재 할당을 무시해야하는 객체 이름의 "화이트리스트"를 허용하는 규칙 에 대해 제안 된 새로운 옵션 에 관심이있을 수 있습니다 no-param-reassign.

문서에 따라 :

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

assignIn객체를 변경하는 lodash 를 사용할 수도 있습니다 . assignIn(obj, { someNewObj });

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

데이터 업데이트 방법을 사용할 수 있습니다. 예 : "res.statusCode = 404"대신 "res.status (404)" 솔루션을 찾았습니다. 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;
});

당신이 사용할 수있는:

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

객체 배열 내의 값을 변경하려면 다음을 사용할 수 있습니다.

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