JavaScript 프로그래밍_javascript 기술을 위한 10가지 실용적인 팁

이 글에서는 주로 Javascript 초보자와 중급 개발자를 위한 10가지 실용적인 Javascript 팁을 나열하겠습니다. 모든 독자가 이 책에서 적어도 하나의 유용한 팁을 배울 수 있기를 바랍니다.

1. 변수 변환

간단해 보이지만 제가 본 바로는 Array() 또는 Number()와 같은 생성자를 사용하여 변수를 변환하는 것이 일반적인 관행입니다. 변수를 변환하려면 항상 기본 데이터 유형(때때로 리터럴이라고도 함)을 사용하십시오. 이는 추가적인 영향은 없지만 더 효율적입니다.

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

var myVar = "3.14159",
str = "" myVar , // 문자열로
int = ~~myVar, // 정수로
float = 1*myVar, // 부동으로
bool = !!myVar, /* 부울로 - 모든 문자열 길이가
이고 0을 제외한 모든 숫자는 true입니다. */
array = [myVar] // 배열

날짜(new Date(myVar))와 정규식(new RegExp(myVar))을 변환하려면 생성자를 사용해야 하며, 정규식을 생성할 때는 /pattern/flags 형식을 사용해야 합니다.

2. 10진수를 16진수나 8진수로 변환하거나 그 반대로 변환합니다.

16진수(또는 8진수)를 변환하는 별도의 함수를 작성할 수 있나요? 이제 그만하세요! 사용 가능한 더 쉬운 기성 기능이 있습니다:

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

(int ).toString(16); // int를 16진수로 변환합니다. 예: 12 => "C"
(int).toString(8); // int를 8진수로 변환합니다. ; "14"
parseInt(string,16) // 16진수를 정수로 변환합니다. 예: "FF" => 255
parseInt(string,8) // 8진수를 정수로 변환합니다. =>16

3. 숫자 놀이

이전 섹션에서 소개한 내용 외에도 숫자 처리에 대한 추가 팁은 다음과 같습니다.

코드 복사 코드

0xFF; // 16진수 선언, 255 반환
020; // 8진수 선언, 16 반환
1e3 // 지수, 1과 동일 * Math.pow (10,3 ), 1000 반환
(1000).toExponential(); // 이전과 반대, 1e3 반환
(3.1415).toFixed(3) // 숫자를 반올림하여 "3.142"를 반환합니다. 🎜>

4.Javascript 버전 감지

귀하의 브라우저가 어떤 버전의 Javascript를 지원하는지 알고 계시나요? 모르신다면 위키피디아에 가서 자바스크립트 버전표를 확인해 보세요. 어떤 이유로 Javascript 1.7의 일부 기능은 널리 지원되지 않습니다. 그러나 대부분의 브라우저는 버전 1.8 및 1.8.1의 기능을 지원합니다. (참고: 모든 IE 브라우저(IE8 이하)는 Javascript 버전 1.5만 지원합니다.) 다음은 기능을 감지하여 JavaScript 버전을 감지할 수 있을 뿐만 아니라 특정 Javascript 버전에서 지원하는 기능을 확인할 수 있는 스크립트입니다.

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

var JS_ver = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
(( function() {try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?JS_ver.push("1.7"):false;
([ ].reduce && [].reduceRight && JSON)?JS_ver.push("1.8"):false;
("".trimLeft)?JS_ver.push("1.8.1"):false;
JS_ver .supports = function()
{
　if (arguments[0])
　 return (!!~this.join().indexOf(arguments[0] ",") "," );
else
return (this[this.length-1]);
}
alert("지원되는 최신 Javascript 버전: " JS_ver.supports());
alert(" 버전 1.7 지원 : " JS_ver.supports("1.7"));

5. 간단한 세션 처리를 위해 window.name을 사용하세요

제가 정말 좋아하는 내용이에요. 탭이나 창을 닫을 때까지 문자열을 window.name 속성의 값으로 지정할 수 있습니다. 스크립트를 제공하지는 않았지만 이 방법을 활용하는 것이 좋습니다. 예를 들어 웹사이트나 애플리케이션을 구축할 때 디버그 모드와 테스트 모드 사이를 전환하는 것은 매우 유용합니다.

6. 속성이 존재하는지 확인

이 문제에는 속성의 존재 여부를 확인하는 것뿐만 아니라 속성의 유형을 가져오는 두 가지 측면이 포함됩니다. 하지만 우리는 항상 이런 작은 것들을 간과합니다:

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

// 나쁨: foo가 정의되지 않은 경우 코드에 오류가 발생합니다.
if (foo) {
　doSomething();
}
// 좋음: 그렇지 않습니다. 그러나
// foo가 NULL 또는 false로 설정된 경우에도 조건은 true로 검증됩니다
if (typeof foo != "undefine") {
　doSomething();
}
// 더 나은 점: 오류가 발생하지 않으며 추가로
// ​​NULL 또는 false 값은 true로 검증되지 않습니다.
if (window.foo) {
　doSomething () ;
}

그러나 경우에 따라 더 깊은 구조가 있고 더 적절한 검사가 필요한 경우 다음과 같이 할 수 있습니다.

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

// UGLY: 속성이 실제로 존재하는지 확인하기 전에 모든
// 개체의 존재를 증명해야 합니다.
if ( window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
　doSomething();
}

7. 매개변수를 함수에 전달합니다.

함수에 필수 매개변수와 선택 매개변수가 모두 있는 경우 다음과 같이 할 수 있습니다.

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

function doSomething(arg0, arg1, arg2, arg3, arg4) {
　...
}
doSomething('', 'foo', 5, [], false);

객체를 전달하는 것이 여러 매개변수를 전달하는 것보다 항상 더 편리합니다.

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

function doSomething() {
　// 아무것도 전달되지 않으면 함수를 종료합니다.
　if (!arguments[0]) {
　return false;
　}
var oArgs = 인수[0]
arg0 = oArgs.arg0 || "",
arg1 = oArgs.arg1 || "",
arg2 = oArgs.arg2 || 0,
arg3 = oArgs.arg3 || [],
arg4 = oArgs.arg4 || false;
}
doSomething({
arg1 : "foo",
arg2 : 5,
arg4 : false
});

이것은 객체를 매개변수로 전달하는 아주 간단한 예입니다. 예를 들어 변수 이름을 다음과 같이 선언할 수도 있습니다. 키와 기본값은 값입니다.

8. document.createDocumentFragment() 사용

문서에 여러 요소를 동적으로 추가해야 할 수도 있습니다. 그러나 문서에 직접 삽입하면 매번 문서의 레이아웃을 다시 지정해야 합니다. 대신 문서 조각을 사용하고 완료 후 한 번만 추가해야 합니다.

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

function createList() {
　var aLI = ["첫 번째 항목", "두 번째 항목", "세 번째 항목 ",
"네번째 항목", "맞는 항목"];
// 조각을 생성합니다
var oFrag = document.createDocumentFragment();
while (aLI.length) {
var oLI = document.createElement("li");
// 배열에서 첫 번째 항목을 제거하고
// LI 요소에 텍스트 노드로 추가합니다
oLI.appendChild(document.createTextNode(aLI. Shift()) );
　oFrag.appendChild(oLI);
　}
　document.getElementById('myUL').appendChild(oFrag);
}

9. replacement() 메소드에 함수를 전달합니다

가끔 문자열의 특정 부분을 다른 값으로 바꾸고 싶을 때가 있습니다. 가장 좋은 방법은 String.replace()에 별도의 함수를 전달하는 것입니다. 다음은 간단한 예입니다.

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

var sFlop = "플롭: [Ah] [Ks] [7c]";
var aValues ​​​​= {"A":"Ace","K":"King",7:"Seven"};
var aSuits = {"h ":"Hearts","s":"Spades",
"d":"Diamonds","c":"Clubs"};
sFlop = sFlop.replace(/ [w ]/gi, function(match) {
　match = match.replace(match[2], aSuits[match[2]]);
match = match.replace(match[1], aValues[ match[1]] " of ");
　return match;
});
// string sFlop에는 이제 다음이 포함됩니다.
// "Flop: [Ace of Hearts] [King of Spades] [세븐 오브 클럽]'

10. 루프에서 라벨 사용

때때로 루프 내에 중첩된 루프가 있을 수 있으므로 루프 내에서 종료하여 태그를 사용할 수 있습니다.

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

외부 루프:
for (var iI=0;iI　if (somethingIsTrue()) {
// 외부 루프 반복 중단
break externalloop;
}
innerloop:
for (var iA=0;iA if (somethingElseIsTrue()) {
// 내부 루프 반복을 중단합니다
　break innerloop;
　}
　}
}