원저자: Andy Croxall
원본 링크: JavaScript의 10가지 이상한 점과 비밀
번역 편집자: Zhang Xinxu
데이터 유형 및 정의
1. Null은 객체입니다
JavaScript의 여러 유형 중에는 고유한 null 값을 갖는 Null 유형이 있습니다. , 전혀 의미가 없는 값으로 정의된 리터럴입니다. 다음 감지 코드와 같이 객체처럼 동작합니다.
alert (typeof null); //아래와 같이 '객체' 팝업
typeof 값에 "object"가 표시되어 있지만 null은 개체 인스턴스로 간주되지 않습니다. 아시다시피 JavaScript의 값은 객체 인스턴스이고 각 값은 Number 객체이며 각 객체는 Object 객체입니다. null에는 값이 없으므로 null은 어떤 것의 인스턴스도 아니라는 것이 분명합니다. 따라서 아래 값은 false입니다.
alert(null instanceof Object) // is false
번역자 주: null은 객체 자리 표시자로도 이해될 수 있습니다.
2. NaN은 숫자 값입니다.
NaN의 원래 의미 특정 값을 나타내는 것은 숫자 값이 아니라 숫자 값이며 자체와 동일하지 않다는 것이 이상합니다.
alert(typeof NaN); //'숫자' 팝업
alert(NaN === NaN ); //false
결과는 다음과 같습니다.
실제로 NaN은 아무것도 아닙니다. NaN인지 확인하려면 isNaN만 사용할 수 있습니다.
3. 키워드가 없는 배열은 false와 동일합니다(Truthy 및 Falsy 관련).
다음은 JavaScript의 또 다른 뛰어난 특징입니다.
alert(new Array() == false); // true
결과는 다음과 같습니다.
여기서 무슨 일이 일어나고 있는지 이해하려면 참과 거짓의 개념을 이해해야 합니다. 이는 true/flase 리터럴입니다. JavaScript에서는 부울이 아닌 모든 값에 부울 플래그가 내장되어 있습니다. 부울 동작이 필요한 경우 부울 값과 비교하려는 경우와 같이 이 내장 부울 값이 나타납니다.
사과는 배와 비교할 수 없기 때문에 JavaScript에서 두 가지 다른 유형의 값을 비교해야 하는 경우 먼저 두 값을 동일한 유형으로 약화시킵니다. false, 정의되지 않음, null, 0, "", NaN은 모두 false로 약화됩니다. 이 강제는 항상 존재하는 것은 아니며 표현식으로 사용될 때만 존재합니다. 다음의 간단한 예를 살펴보십시오.
var someVar =0;
alert(someVar == false); //참 표시
결과는 다음과 같습니다.
위 테스트에서 우리는 값 0을 부울 값 false와 비교하려고 했습니다. 두 데이터 유형이 호환되지 않기 때문에 JavaScript는 자동으로 통합되고 동등한 진실과 거짓으로 변환을 강제했습니다. 여기서 0은 false와 같습니다. 위) 언급).
위 값 중 일부에는 false에 해당하는 빈 배열이 없다는 것을 눈치채셨을 것입니다. 빈 배열이 이상한 것이기 때문에 그 자체는 실제로 참이지만 빈 배열을 부울 유형과 비교하면 그 동작은 거짓입니다. 확실하지 않나요? 이에 대한 이유가 있습니다. 빈 배열의 이상한 동작을 확인하기 위해 예를 들어 보겠습니다.
var someVar = []; //빈 배열
alert(someVar == false); //결과는 true
if (someVar) Alert('hello'); 문이 실행되므로 someVar는 true로 처리됩니다.
결과는 아래 스크린샷과 같으며 두 개의 상자가 연속해서 나타납니다.
번역자 메모: 이러한 차이가 나는 이유는 작성자에 따르면 배열에 toString() 메서드가 내장되어 있기 때문입니다. 예를 들어 직접 경고를 하면 Join(“ ,”), 빈 배열은 당연히 빈 문자열이므로 false와 동일합니다. 자세한 내용은 저자의 다른 글 "뒤틀린 논리: 참과 거짓의 이해"를 참조하세요. 하지만 제가 개인적으로 이상하다고 생각하는 점은 빈 개체, 빈 함수, 약함은 true 또는 false와 같을 때 false가 표시된다는 것입니다. 배열이 이상하고 특별한 고려 사항이 필요하기 때문입니까?
캐스트의 비교 문제를 방지하려면 약한 같음(==) 대신 강한 같음(===)을 사용할 수 있습니다.
var someVar = 0; (someVar = = false); //결과 true – 0은 falsy에 속함
alert(someVar === false); //결과 false – 0은 부울 값이 아닌 숫자 값입니다.
결과는 아래 스크린샷과 같습니다(win7 FF4):
JavaScript의 유형 강제와 같은 몇 가지 고유한 특성에 대해 더 자세히 알아보려면 공식 관련 문서 사양을 참조하세요.
ECMA-262의 섹션 11.9.3정규식 수식
4. replacement()는 콜백 함수를 받을 수 있습니다
이것은 v1.3에서 처음 소개된 JavaScript의 가장 잘 알려지지 않은 비밀 중 하나입니다. 대부분의 경우 교체()의 사용은 다음과 유사합니다.
alert('10 13 21 48 52'.replace(/d /g, '*')); //모든 숫자를 *
로 바꿉니다. 교체, 문자열 1개, 별표. 하지만 교체가 발생할 때 더 많은 제어권을 갖고 싶다면 어떻게 해야 할까요? 30 이하의 값만 바꾸고 싶은데 어떻게 해야 하나요? 이 시점에서는 정규식에만 의존하는 것이 불가능합니다. 각 일치 항목을 처리하려면 콜백 함수를 사용해야 합니다.
alert('10 13 21 48 52' .replace( /d /g, function(match) {
return parsInt(match) <30?'*' : match;
}));
각 일치가 완료되면 JavaScript는 콜백 함수를 적용하고 일치하는 콘텐츠를 일치 매개변수에 전달합니다. 그런 다음 콜백 함수의 필터링 규칙에 따라 별표가 반환되거나 일치 항목 자체가 반환됩니다(대체가 발생하지 않음).
아래 스크린샷:
5. 정규식: 단순히 일치 및 바꾸기가 아닙니다.
많은 JavaScript 엔지니어는 일치 및 바꾸기를 통해서만 정규식을 처리합니다. 하지만 이 두 가지보다 JavaScript에서 정의한 정규식 관련 메서드가 훨씬 더 많습니다.
test()는 match()와 유사하게 작동하지만 반환 값이 다르다는 점을 언급할 가치가 있습니다. test()는 일치 여부를 확인하는 데 사용되는 부울 유형을 반환하며 실행 속도는 다음보다 빠릅니다. 성냥().
alert(/w{3,}/ .test( 'Hello')); // 'true' 팝업
위의 코드 줄은 문자열에 3개 이상의 일반 문자가 있는지 확인하는 데 사용됩니다. 요구 사항이 있으므로 true가 나타납니다.
결과는 다음과 같습니다.
동적 정규식 개체를 만드는 데 사용할 수 있는 RegExp 개체에도 주의를 기울여야 합니다. 예를 들면 다음과 같습니다.
function findWord(word, string) {
varInstancesOfWord = string.match(new RegExp('\b'단어 '\b', 'ig'))
alert(instancesOfWord)
}
findWord('car', ' Carl은 차를 사러 갔지만 신용카드를 잊어버렸습니다.')
여기에서는 매개변수 단어를 기반으로 일치하는 확인을 동적으로 생성합니다. 이 테스트 코드의 기능은 큰 선택과 작은 선택을 구분하지 않고 car라는 단어를 선택하는 것입니다. 얼핏 보면 시험 영어 문장의 유일한 단어는 car 이므로 여기서의 성능은 단 한 단어뿐입니다. 단어 경계를 나타내는 데 사용됩니다.
결과는 다음과 같습니다.
함수와 범위
6. 범위인 것처럼 가장할 수 있습니다
범위는 어떤 변수가 사용 가능한지 결정하는 데 사용되며, 창 개체에서 독립적인 JavaScript(예: JavaScript가 실행 중인 함수에 있지 않음)에서 작동합니다. 전역 범위에서는 어떤 상황에서도 창 개체에 액세스할 수 있습니다. 그러나 함수에 선언된 지역 변수는 해당 함수 내에서만 사용할 수 있습니다.
var Animal ='dog'; >function getAnimal (형용사) { 경고(형용사 '' this.animal) }
getAnimal('lovely'); //'사랑스러운 개' 팝업
여기에 변수와 함수가 있습니다. 전역 범위에서 선언됩니다. 이는 현재 범위(이 예에서는 창)를 가리키기 때문입니다. 따라서 이 함수는 'dog'인 window.animal을 찾습니다. 지금까지는 너무 좋았습니다. 그러나 실제로는 함수를 다른 범위에서 실행하고 자체 범위를 무시할 수 있습니다. 범위 가장을 달성하기 위해 call()이라는 내장 메소드를 사용할 수 있습니다.
var Animal ='dog'; >function getAnimal (형용사) { 경고(형용사 '' this.animal) };
var myObj = {animal: 'camel'}
getAnimal.call(myObj, 'lovely'); up 'lovely camel' '
call() 메소드의 첫 번째 매개변수는 함수에서 이 것으로 가장할 수 있습니다. 따라서 여기의 this.animal은 실제로 'camel'인 myObj.animal입니다. . 후속 매개변수는 일반 매개변수로 함수 본문에 전달됩니다.
또 다른 관련 메소드는 call()과 동일하게 작동하는 apply() 메소드입니다. 차이점은 함수에 전달되는 매개변수가 독립변수가 아닌 배열 형태로 표현된다는 점입니다. 따라서 위의 테스트 코드를 apply()로 표현하면
getAnimal.apply(myObj, ['lovely']) //함수 매개변수는 배열 형태로 전송됩니다
데모 페이지에서 첫 번째 버튼을 클릭한 결과는 다음과 같습니다.
두 번째, 세 번째 버튼을 클릭한 결과는 다음과 같습니다.
7. 함수는 그 자체로 실행될 수 있습니다
다음은 매우 괜찮습니다:
(function() { Alert('hello'); })(); // 'hello' 팝업
여기서 구문 분석은 매우 간단합니다. 함수를 선언합니다. , () 구문 분석으로 인해 즉시 실행됩니다. 약간 모순되는 것처럼 보이는 이 작업(직접 () 호출 참조)을 수행하는 이유가 궁금할 수 있습니다. 함수에는 일반적으로 지금 구문 분석하고 실행하는 대신 나중에 실행하려는 코드가 포함되어 있습니다. 그렇지 않으면 필요하지 않습니다. 함수에 코드를 넣어보세요.
자체 실행 함수(SEF)의 또 다른 좋은 용도는 이벤트 콜백, 타임아웃, 실행(간격)과 같은 지연된 코드에서 바인딩된 변수 값을 사용하는 것입니다. 다음 예:
var someVar ='hello ';
setTimeout(function() { Alert(someVar); }, 1000);
var someVar ='goodbye';
초보자는 항상 포럼에서 시간 초과 팝업이 나타나는 이유를 묻습니다. 대신 안녕 안녕 안뇽? 대답은 timeout의 콜백 함수가 실행될 때까지 someVar 변수의 값을 할당하지 않는다는 것입니다. 그 당시 someVar는 오랫동안 작별 인사로 다시 작성되었습니다.
SEF는 이 문제에 대한 해결책을 제공합니다. 위와 같이 시간 제한 콜백을 암시적으로 지정하는 대신 someVar 값을 매개 변수로 직접 전달합니다. 효과는 상당합니다. 즉, someVar 값을 전달하고 격리하여 지진, 쓰나미 또는 여자친구의 굉음이 발생하는지 여부가 변경되지 않도록 보호합니다.
var someVar = 'hello'; >setTimeout( (function(someVar) {
returnfunction() { 경고(someVar); }
})(someVar), 1000)
var someVar ='goodbye';
상황이 바뀌어서 이번엔 여기 팝업이 헬로네요. 이것이 함수 매개변수와 외부 변수의 차이점입니다.
예를 들어 마지막 버튼을 클릭한 후 나타나는 팝업은 다음과 같습니다.
브라우저
8. FireFox는 색상을 Hex 대신 RGB 형식으로 읽고 반환합니다.
지금까지는 잘 이해하지 못했습니다. Mozilla의 이유는 다음과 같습니다. 명확한 이해를 위해 다음 예를 살펴보세요.
코드 복사
코드는 다음과 같습니다. 안녕하세요!
< ;script>
var ie = navigator.appVersion.indexOf('MSIE') !=-1
var p = document.getElementById('somePara'); 즉, p.currentStyle.color : getCompulatedStyle(p, null).color)
대부분의 브라우저의 팝업 결과는 ff9900인데, FireFox의 결과는 RGB 형태로 rgb(255, 153, 0)입니다. 색상을 다룰 때 RGB 색상을 Hex로 변환하기 위해 많은 코드를 사용해야 하는 경우가 많습니다.
다음은 다양한 브라우저에서 위 코드의 결과입니다:
기타 기타
9.0.1 0.2 !== 0.3
이 이상한 문제는 JavaScript에서만 나타나는 것이 아닙니다. , 이는 컴퓨터 과학의 일반적인 문제이며 많은 언어에 영향을 미칩니다. 제목 방정식은 0.30000000000000004를 출력합니다.
이것은 기계 정밀도라는 문제입니다. JavaScript가 (0.1 0.2) 코드 줄을 실행하려고 하면 값을 선호하는 바이너리 버전으로 변환합니다. 여기서 문제가 시작됩니다. 0.1은 실제로 0.1이 아니라 이진 형식입니다. 본질적으로 이러한 값을 적어두면 정밀도가 떨어질 수밖에 없습니다. 간단한 소수점 이하 두 자리만 원할 수도 있지만 Chris Pine의 의견에 따르면 얻을 수 있는 것은 이진 부동 소수점 계산입니다. 예를 들어, 한 단락을 중국어 간체로 번역하려고 하는데 결과가 전통적이라면 여전히 차이가 있습니다.
이와 관련된 문제를 처리하는 방법은 일반적으로 두 가지가 있습니다.
정수로 변환한 후 계산하고, 계산이 완료된 후 원하는 소수점 이하로 변환합니다
논리를 조정하고 권한을 설정하세요. 범위가 지정된 결과가 아닙니다.
예를 들어 다음과 같으면 안 됩니다.
var num1=0.1, num2=0.2, shouldEqual=0.3;
alert(num1 num2 == shouldEqual); //false
다음을 시도해 보세요. 🎜>
alert(num1 num2 > shouldEqual - 0.001&& num1 num2 < shouldEqual 0.001); // true
10. 정의되지 않음을 정의할 수 있습니다
부드럽고 약간의 특이함으로 끝납니다. 이상하게 들릴 수도 있지만 정의되지 않음은 특별한 의미가 있고 변수가 정의되지 않았는지 확인하는 유일한 방법이지만 JavaScript의 예약어는 아닙니다. 따라서
var someVar
alert; (someVar = = 정의되지 않음); //Show true
지금까지는 모든 것이 차분하고 평범해 보이지만 줄거리는 항상 잔인합니다.
undefine ="나는 정의되지 않았습니다!"
var someVar
alert(someVar; == undefine ); // false 표시!
이것이 jQuery 소스 코드의 가장 바깥쪽 클로저 함수에 전달되지 않은 정의되지 않은 매개변수가 있는 이유입니다. 외부의 나쁜 행위자들이 이익을 얻습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-09-20 15:51:33
-
2024-09-20 15:47:32
-
2024-09-20 15:45:32
-
2024-09-20 15:39:32
-
2024-09-20 15:38:32
-
2024-09-20 15:27:32
-
2024-09-20 15:26:32
-
2024-09-20 15:12:32
-
2024-09-20 14:53:01
-
2024-09-20 14:51:01
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
