Die Beispiele in diesem Artikel vermitteln Kenntnisse zum Erlernen der JavaScript-Programmierung als Referenz. Der spezifische Inhalt ist wie folgt
1. Variablenkonvertierung
varmyVar="3.14159", str=""+myVar,//tostring int=~~myVar,//tointeger float=1*myVar,//tofloat bool=!!myVar,/*toboolean-anystringwithlength andanynumberexcept0aretrue*/ array=[myVar];//toarray
Sie müssen jedoch den Konstruktor verwenden, um Datumsangaben (new Date(myVar)) und reguläre Ausdrücke (new RegExp(myVar)) zu konvertieren. Verwenden Sie beim Erstellen regulärer Ausdrücke vereinfachte Formen wie /pattern/flags.
2. Runden und gleichzeitig in einen numerischen Wert umrechnen
//字符型变量参与运算时,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. Datum in Wert umrechnen
//JS本身时间的内部表示形式就是Unix时间戳,以毫秒为单位记录着当前距离1970年1月1日0点的时间单位 vard=+newDate();//1295698416792
4. Array-ähnliches Objekt in Array konvertieren
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. Umrechnung zwischen Basen
(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. Array-Elemente löschen
vara=[1,2,3,4,5]; a.splice(3,1);//a=[1,2,3,5]
Sie fragen sich vielleicht, warum Sie splice anstelle von delete verwenden sollten, da die Verwendung von delete eine Lücke im Array hinterlässt und die nachfolgenden Indizes nicht dekrementiert werden.
7. Bestimmen Sie, ob es sich um IE handelt
varie=/*@cc_on!@*/false;
So ein einfacher Satz kann auch bestimmen, ob es sich um ein Ie handelt. . .
Tatsächlich gibt es noch weitere wunderbare Möglichkeiten, siehe unten
//edithttp://www.lai18.com //貌似是最短的,利用IE不支持标准的ECMAscript中数组末逗号忽略的机制 varie=!-[1,]; //利用了IE的条件注释 varie=/*@cc_on!@*/false; //还是条件注释 varie//@cc_on=1; //IE不支持垂直制表符 varie='v'=='v'; //原理同上 varie=!+"v1";
Als ich das erfuhr, fühlte ich mich schwach.
Verwenden Sie so oft wie möglich native Methoden
Um die maximale Zahl in einer Zahlenmenge zu finden, könnten wir eine Schleife schreiben, zum Beispiel:
varnumbers=[3,342,23,22,124]; varmax=0; for(vari=0;i if(numbers[i]>max){ max=numbers[i]; } } alert(max);
Tatsächlich kann es mit nativen Methoden einfacher implementiert werden
varnumbers=[3,342,23,22,124]; numbers.sort(function(a,b){returnb-a}); alert(numbers[0]);
Die einfachste Methode ist natürlich:
Math.max(12,123,3,2,433,4);//returns433
Auch das ist jetzt möglich
[xhtml]view plaincopy Math.max.apply(Math,[12,123,3,2,433,4])//取最大值 Math.min.apply(Math,[12,123,3,2,433,4])//取最小值
8. Zufallszahlen generieren
Math.random().toString(16).substring(2);//toString()函数的参数为基底,范围为2~36。 Math.random().toString(36).substring(2);
Tauschen Sie die Werte zweier Variablen aus, ohne Variablen von Drittanbietern zu verwenden
a=[b,b=a][0];
9. Veranstaltungsdelegation
JS-Code lautet wie folgt:
//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(); }; })();
Verwenden Sie die Ereignisdelegation, um eleganter zu schreiben:
(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. Überprüfen Sie die Version
var_IE=(function(){ varv=3,div=document.createElement('div'),all=div.getElementsByTagName('i'); while( div.innerHTML='', all[0] ); returnv>4?v:false; }());
JavaScript-Versionserkennung
Wissen Sie, welche Javascript-Version Ihr Browser unterstützt?
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. Bestimmen Sie, ob das Attribut vorhanden ist
//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(); }
Manchmal haben wir tiefere Strukturen und benötigen angemessenere Inspektionen
//UGLY:wehavetoproofexistenceofevery //objectbeforewecanbesurepropertyactuallyexists if(window.oFoo&&oFoo.oBar&&oFoo.oBar.baz){ doSomething(); }
Tatsächlich lässt sich am besten feststellen, ob ein Attribut vorhanden ist:
if("opera"inwindow){ console.log("OPERA"); }else{ console.log("NOTOPERA"); }
12. Überprüfen Sie, ob das Objekt ein Array ist
varobj=[]; Object.prototype.toString.call(obj)=="[objectArray]";
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.