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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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初学者(入门学习经验谈)
2010/10/12 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Javascript 对象的解释
2008/11/24 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
给导游的表扬信
2014/01/10 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
师范类求职信
2014/06/21 职场文书
家长会欢迎标语
2014/06/24 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
优秀志愿者感言
2015/08/01 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python