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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JS实现页面打印功能
Mar 16 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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新手上路(十一)
2006/10/09 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python概率计算器实例分析
2015/03/25 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python list运算操作代码实例解析
2020/01/20 Python
python中安装django模块的方法
2020/03/12 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
医院院务公开实施方案
2014/05/03 职场文书
二人合伙经营协议书
2014/09/13 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
公司安全管理制度范本
2015/08/05 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
python中数组和列表的简单实例
2022/03/25 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python