您的位置：首页 > Web前端 > JavaScript

21个值得收藏的Javascript技巧(1)

2013-07-22 23:07 603 查看
http://developer.51cto.com/art/201307/404053_2.htm在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。1 Javascript数组转换为CSV格式首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧，代码如下：
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];

var str = fruits.valueOf();
输出：apple,peaches,oranges,mangoes
其中，valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是，如果想不使用逗号分割，比如用｜号分割，则请使用join方法，如下：
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];

var str = fruits.join("|");
输出： apple|peaches|oranges|mangoes2 将CSV格式重新转换回Javscript数组那么如何将一个CSV格式的字符串转变回Javascript数组呢？可以使用split()方法，就可以使用任何指定的字符去分隔，代码如下：
var str = "apple, peaches, oranges, mangoes";

var fruitsArray = str.split(",");
输出 fruitsArray[0]: apple
3 根据索引移除数组中的某个元素假如需要从Javascript数组中移除某个元素，可以使用splice方法，该方法将根据传入参数n，移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。
function removeByIndex(arr, index) {

arr.splice(index, 1);

}

test = new Array();

test[0] = 'Apple';

test[1] = 'Ball';

test[2] = 'Cat';

test[3] = 'Dog';

alert("Array before removing elements: "+test);

removeByIndex(test, 2);

alert("Array after removing elements: "+test);
则最后输出的为Apple,Ball,Dog
4 根据元素的值移除数组元素中的值
下面这个技巧是很实用的，是根据给定的值去删除数组中的元素，代码如下：
function removeByValue(arr, val) {

for(var i=0; i<arr.length; i++) {

if(arr[i] == val) {

arr.splice(i, 1);

break;

}

}

}

var somearray = ["mon", "tue", "wed", "thur"]

removeByValue(somearray, "tue");

//somearray 将会有的元素是 "mon", "wed", "thur"
当然，更好的方式是使用prototype的方法去实现，如下代码：
Array.prototype.removeByValue = function(val) {

for(var i=0; i<this.length; i++) {

if(this[i] == val) {

this.splice(i, 1);

break;

}

}

}

//..

var somearray = ["mon", "tue", "wed", "thur"]

somearray.removeByValue("tue");

5 通过字符串指定的方式动态调用某个方法有的时候，需要在运行时，动态调用某个已经存在的方法，并为其传入参数。这个如何实现呢？下面的代码可以：
var strFun = "someFunction"; //someFunction 为已经定义的方法名

var strParam = "this is the parameter"; //要传入方法的参数

var fn = window[strFun];

//调用方法传入参数

fn(strParam);

6 产生1到N的随机数
var random = Math.floor(Math.random() * N + 1);

//产生1到10之间的随机数

var random = Math.floor(Math.random() * 10 + 1);

//产生1到100之间的随机数

var random = Math.floor(Math.random() * 100 + 1);

7 捕捉浏览器关闭的事件我们经常希望在用户关闭浏览器的时候，提示用户要保存尚未保存的东西，则下面的这个Javascript技巧是十分有用的，代码如下：
　<script language="javascript">

function fnUnloadHandler() {

alert("Unload event.. Do something to invalidate users session..");

}

</script>

<body onbeforeunload="fnUnloadHandler()">

………

</body>

就是编写onbeforeunload()事件的代码即可8 检查是否按了回退键同样，可以检查用户是否按了回退键，代码如下：
window.onbeforeunload = function() {

return"You work will be lost.";

};

9 检查表单数据是否改变有的时候，需要检查用户是否修改了一个表单中的内容，则可以使用下面的技巧，其中如果修改了表单的内容则返回true，没修改表单的内容则返回false。代码如下：
function formIsDirty(form) {

for (var i = 0; i < form.elements.length; i++) {

var element = form.elements[i];

var type = element.type;

if (type == "checkbox" || type == "radio") {

if (element.checked != element.defaultChecked) {

returntrue;

}

}

elseif (type == "hidden" || type == "password" ||

type == "text" || type == "textarea") {

if (element.value != element.defaultValue) {

returntrue;

}

}

elseif (type == "select-one" || type == "select-multiple") {

for (var j = 0; j < element.options.length; j++) {

if (element.options[j].selected !=

element.options[j].defaultSelected) {

returntrue;

}

}

}

}

returnfalse;

}

window.onbeforeunload = function(e) {

e = e || window.event;

if (formIsDirty(document.forms["someForm"])) {

// IE 和 Firefox

if (e) {

e.returnValue = "You have unsaved changes.";

}

// Safari浏览器

return"You have unsaved changes.";

}

};
10 完全禁止使用后退键下面的技巧放在页面中，则可以防止用户点后退键，这在一些情况下是需要的。代码如下：
<SCRIPT type="text/javascript">

window.history.forward();

function noBack() { window.history.forward(); }

</SCRIPT>

</HEAD>

<BODY onload="noBack();"

onpageshow="if (event.persisted) noBack();" onunload="">
原文链接：http://viralpatel.net/blogs/javascript-tips-tricks/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  21个值得收藏的Javascript技巧
相关文章推荐
新的分享
章节导航