JavaScript编程学习技巧汇总


Posted in Javascript onFebruary 21, 2016

本文实例为大家分享了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]

大家也许会想为什么要用splice而不用delete,因为用delete将会在数组里留下一个空洞,而且后面的下标也并没有递减。
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版本检测

你知道你的浏览器支持哪一个版本的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程序设计有所帮助。

Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
JS实现复制功能
Mar 01 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 #Javascript
JSON简介以及用法汇总
Feb 21 #Javascript
javascript实现计时器的简单方法
Feb 21 #Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 #Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 #Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 #Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
destoon复制新模块的方法
2014/06/21 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
vue-loader教程介绍
2017/06/14 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
入党转预备思想汇报
2014/01/07 职场文书
留学推荐信怎么写
2014/01/25 职场文书
《木笛》教学反思
2014/03/01 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书