자바스크립트 활용 스킬 모음 [권장]_javascript 스킬-JS 튜토리얼-php.cn

부울 유형으로 변환
JavaScript의 모든 값은 다음과 같이 암시적으로 부울 유형으로 변환될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 0 == false; // true 1 == true; // true '' == false // true null == false // true 

하지만 이 값은 부울 유형이 아닙니다.
따라서 비교를 위해 세 개의 등호를 사용하는 경우:

코드 복사 코드는 다음과 같습니다.

 0 = = = false; // false 1 === true; // false '' === false // false null === false // false 

이제 문제는 다른 유형을 부울 유형으로 변환하는 방법입니다. 🎜 >

코드 복사 코드는 다음과 같습니다.

!!0 === false !!1 == = true; / / true !!'' === false // true !!null === false // true

매개변수에 초기값 지정자바스크립트에는 반복이 없습니다. 로딩의 개념이지만, 자바스크립트에서 함수의 매개변수는 선택사항입니다. 호출 시 매개변수 하나가 누락되면
정의되지 않음으로 대체됩니다.

코드 복사 코드는 다음과 같습니다.

function plus(base, added) { return base added; 2); // NaN

이 예에서

plus(2)과 plus(2, undefine)은 동일하며 2 undefine은 NaN입니다. 이제 문제는 두 번째 매개변수가 전달되지 않은 경우 초기 값을 어떻게 할당할 것인가입니다.

코드 복사 코드는 다음과 같습니다. function plus(base, added) { added = added 1; return base added ; } plus(2); // 4

일부 네티즌들은 plus(2, 0) = 3을 언급했습니다. 이것은 특별한 처리가 필요한 것 같습니다:

코드 복사 코드는 다음과 같습니다: function plus( 기본, 추가됨) { 추가됨 = 추가됨 || (추가됨 === 0 ? 0 : 1); 반환 기본 추가됨 }

다른 사람이 Iframe에서 페이지를 로드하지 못하도록 방지
웹사이트가 인기를 얻으면 많은 웹사이트가 귀하의 웹사이트에 링크하고 싶고 IFrame을 통해 귀하의 웹페이지를 자체 웹페이지에 삽입하려고 할 것입니다. 재밌지도 않은데 어떻게 하면 이런 행동을 멈출 수 있을까요?

코드 복사 코드는 다음과 같습니다. if(top !== window) { top.location.href = window.location .href; }

이 코드는 각 페이지의

head

에 배치되어야 합니다. 누군가가 실제 생활에서 이 코드를 사용하는지 알고 싶다면 Baidu의 코드를 살펴보세요. 블로그를 방문하면 알게 될 것입니다.

문자열 교체
String.prototype.replace
함수는 C# 또는 Java에 매우 익숙한 프로그래머를 혼란스럽게 만드는 경우가 많습니다. 예:

코드 복사 코드는 다음과 같습니다. 'Hello world, hello world'.replace ('world' , 'JavaScript'); // 결과는 "Hello JavaScript, hello world"입니다.

replace

함수의 첫 번째 매개변수는 정규 표현식입니다. 첫 번째 매개변수로 문자열을 전달하면 일치하는 첫 번째 문자열만 교체됩니다. 이 문제를 해결하려면 정규식을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. ' Hello world , hello world'.replace(/world/g, 'JavaScript'); // 결과는 "Hello JavaScript, hello JavaScript"입니다.

교체할 때 대소문자를 무시하도록 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다. 'Hello world, hello world'.replace(/hello/gi, 'Hi') / / 결과는 "Hi world, Hi world" 입니다

인수를 배열로 변환
함수에 미리 정의된 변수 arguments는 실제 배열이 아니라 배열과 유사한 객체입니다.
length 속성은 있지만 슬라이스, 푸시, 정렬 등의 기능은 없습니다. 따라서 인수를 만드는 방법은 이러한 경우에만 사용할 수 있는 기능이 있습니다. 배열?
즉, 인수를 실제 배열로 만드는 방법은 무엇일까요?

코드 복사 코드는 다음과 같습니다.

 function args() { return [].slice.call(arguments, 0); } args(2, 5, 8); // [2, 5, 8] 

parseInt 함수의 두 번째 매개변수 지정
parseInt 문자열을 정수로 변환하는 데 사용되는 구문은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

parseInt( str, [radix])

두 번째 매개변수는 선택사항이며 첫 번째 매개변수의 10진수를 지정하는 데 사용됩니다.
두 번째 매개변수가 전달되지 않으면 다음 규칙을 따릅니다.
-> str이 0x로 시작하면 16진수로 간주됩니다.
->str이 0으로 시작하면 8진수로 간주됩니다.
-> 그렇지 않으면 소수로 간주됩니다.
따라서 다음 코드는 규칙을 모르면 헷갈릴 수 있습니다.

코드 복사 코드는 다음과 같습니다.

parseInt('08'); // 0 parseInt('08', 10); // 8

따라서 안전상의 이유로 parseInt에 대한 두 번째 매개변수를 지정해야 합니다. .

배열에서 요소 삭제
아마도 delete로 할 수 있을 것입니다:

코드 복사 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4, 5]; delete arr[1]; 3, 4, 5]

보시다시피 delete는 실제로 배열의 요소를 삭제할 수 없습니다. 삭제된 요소는 undefine으로 대체되며 배열의 길이는 변경되지 않습니다.

실제로 아래와 같이 Array.prototype의 splice 함수를 통해 배열의 요소를 삭제할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arr = [1, 2, 3, 4, 5] // [1] , 3 , 4, 5]

함수도 객체입니다
JavaScript에서는 함수에 속성을 추가할 수 있으므로 함수도 객체입니다.
예:

코드 복사 코드는 다음과 같습니다.

function add() { return add.count ; } add.count = 0; add(); // 1 add(); // 2

add 함수에 추가했습니다. , 이 함수가 호출된 횟수를 기록하는 데 사용됩니다. 물론 이는 더 우아한 방법으로 달성할 수 있습니다.

코드 복사 코드는 다음과 같습니다. arguments.callee

는 현재 실행 중인 함수를 가리킵니다.

배열의 최대값

숫자로 가득 찬 배열에서 최대값을 찾는 방법은 루프를 통해 간단하게 찾을 수 있습니다.

코드 복사

코드는 다음과 같습니다. var arr = [2, 3, 45, 12, 8]; 0]; for (var i in arr) { if(arr[i] > max) { max = arr[i] } } max; // 45 다른 방법이 있나요? 우리 모두는 JavaScript에 숫자를 처리하는 Math

개체가 있다는 것을 알고 있습니다.

코드 복사

코드는 다음과 같습니다. Math.max(2, 3, 45, 12, 8) // 45 그러면 다음과 같이 배열에서 최대값을 찾을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arr = [2, 3, 45, 12, 8]; Math.max.apply(null, arr); // 45

console.log 추가 IE용 기능
Firefox와 Firebug의 지원으로 console.log를 사용하여 콘솔에 일부 정보를 기록하는 경우가 많습니다.
그러나 이 접근 방식은 현재 console 개체가 전혀 없기 때문에 IE에서 JavaScript 실행을 방지합니다(Firefox에서 Firebug가 활성화되지 않은 경우에도 마찬가지).
다음 팁을 사용하여 이러한 상황이 발생하지 않도록 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 if ( typeof(console) === '정의되지 않음') { window.console = { 로그: function(msg) { 경고(msg) } } } console.log('디버그 정보.'); 

정의되지 않음은 JavaScript의 예약어인가요? 처럼 보이지만 실제로 undefound는 JavaScript의 키워드가 아닙니다.

코드 복사 코드는 다음과 같습니다.

var undefine = 'Hello'; // 'Hello'

 이 코드는 이상하게 보일 수도 있지만 실제로는 작동합니다. . 

참고: JavaScript 프로그램에서는 이 작업을 수행하지 마십시오. 이 트릭은 단지 이것이 사실임을 알려줄 뿐입니다.

변수가 정의되지 않았는지 확인

두 가지 경우에 변수가 정의되지 않았습니다. 1. 변수가 선언되었지만 값이 할당되지 않았습니다.

코드 복사 코드는 다음과 같습니다. var name; name === undefine; 선언된 적이 없습니다. 변수

코드 복사

코드는 다음과 같습니다. name2 === undefine; – name2가 정의되지 않았습니다 두 번째 경우에는 오류가 발생하는데 오류가 발생하지 않고 변수가 정의되지 않았는지 확인하면 어떻게 될까요? 일반적인 방법은 아래와 같습니다.

코드 복사

코드는 다음과 같습니다. typeof(name2) = = = 'undefine'; // true

이미지 미리 로드

이미지 미리 로드는 나중에 빠르게 표시할 수 있도록 페이지에 없는 이미지를 로드하는 것입니다. JavaScript를 사용합니다.
예를 들어 사진 위에 마우스를 올렸을 때 다른 사진을 표시하고 싶다면

코드를 복사하세요

코드는 다음과 같습니다. : var img = new Image(); img.src = "clock2.gif"

코드 복사

코드는 다음과 같습니다.

그럼 이미지 세트는 어떻게 로드하나요? 다음 코드를 고려하세요.

코드 복사

코드는 다음과 같습니다. var source = ['img1.gif', 'img2.gif']; var img = new Image(); for(var i = 0; i < source.length; i ) { img.src = source[i] } 실제로 이 코드는 루프가 올 때 다른 이미지를 미리 로드할 시간이 없기 때문에 마지막 이미지만 로드할 수 있습니다. 따라서 올바른 작성 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. var source = ['img1.gif','img2.gif']; for(var i = 0; i < source.length; i ) { var img = new Image() = source[i] }

클로저
클로저는 함수 내의 지역 변수를 말하며, 함수가 반환될 때에도 계속 사용할 수 있습니다.
함수 내부에 다른 함수를 정의할 때 유명한 예인 클로저를 생성합니다.

코드 복사 코드는 다음과 같습니다.

 function add(i) { return function() { return i } } add(2).toString() // "function () { return i; }" add(2 )(); // 3 

add(2)는 외부 함수의 지역 변수 i를 얻을 수 있는 함수입니다.
참고 기사

개인 변수
우리는 변수가 개인 변수인지 여부를 나타 내기 위해 종종 명명 규칙을 사용합니다(가장 일반적으로 사용되는 표시) :

코드 복사 코드는 다음과 같습니다.

 var person = { _name: '', getName: function () { return this ._name || '정의되지 않음'; } }; // "정의되지 않음" 

밑줄 접두어는 비공개 변수에 대한 규칙으로 사용됩니다. 여전히 이 개인 변수를 호출하세요:

코드 복사 코드는 다음과 같습니다:

 person._name; 🎜> 그렇다면 JavaScript로 실제 사람을 만드는 방법은 Private 변수는 어떨까요? 

