유용한 Vanilla JavaScript 요령 및 팁

숫자 문자열 앞에 +를 넣습니다. '10'은 10과 같이 숫자로 변환합니다.

루프 끊기
for 루프를 중단하려면 foreach 메서드에서 return을 사용하십시오.

예:

[1,2,3,4,5].forEach((n) => {
경우 (n === 3) {
console.log(n, '반환된 파일')
반품
}
콘솔.로그(n)
})

보고:


객체를 매개변수로 사용
개체를 호출할 때 모든 매개 변수를 지정할 필요가 없도록 함수에서 개체를 매개 변수로 사용합니다. 예를 들어

htmlGenerator({parentElement, title1, content1, content1Listener, title2 = '밥 말리는 굉장합니다', content2, content2Listener} = {}) {
코드 블록
}

this.htmlGenerator({parentElement: nearSiteInfo, title1: '사이트:', content1: siteProperties.name, title2: '사이트 주소:', content2: siteProperties.address})

content1Listener 및 content2Listener가 정의되지 않은 방법을 참조하십시오. 이것은 오류로 반환되지 않으며 함수에서 호출되는 경우 예상대로 undefined를 반환합니다. 옵션이 많을 때 매우 유용합니다.

기본값을 지정하려면 위의 'Bob Marley is awesome' 예와 같은 = 함수를 사용하십시오.

동일한 원칙이 클래스의 생성자에도 적용됩니다. 클래스의 속성에 개체 매개 변수를 할당하는 쉬운 방법은 다음과 같습니다.
Object.assign(this, 인수[0]);

여기서 arguments는 개체 매개 변수가 정의된 생성자 인수의 위치입니다.

예를 들어
건설자({
지도,
스타일,
}) {
Object.assign(this, 인수[0]);
}

결과는 다음과 같습니다.
건설자({
지도,
스타일,
}) {
this.map = 지도;
this.style = 스타일;
}

이것의 이점은 객체 매개변수에 정의된 것과 직접적으로 관련된다는 것입니다.

객체의 쓰기 불가능한 속성 할당
창에 매개변수를 첨부해야 하는 경우 유용합니다. 즉, 대중이 액세스할 수 있습니다.

Object.defineProperty(ElsaApp.Constants.Keys, 'bing', {
     value: "{{ config('maps.bing.key') }}",
     writable: false
});

_는 클래스의 개인 변수를 나타냅니다./** PHPStorm의 JS 파일 상단에도 추가합니다.