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 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
js的2种继承方式详解
Mar 04 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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
下载文件的点击数回填
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
js+html获取系统当前时间
2017/11/10 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python显示进度条的方法
2014/09/20 Python
在Python中编写数据库模块的教程
2015/04/29 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
职务说明书范文
2014/05/07 职场文书
个人自查自纠材料
2014/10/14 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript