JavaScript에서 발생한 BUG-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript에서 발생한 BUG

亚连

Jun 20, 2018 am 11:44 AM

bugjavascript

자바스크립트 개발에서 자주 접하는 버그와 문제점을 자세하게 정리했습니다. 필요한 친구들이 참고할 수 있습니다.

최고의 JavaScript 개발자도 실수를 합니다. 때로는 프로그램의 실행 결과가 예상과 다르며, 때로는 전혀 실행되지 않는 경우도 있습니다. 여기에서는 주니어 개발자와 시니어 개발자 모두가 겪을 수 있는 10가지 일반적인 실수를 요약했습니다.

평등 혼란

x가 y와 같나요? x가 사실인가요? 자바스크립트에서는 평등성을 어떻게 올바르게 판단하는가가 매우 중요하지만 많은 사람들이 혼란스러워하는 것 같습니다. 간략하게 정리하면 조건부 판단(if, && 등), 등호 연산자(==), 완전 등호 연산자(===)의 세 가지 상황이 주로 발생합니다.

심지어 대입(=)이 실수로 등호 연산자로 사용되는 경우도 있으니 실수하지 마세요!

할당(=) 사용을 피하세요

할당(=)은 오른쪽의 표현식을 왼쪽의 변수에 할당합니다. 예:

var a = 3;

이 문은 값이 3인 새 변수 a를 선언합니다.

표현식은 프로그램에서 무엇이든 될 수 있습니다. 표현이 언어의 명사에 비유되고 연산자(+,-,*,/)가 동사에 비유된다고 상상해 보세요. 초보자들이 흔히 범하는 실수는 할당(=)을 등호 연산자로 잘못 사용하는 것입니다.

if (a=4){...}

코드가 예상대로 작동하지 않습니다.

항등 연산자는 주의해서 사용하세요

항등 연산자(==)와 쌍항 부등 연산자(!=)는 사용하기 매우 쉽지만 매우 위험하므로 가능한 한 적게 사용하세요. 다음으로 그 이유를 소개하겠습니다:

0 == &#39;0&#39;

등호 아래에는 0과 0이 동일합니다! 인터프리터는 왼쪽 유형과 오른쪽 유형이 일치하지 않음을 발견했기 때문에 먼저 암시적 유형 변환을 수행했습니다. 이로 인해 온갖 문제가 발생할 수 있으며, 문제가 발생하면 원인을 찾기가 어려울 수 있습니다.

문자열에 포함된 숫자가 실제로 특정 숫자와 같은지 확인하려면 다음을 수행하는 것이 좋습니다.

parseInt(0) === parseInt(&#39;0&#39;)

따라서 엄격한 동등/부등 연산자를 사용하는 것이 좋습니다.

0 === &#39;0&#39;

는 false를 반환합니다.

중괄호 누락

프로그램이 더욱 복잡해짐에 따라, 특히 JavaScript 개체를 사용하여 데이터를 저장하는 경우 중괄호가 점점 더 많아집니다. 다음은 코드 조각이지만 중괄호가 누락되었습니다.

{
 “status”: “OK”,
 “results”: [{
 “id”: 12,
 “title”: “Coding JavaScript For Dummies”,
 “author”: “Chris Minnick and Eva Holland”,
 “publication_date”: ““,
 “summary_short”: ““,
 “link”: {
 “type”: “review”,
 “url”: ““,
 “link_text”: “Read the New York Times Review 
of Coding JavaScript For Dummies”
 },
 “awards”: [{
 “type”: “Nobel Prize”,
 “url”: ““,
 }]
}

누락된 부분이 보이시나요? 의심스러울 때는 훌륭한 편집자가 큰 도움이 될 수 있습니다. Sublime Text에는 매우 좋은 기능이 있습니다. 특정 중괄호에 커서를 놓으면 일치하는 중괄호가 강조 표시됩니다.

일치하지 않는 따옴표

문자열을 정의할 때 작은따옴표나 큰따옴표를 자유롭게 사용할 수 있습니다. 그러나 문자열이 작은따옴표로 시작하고 큰따옴표로 끝나면 작동하지 않습니다. 그리고 문자열 자체에 있는 작은따옴표나 큰따옴표에 주의해야 합니다.

var movieName = “Popeye&#39;; // error!
var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let&#39;s learn JavaScript!&#39; // error!

일반적으로 개인적으로 매우 유연하고 사용하기 쉬운 기능이라고 생각하지만 주의하셔야 할 점!

필수 괄호가 누락되었습니다.

이 오류는 조건문에서 자주 발견되며, 특히 여러 조건이 있는 경우에 발생합니다.

if (x > y) && (y < 1000) {
...
}

주의를 기울이면 대괄호가 누락되었음을 알 수 있습니다. 올바른 대괄호는 다음과 같아야 합니다.

if ((x > y) && (y < 1000)) {
...
}

세미콜론 누락

JavaScript의 명령문은 세미콜론으로 끝나야 합니다. 그러나 이러한 명령문이 한 줄에 있는 경우에는 세미콜론을 쓰지 않아도 문제가 되지 않습니다. 그러나 잠재적인 문제 때문에 권장되지 않습니다. 자동 코드 미화 도구를 사용하는 경우 실수로 여러 코드 줄을 병합하여 오류가 발생할 수 있습니다.

가장 좋은 전략은 항상 세미콜론을 추가하는 것입니다.

대문자 사용 오류

JavaScript는 대소문자를 구분하므로 변수 및 함수 이름 지정에 주의해야 하며 대문자 사용이 잘못되지 않도록 해야 합니다. 예를 들어 Document 개체의 getElementById 함수는 getElementByID로 잘못 작성되는 경우가 많습니다.

로드 전 인용문

JavaScript 코드는 일반적으로 나중에 생성된 요소를 참조하면 오류가 보고됩니다.

<html>
<head>
 <script>
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 </script>
</head>
<body>
 <p id = “myp”>This p is your p.</p>
</body>
</html>

스크립트가 실행될 때 브라우저는 아직 myp가 무엇인지 알 수 없습니다.

이 문제를 피하는 방법은 여러 가지가 있습니다.

코드를 끝, 즉

위 내용은 JavaScript에서 발생한 BUG의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

See all articles