>  기사  >  웹 프론트엔드  >  일상적인 JavaScript 코드에서 주의해야 할 6가지 사항

일상적인 JavaScript 코드에서 주의해야 할 6가지 사항

韦小宝
韦小宝원래의
2018-03-14 13:06:561193검색

일상적인 JavaScript개발에서 일부 코드에서 오류가 발생하는지 모두가 주의해야 합니다. 오늘은 많은 학생들이 JavaScript를 개발할 때 주의해야 할 오류가 발생하기 쉬운 6가지 부분을 요약해 보겠습니다. 보세요! 더 이상 고민하지 않고 바로 본론으로 들어가겠습니다!

함수 즉시 실행

함수 즉시 실행. 일반적으로 클로저로도 사용할 수 있으며, 함수 수준의 변수 범위를 구성할 수 있습니다. 일반적인 작성 방법은 다음과 같습니다.

(function () {
  // code
})();

그러나 이 작성 방법은 쉽게 문제를 일으킬 수 있습니다. 예를 들어 위 코드가 세미콜론으로 끝나지 않는 경우:

var a = 1
(function () { // Uncaught TypeError: 1 is not a function
})()

, 다음과 같이 작성해야 합니다.

void function () {
  // code
}();

또는:

!function () {
  // code
}();
;(function(){
   //code
})()

어느 것을 선택하느냐는 개인 취향에 따라 다릅니다. 이제 js에는 줄 끝에서 세미콜론을 생략하는 것을 옹호하는 표준이 있습니다(저는 익숙하지 않습니다). 변경됩니다.

2. 빈 개체 null

JS 탄생 이후 null에는 Object 클래스 유형이 부여되었으며 앞으로도 변하지 않을 JS의 평생 버그라고 할 수 있습니다.

null은 객체라는 기본 특성을 갖지 않으며 원래의 데이터 유형에 속합니다. 제가 설명하고 싶은 것은 변수가 객체인지 판단하기 전에 먼저 null인지 판단해야 한다는 것입니다.

if (opt!== null && typeof opt=== 'object') {
  // opt是一个对象
}

3. 소수점을 임의로 비교하지 마세요

소수점 사이의 계산을 할 때 부동소수점 앞에 있는 정밀도 문제에 주의하세요.

예: 0.1+0.2는 0.3과 동일합니까? 답은 다음과 같습니다. 0.1+0.2=0.30000000000000004

비슷하게: 0.4-0.3=0.1000000000000003

이러한 계산이 존재하는 경우 소수를 다음으로 변환합니다. string을 먼저 사용하세요. toFixed to go 소수점 이하 자릿수 비교:

(0.1 + 0.2).toFixed(2) === '0.30'

참고: 두 숫자의 차이가 특정 범위만큼 작으면 동일한 것으로 간주될 수 있습니다.

Math.abs(0.1+0.2 - 0.3) <= 1e-10 // true

4. 항상 NaN을 기억하세요

NaN하면 누구나 떠올려야 할 특징이 있습니다, NaN!==NaN. 네, 좋습니다.

변수가 NaN인지 확인해야 한다면 변수 자체와 비교하면 됩니다.

숫자가 NaN인지 확인하려면 isNaN() 메서드를 사용할 수 있습니다. 그러나 변수의 특정 데이터 유형을 모르는 경우 쉽게 판단하기 위해 이 방법을 사용하지 마십시오. isNaN에는 이상한 특성이 있기 때문입니다. 먼저 판단할 변수를 계산을 위한 숫자 값으로 변환합니다.

isNaN(&#39;abc&#39;) // true
isNaN(&#39;123&#39;) // false
isNaN(&#39;&#39;) // false
isNaN([]) // false
isNaN({}) // true

그렇다면 이번에는 당신의 판단 결과에 놀라움을 선사할 것입니다.

또 다른 주목해야 할 점은 opt===NaN과 같은 어떤 변수도 NaN과 비교하지 않는다는 것입니다.

5. null과 정의되지 않음을 비교하는 것 외에도 엄격하지 않은 ==를 사용하지 마세요! =

===를 사용해 보라는 기사와 사양을 많이 보셨을 거라 믿습니다! ==, == 및 !를 사용하지 마십시오. =, 그 이유는 후자가 강제로 유형 변환을 수행하기 때문입니다(찾기 어려운 버그 발생).

먼저 살펴보세요:

&#39;true&#39; == true // => false
'true' == false // => false
[] == {} // => false
[] == [] // => false

위의 판단에 대해 의심이 든다면 규칙을 기억하세요:

null == null // => true
undefined == undefined  // => true
null == undefined // => true
undefined == null // => true
x == null // => false (x 非 null 或 undefined)
x == undefined // => false (x 非 null 或 undefined)

즉, x가 null인지 정의되지 않은지 확인하려면 ==를 사용하세요. 그렇지 않으면 절대 사용하지 마세요.

6. 주의해서 사용하세요 || 기본값 설정

변수에 대한 기본값을 설정하세요. 수년간 게임에 종사해 온 JS 개발자들은 다음과 같이 쓸 것입니다:

page = page || 0;
data = data || '你好';

Explain arg1 || arg1을 true로 변환한 다음 arg1을 취하고, 그렇지 않으면 arg2를 취할 수 있습니다.

그럼 먼저 true로 변환할 수 없는 값부터 살펴볼까요? ㅋㅋㅋ

所以如果当用户传给arg1的参数是0或者为空字符串“”的时候,那么最终的值就会取默认的(||后面)值是不是?好,问题来了。如果用户传给后台的查询关键字data(上面代码)是空字符串“”,那么就应该按照空字符串“”去后台数据库查询,而结果传给后台的却是“你好”,显然查询结果也就不对。

好,回到主题,实际上只有undefined才应该被认为是用户没有指定其具体值,我曾看过有人这样理解(null 表示 用户让你给他把这个位置空着;而 undefined 表示 用户没发表意见

so :

page = page !== undefined ? page : 0;
data = data !== undefined ? data :'你好';

只需判断undefined即可。

个人理解如果有需求,可以把null加进去判断。

위 내용은 일상적인 JavaScript 코드에서 주의해야 할 6가지 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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