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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
详解Puppeteer 入门教程
May 09 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
js实现简单分页导航栏效果
Jun 28 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脚本中include文件出错解决方法
2008/11/20 PHP
php class类的用法详细总结
2013/10/17 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php实现微信发红包功能
2018/07/13 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
Vue如何引入远程JS文件
2017/04/20 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现打砖块游戏
2020/02/25 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
服装机修工岗位职责
2013/12/26 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2014年医务科工作总结
2014/12/18 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS