당신이 모를 수도 있는 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진수로, 예: 12 => "14"
parseInt(string,16) // 16진수를 int로 변환, 예: "FF" => 255
parseInt(string,8) // 8진수를 8진수로 변환 int, 예: "20" => 16
3. 숫자를 가지고 놀아보세요
이전 섹션에서 소개한 것 외에도 숫자 처리에 대한 추가 팁은 다음과 같습니다.
0xFF; 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 (인수[0])
　return (!!~this.join().indexOf (인수[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();
}
// GOOD: 오류가 발생하지 않습니다. 그러나
// foo가 NULL 또는 false로 설정된 경우에도 조건은 true로 검증됩니다
if (typeof foo != "undefine") {
DoSomething ();
}
// 더 나은 점: 오류가 발생하지 않으며 추가로
// ​​NULL 또는 false 값은 (window.foo)인 경우 true로 검증되지 않습니다
{
　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 || || 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 = "Flop: [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에는 다음이 포함됩니다:
// " 실패: [Ace of Hearts] [King of Spades] [Seven of Clubs]"
10. 루프에서 레이블 사용www.2cto.com
경우에 따라 루프가 루프 내에 중첩됩니다. 종료하려면 루프에서는 다음 라벨을 사용할 수 있습니다.
outerloop:
for (var iI=0;iI　if (somethingIsTrue()) {
　 // 외부 루프 중단 반복
break externalloop; 내부 루프 반복
　break innerloop;
　}
　}
}