가장 중요한 비결은 익명 함수와 클로저를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var person = {} (function() { var _name = ' '; person .getName = function() { return _name || '정의되지 않음'; })(); // "정의되지 않음" typeof(person._name); 🎜>

JavaScript에는 블록 수준 컨텍스트(Scope)가 없습니다.
JavaScript의 블록 수준 코드에는 실제로 컨텍스트가 없습니다.

코드 복사 코드는 다음과 같습니다. for(var i = 0; i < 2; i ) { } i; // 2

컨텍스트를 생성하려면 자체 실행 익명 함수를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다: (function (){ for(var i = 0; i < 2; i ) { } })(); / true

Weird NaN
NaN은 값이 숫자가 아님을 나타내는 데 사용됩니다. NaN은 어떤 값(자기 자신 포함)과도 동일하지 않기 때문에 JavaScript에서 이상하게 동작합니다.

코드 복사 코드는 다음과 같습니다. NaN === NaN // false

다음과 같습니다. 코드는 일부 사람들을 미치게 만들 수 있습니다:

코드 복사 코드는 다음과 같습니다: parseInt('hello', 10) ; // NaN parsInt('hello', 10) == NaN; // false parseInt('hello', 10) === NaN; // false

그러면 값이 NaN인지 확인하는 방법은 무엇입니까? > window.isNaN을 사용하여 판단할 수 있습니다:

코드 복사 코드는 다음과 같습니다. isNaN(parseInt(' hello', 10)); // true

True 및 false 값

JavaScript의 모든 값은 암시적으로 Boolean 유형으로 변환될 수 있습니다. 조건부 판단에서는 다음 값이 자동으로 false로 변환됩니다:
null, undefine, NaN, 0, '', false

따라서 그럴 필요가 없습니다. 다음과 같이 복잡한 판단을 하게 됩니다.

코드 복사 코드는 다음과 같습니다. if(obj === undefine || obj === null) { } 이렇게 하세요:

코드 복사 코드는 다음과 같습니다.

if(!obj) { }

인수 수정
예를 들어 인수에 값을 추가합니다.

코드 복사 코드는 다음과 같습니다.

 function add() { 인수.push('새 값') } add(); // 오류 - 인수. push는 함수가 아닙니다. 

는 인수가 실제 배열이 아니고 푸시 메서드가 없기 때문에 잘못될 것입니다.
해결책:

코드 복사 코드는 다음과 같습니다.

 function add() { Array.prototype.push .call (인수, '새 값'); 반환 인수; } add()[0]; // "새 값" 

부울 및 새 부울
부울을 부울 유형 값을 생성하는 데 사용되는 함수로 생각할 수 있습니다(리터럴):

코드 복사 코드는 다음과 같습니다.

Boolean(false) === false; // true Boolean('') === false; // true

따라서 Boolean(0) 및 !!0동등합니다.
Boolean을 생성자로 간주하고 new를 통해 Boolean 유형 객체를 생성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

 new Boolean(false) === false; // false new Boolean(false) == false; // true typeof(new Boolean(false)); typeof(Boolean(false)); // "boolean" 

빠른 문자열 연결
우리는 종종 을 사용하여 짧은 문자열을 연결합니다. 긴 문자열 하나. 대부분의 경우 괜찮습니다.
그러나 연결해야 할 문자열이 많은 경우 이 접근 방식은 특히 IE에서 성능 문제에 직면하게 됩니다.

코드 복사 코드는 다음과 같습니다.

 var startTime = new Date(); '; for (var i = 0; i < 50000; i ) { str = i; } Alert(new Date() - startTime); // Firefox - 18ms, IE7 - 2060ms 

코드 복사 코드는 다음과 같습니다.

 var startTime = new Date(); for (var i = 0; i < 100000; i ) { arr.push(i) } var str = arr.join(""); // Firefox - 38ms, IE7 - 280ms 🎜> Firefox를 볼 수 있습니다. 

연산자가 최적화된 것 같은데 IE는 바보처럼 행동합니다.
단항 연산자
JavaScript에서는 문자열 앞에 단항 연산자 " "를 사용할 수 있습니다. 문자열을 숫자로 변환하고, 변환이 실패하면 NaN을 반환합니다.

코드 복사 코드는 다음과 같습니다. 2 '1' 2 ( '1' ); // 3

문자열이 아닌 것 앞에 사용되는 경우 변환 시도는 다음 순서로 이루어집니다.

valueOf()를 호출하고 toString()을 호출하여 숫자로 변환합니다.

코드 복사 코드 new Date; // 1242616452016 new Date === new Date().getTime(); // true new Date() === Number(new Date) // true

참고 기사

encodeURI 및 encodeURIComponent
window.encodeURI 함수는 URL을 인코딩하는 데 사용되지만 다음 문자는 인코딩되지 않습니다. ":", "/", " ;", "?". window.encodeURIComponent는 위 문자를 인코딩합니다.
예를 들어 설명합니다.

코드 복사 코드는 다음과 같습니다. 'index.jsp?page =' encodeURI('/page/home.jsp'); // "index.jsp?page=/page/home.jsp" 'index.jsp?page=' encodeURIComponent('/page/home.jsp'); // "index.jsp?page=/page/home.jsp"

따라서 URL을 인코딩할 때 encodeURIComponent를 선택하는 경우가 많습니다.

table.innerHTML은 IE에서 읽기 전용 속성입니다.
우리는 종종 다음과 같이 노드의 innerHTML 속성을 통해 노드를 채웁니다.

코드 복사 코드는 다음과 같습니다.

/div> >

코드 복사 코드는 다음과 같습니다.

document.getElementById('container1').innerHTML = "Hello World !";

하지만 IE에서

table.innerHTML을 설정하면 오류가 발생합니다.

코드 복사 코드

코드 복사 코드는 다음과 같습니다.

// Firefox에서는 잘 작동하지만 IE에서는 작동하지 않습니다. document.getElementById('table1').innerHTML = "HelloWorld!< ;/tr>";

 실제로 table, thead, tr, select 및 기타 요소의 innerHTML 속성은 IE에서 모두 읽기 전용입니다. 

따라서 동적으로 테이블을 생성하는 경우 다음과 같은 방법이 가능합니다.

코드 복사 코드는 다음과 같습니다. :

코드 복사

document.getElementById('table1').innerHTML = "";

0.1 0.2 != 0.3JavaScript는 소수를 부동 소수점 숫자로 처리하므로 반올림 오류가 발생할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

0.1 0.2; // 0.30000000000000004

 지정할 수 있습니다. toFixed 메소드를 통한 반올림 소수 자릿수: 

코드 복사 코드는 다음과 같습니다:

(0.1 0.2) .toFixed(); // "0" ( 0.1 0.2).toFixed(1) // "0.3"