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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JS字符串处理实例代码
Aug 05 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php微信开发接入
2016/08/27 PHP
php常用正则函数实例小结
2016/12/29 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python下Fabric的简单部署方法
2015/07/14 Python
Python端口扫描简单程序
2016/11/10 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
单位作风建设自查报告
2014/10/23 职场文书
一年级小学生评语大全
2014/12/25 职场文书
大国崛起日本观后感
2015/06/02 职场文书
歼十出击观后感
2015/06/11 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP