JavaScript 프로그래밍 학습 기술 요약_javascript 기술

본 글의 예시는 참고용으로 JavaScript 프로그래밍 학습 스킬을 공유하고 있습니다.

1. 변수 변환

varmyVar="3.14159",

str=""+myVar,//tostring

int=~~myVar,//tointeger

float=1*myVar,//tofloat

bool=!!myVar,/*toboolean-anystringwithlength

andanynumberexcept0aretrue*/

array=[myVar];//toarray

그러나 날짜(new Date(myVar))와 정규식(new RegExp(myVar))을 변환하려면 생성자를 사용해야 합니다. 정규식을 만들 때 /pattern/flags와 같은 단순화된 형식을 사용하세요.

2. 반올림과 수치 변환을 동시에

//字符型变量参与运算时，JS会自动将其转换为数值型（如果无法转化，变为NaN）

'10.567890'|0

//结果:10

//JS里面的所有数值型都是双精度浮点数,因此，JS在进行位运算时，会首先将这些数字运算数转换为整数，然后再执行运算

//|是二进制或，x|0永远等于x；^为异或，同0异1，所以x^0还是永远等于x；至于~是按位取反，搞了两次以后值当然是一样的

'10.567890'^0

//结果:10

-2.23456789|0

//结果:-2

3. 날짜를 값으로 변환

//JS本身时间的内部表示形式就是Unix时间戳，以毫秒为单位记录着当前距离1970年1月1日0点的时间单位

vard=+newDate();//1295698416792

4. 배열형 객체를 배열로 변환

vararr=[].slice.call(arguments)

下面的实例用的更绝

functiontest(){

varres=['item1','item2']

res=res.concat(Array.prototype.slice.call(arguments))//方法1

Array.prototype.push.apply(res,arguments)//方法2

}

5. 기지 간 전환

(int).toString(16);//convertsinttohex,eg12=>"C"

(int).toString(8);//convertsinttooctal,eg.12=>"14"

parseInt(string,16)//convertshextoint,eg."FF"=>255

parseInt(string,8)//convertsoctaltoint,eg."20"=>16

将一个数组插入另一个数组指定的位置

vara=[1,2,3,7,8,9];

varb=[4,5,6];

varinsertIndex=3;

a.splice.apply(a,Array.prototype.concat(insertIndex,0,b));

6. 배열 요소 삭제

vara=[1,2,3,4,5];

a.splice(3,1);//a=[1,2,3,5]

delete 대신 splice를 사용해야 하는 이유가 궁금할 수 있습니다. 삭제를 사용하면 배열에 구멍이 생기고 후속 첨자가 감소되지 않기 때문입니다.
7. IE인지 확인

varie=/*@cc_on!@*/false;

이렇게 간단한 문장으로도 ie 여부를 판단할 수 있습니다. . .

사실 더 멋진 방법이 있으니 아래를 참고해주세요

//edithttp://www.lai18.com

//貌似是最短的，利用IE不支持标准的ECMAscript中数组末逗号忽略的机制

varie=!-[1,];

//利用了IE的条件注释

varie=/*@cc_on!@*/false;

//还是条件注释

varie//@cc_on=1;

//IE不支持垂直制表符

varie='v'=='v';

//原理同上
varie=!+"v1";

이 말을 듣는 순간 마음이 약해졌습니다.

최대한 네이티브 메소드를 사용하세요

숫자 집합에서 최대 수를 찾으려면 다음과 같은 루프를 작성할 수 있습니다.

varnumbers=[3,342,23,22,124];

varmax=0;

for(vari=0;i

if(numbers[i]>max){

max=numbers[i];

}

}

alert(max);

실제로 네이티브 메소드를 사용하면 더 쉽게 구현할 수 있습니다

varnumbers=[3,342,23,22,124];

numbers.sort(function(a,b){returnb-a});

alert(numbers[0]);

물론 가장 간단한 방법은 다음과 같습니다.

Math.max(12,123,3,2,433,4);//returns433

지금도 가능합니다

[xhtml]view plaincopy

Math.max.apply(Math,[12,123,3,2,433,4])//取最大值

Math.min.apply(Math,[12,123,3,2,433,4])//取最小值

8. 난수 생성

Math.random().toString(16).substring(2);//toString()函数的参数为基底，范围为2~36。

Math.random().toString(36).substring(2);

타사 변수를 사용하지 않고 두 변수의 값을 교환합니다

a=[b,b=a][0];

9. 이벤트 위임

js 코드는 다음과 같습니다.

//Classiceventhandlingexample

(function(){

varresources=document.getElementById('resources');

varlinks=resources.getElementsByTagName('a');

varall=links.length;

for(vari=0;i

//Attachalistenertoeachlink

links[i].addEventListener('click',handler,false);

};

functionhandler(e){

varx=e.target;//Getthelinkthatwasclicked

alert(x);

e.preventDefault();

};

})();

이벤트 위임을 사용하여 더욱 우아하게 작성하세요:

(function(){

varresources=document.getElementById('resources');

resources.addEventListener('click',handler,false);

functionhandler(e){

varx=e.target;//getthelinktha

if(x.nodeName.toLowerCase()==='a'){

alert('Eventdelegation:'+x);

e.preventDefault();

}

};

})();

10.IE 버전 확인

var_IE=(function(){

varv=3,div=document.createElement('div'),all=div.getElementsByTagName('i');

while(

div.innerHTML='',

all[0]

);

returnv>4?v:false;

}());

자바스크립트 버전 감지

귀하의 브라우저가 어떤 버전의 Javascript를 지원하는지 알고 계시나요?

varJS_ver=[];

(Number.prototype.toFixed)?JS_ver.push("1.5"):false;

([].indexOf&&[].forEach)?JS_ver.push("1.6"):false;

((function(){try{[a,b]=[0,1];returntrue;}catch(ex){returnfalse;}})())?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("LatestJavascriptversionsupported:"+JS_ver.supports());

alert("Supportforversion1.7:"+JS_ver.supports("1.7"));

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

//BAD:Thiswillcauseanerrorincodewhenfooisundefined

if(foo){

doSomething();

}
//GOOD:Thisdoesn'tcauseanyerrors.However,evenwhen

//fooissettoNULLorfalse,theconditionvalidatesastrue

if(typeoffoo!="undefined"){

doSomething();

}
//BETTER:Thisdoesn'tcauseanyerrorsandinaddition

//valuesNULLorfalsewon'tvalidateastrue

if(window.foo){

doSomething();

}

때로는 구조가 더 깊어서 더 적절한 검사가 필요할 때도 있습니다

//UGLY:wehavetoproofexistenceofevery

//objectbeforewecanbesurepropertyactuallyexists

if(window.oFoo&&oFoo.oBar&&oFoo.oBar.baz){

doSomething();

}

실제로 속성 존재 여부를 감지하는 가장 좋은 방법은 다음과 같습니다.

if("opera"inwindow){

console.log("OPERA");

}else{

console.log("NOTOPERA");

}

12. 객체가 배열인지 확인

varobj=[];

Object.prototype.toString.call(obj)=="[objectArray]";

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.