この記事の例では、参考のために 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]
なぜ削除ではなくスプライスを使用する必要があるのか疑問に思われるかもしれません。削除を使用すると配列に穴が残り、後続の添え字がデクリメントされないからです。
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);
サードパーティ変数を使用せずに 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 のバージョン検出
あなたのブラウザがサポートしている 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]";
以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。