JavaScript编程的10个实用小技巧


Posted in Javascript onApril 18, 2014

在这篇文章中,我将列出10个Javascript实用小技巧,主要面向Javascript新手和中级开发者。希望每个读者都能至少从中学到一个有用的技巧。

1.变量转换

看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法。始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高。

var myVar   = "3.14159",
str     = ""+ myVar,//  to string
int     = ~~myVar,  //  to integer
float   = 1*myVar,  //  to float
bool    = !!myVar,  /*  to boolean - any string with length
and any number except 0 are true */
array   = [myVar];  //  to array

转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数,而且创建正则表达式的时候要使用/pattern/flags的形式。

2.十进制转换为十六进制或者八进制,或者反过来

你是不是写个单独的函数来转换十六进制(或者八进制)呢?马上停下吧!有更容易的现成的函数可以用:

(int).toString(16); // converts int to hex, eg 12 => "C"
(int).toString(8);  // converts int to octal, eg. 12 => "14"
parseInt(string,16) // converts hex to int, eg. "FF" => 255
parseInt(string,8) // converts octal to int, eg. "20" => 16

3.玩转数字

除了上一节介绍的之外,这里有更多的处理数字的技巧

0xFF; // Hex declaration, returns 255
020; // Octal declaration, returns 16
1e3; // Exponential, same as 1 * Math.pow(10,3), returns 1000
(1000).toExponential(); // Opposite with previous, returns 1e3
(3.1415).toFixed(3); // Rounding the number, returns "3.142"

4.Javascript版本检测

你知道你的浏览器支持哪一个版本的Javascript吗?如果不知道的话,去维基百科查一下Javascript版本表吧。出于某种原因,Javascript 1.7版本的某些特性是没有得到广泛的支持。不过大部分浏览器都支持了1.8版和1.8.1版的特性。(注:所有的IE浏览器(IE8或者更老的版本)只支持1.5版的Javascript)这里有一个脚本,既能通过检测特征来检测JavaScript版本,它还能检查特定的Javascript版本所支持的特性。

var JS_ver  = [];
(Number.prototype.toFixed)?JS_ver.push("1.5"):false;
([].indexOf && [].forEach)?JS_ver.push("1.6"):false;
((function(){try {[a,b] = [0,1];return true;}catch(ex) {return false;}})())?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("Latest Javascript version supported: "+ JS_ver.supports());
alert("Support for version 1.7 : "+ JS_ver.supports("1.7"));

5.使用window.name进行简单会话处理

这个是我真的喜欢的东西。您可以为指定一个字符串作为window.name属性的值,直到您关闭该标签或窗口。虽然我没有提供任何脚本,但我强烈建议您如充分利用这个方法。举例来说,在建设一个网站或应用程序的时候,在调试和测试模式之间切换是非常有用的。

6.判断属性是否存在

这个问题包含两个方面,既有检查属性时候存在,还要获取属性的类型。但我们总是忽略了这些小事情:

// BAD: This will cause an error in code when foo is undefined
if (foo) {
doSomething();
}
// GOOD: This doesn't cause any errors. However, even when
// foo is set to NULL or false, the condition validates as true
if (typeof foo != "undefined") {

doSomething();
}
// BETTER: This doesn't cause any errors and in addition
// values NULL or false won't validate as true
if (window.foo) {

doSomething();
}

但是,有的情况下,我们有更深的结构和需要更合适的检查的时候,可以这样:
// UGLY: we have to proof existence of every
// object before we can be sure property actually exists
if (window.oFoo && oFoo.oBar && oFoo.oBar.baz) {
doSomething();
}

7.给函数传递参数

当函数既有必选又有可选参数的时候,我们可能是这样做的:

function doSomething(arg0, arg1, arg2, arg3, arg4) {
...
}
doSomething('', 'foo', 5, [], false);

而传递一个对象总是比传递一堆的参数更方便:
function doSomething() {
// Leaves the function if nothing is passed

if (!arguments[0]) {

return false;

}

var oArgs   = arguments[0]

arg0    = oArgs.arg0 || "",

arg1    = oArgs.arg1 || "",

arg2    = oArgs.arg2 || 0,

arg3    = oArgs.arg3 || [],

arg4    = oArgs.arg4 || false;
}
doSomething({

arg1    : "foo",

arg2    : 5,

arg4    : false
});

这只是一个把对象作为参数传递的一个很简单的例子,例如,我们还可以声明一个对象,变量名作为Key,默认值作为Value。

8.使用document.createDocumentFragment()

您可能需要动态地追加多个元素到文档中。然而,直接将它们插入到文档中会导致这个文档每次都需要重新布局一个,相反的,你应该使用文档碎片,建成后只追加一次:

function createList() {
var aLI = ["first item", "second item", "third item",

"fourth item", "fith item"];

// Creates the fragment

var oFrag   = document.createDocumentFragment();

while (aLI.length) {


var oLI = document.createElement("li");


// Removes the first item from array and appends it


// as a text node to LI element


oLI.appendChild(document.createTextNode(aLI.shift()));


oFrag.appendChild(oLI);

}

document.getElementById('myUL').appendChild(oFrag);
}

9.为replace()方法传递一个函数

有的时候你想替换字符串的某个部分为其它的值,最好的方法就是给String.replace()传递一个独立的函数。下面是一个简单例子:

var sFlop   = "Flop: [Ah] [Ks] [7c]";
var aValues = {"A":"Ace","K":"King",7:"Seven"};
var aSuits  = {"h":"Hearts","s":"Spades",
"d":"Diamonds","c":"Clubs"};
sFlop   = sFlop.replace(/\[\w+\]/gi, function(match) {
match   = match.replace(match[2], aSuits[match[2]]);

match   = match.replace(match[1], aValues[match[1]] +" of ");

return match;
});
// string sFlop now contains:
// "Flop: [Ace of Hearts] [King of Spades] [Seven of Clubs]"

10.循环中标签的使用

有的时候,循环中又嵌套了循环,你可能想在循环中退出,则可以用标签:

outerloop:
for (var iI=0;iI<5;iI++) {
if (somethingIsTrue()) {

// Breaks the outer loop iteration

break outerloop;

}

innerloop:

for (var iA=0;iA<5;iA++) {


if (somethingElseIsTrue()) {


// Breaks the inner loop iteration


break innerloop;

}

}
}
Javascript 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jquery实现用户打分评分特效
May 28 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 #Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 #Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 #Javascript
jQuery模拟点击A标记示例参考
Apr 17 #Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 #Javascript
window.location不跳转的问题解决方法
Apr 17 #Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python中的协程深入理解
2019/06/10 Python
Python实现画图软件功能方法详解
2020/07/28 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
泰山导游词
2015/02/02 职场文书
2015年采购员工作总结
2015/04/27 职场文书
毕业典礼主持词
2015/06/29 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA