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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
详解JS数组方法
Nov 20 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与jquery设置和读取cookies
2013/08/08 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python编写实现抽奖器
2020/09/10 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
往来会计岗位职责
2013/12/19 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
党校党性分析材料
2014/12/19 职场文书
高三生物教学反思
2016/02/22 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python