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和JQuery实用代码片段(一)
Apr 07 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
JS函数式编程实现XDM一
Jun 16 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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
设定php简写功能的方法
2019/11/28 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python Nose框架编写测试用例方法
2017/10/26 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python银行系统实战源码
2019/10/25 Python
Python3运算符常见用法分析
2020/02/14 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
学生会竞选自荐信
2013/10/12 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
安全协议书范本
2014/04/21 职场文书
视光学专业自荐信
2014/06/24 职场文书
房屋过户委托书范本
2014/10/07 职场文书
2014年维修工作总结
2014/11/22 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技