Home >Web Front-end >JS Tutorial >Summary of JavaScript programming learning skills_javascript skills

Summary of JavaScript programming learning skills_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:14:251220browse

The examples in this article share JavaScript programming learning skills for your reference. The specific content is as follows

1. Variable conversion

varmyVar="3.14159",

str=""+myVar,//tostring

int=~~myVar,//tointeger

float=1*myVar,//tofloat

bool=!!myVar,/*toboolean-anystringwithlength

andanynumberexcept0aretrue*/

array=[myVar];//toarray

However, you must use the constructor to convert dates (new Date(myVar)) and regular expressions (new RegExp(myVar)). When creating regular expressions, use simplified forms such as /pattern/flags.

2. Round and convert to numerical value at the same time

//字符型变量参与运算时,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. Convert date to value

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

vard=+newDate();//1295698416792

4. Convert array-like object to array

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. Conversion between bases

(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. Delete array elements

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

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

You may wonder why you should use splice instead of delete, because using delete will leave a hole in the array, and the subsequent subscripts will not be decremented.
7. Determine whether it is IE

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

Such a simple sentence can determine whether it is ie, too. . .

In fact, there are more wonderful ways, please see below

//edithttp://www.lai18.com

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

varie=!-[1,];

//利用了IE的条件注释

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

//还是条件注释

varie//@cc_on=1;

//IE不支持垂直制表符

varie='v'=='v';

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

The moment I learned this, I felt weak.

Use native methods as much as possible

To find the maximum number in a set of numbers, we might write a loop, for example:

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

varmax=0;

for(vari=0;i

if(numbers[i]>max){

max=numbers[i];

}

}

alert(max);

In fact, it can be implemented more easily using native methods

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

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

alert(numbers[0]);

Of course the simplest method is:

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

This is also possible now

[xhtml]view plaincopy

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

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

8. Generate random numbers

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

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

Exchange the values ​​of two variables without using third-party variables

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

9. Event delegation

js code is as follows:

//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();

};

})();

Use event delegation to write more elegantly:

(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. Check ie version

var_IE=(function(){

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

while(

div.innerHTML='',

all[0]

);

returnv>4?v:false;

}());

javaScript version detection

Do you know which version of Javascript your browser supports?

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. Determine whether the attribute exists

//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();

}

Sometimes we have deeper structures and need more appropriate inspections

//UGLY:wehavetoproofexistenceofevery

//objectbeforewecanbesurepropertyactuallyexists

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

doSomething();

}

In fact, the best way to detect whether an attribute exists is:

if("opera"inwindow){

console.log("OPERA");

}else{

console.log("NOTOPERA");

}

12. Check whether the object is an array

varobj=[];

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

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn