为JavaScript开发人员准备的 21 个小技巧(一)

开篇概要：这是一篇比较简单的JavaScript的技巧的文章，在 http://viralpatel.net 上看到的，原文章参考 http://viralpatel.net/blogs/javascript-tips-tricks/ ，翻译一下，打算每7个作为一篇（因为在工作空余间做的，没有那么长的时间一起整21个，代码自己均校验过，没有问题）

为JavaScript开发人员准备的21个小技巧

                                                                                                    ----ViralPatel  2013-5-21

 

如果你平时总是需要写很多的JavaScript代码，你会发现下边列举的代码段对你而言会非常有用，把它们保存下来吧，将来你会用到的。

 

接下来就是为你准备的21个非常有用的代码段。

 

免责声明：不是所有的代码段都是我写的，它们中的某一些来自因特网。

 

1. 将JavaScript数组转化成 CSV（逗号分隔符值）
这是第一个小技巧，你有一个字符串（或者数字）的JavaScript数组，你想将它转化成CSV，代码如下：

...........

上面代码可以看出，数组的valueOf()方法，可以直接将一个数组转化成CSV串。

现在，如果你不想使用逗号而是使用竖线（|）作为分隔符，你可以调用数组的 join() 方法来实现，看下面的代码：

// tip 1 : 
function convert() {
        var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
        var str = fruits.valueOf();
        alert(str);
			}
			
function convert2() {
        var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
        var str = fruits.join("|");
        alert(str);
			}
convert();
convert2();

join() 方法将一个数组转化成竖线分隔的字符串。

2. 将CSV转化为JavaScript数组

如果你想讲CSV转化为 JavaScript数组，你该如何做呢？JavaScript数组有一个方法来做这个事情。 split()方法可以将一个串通过任何指定的分隔符（比如逗号）切分成一个数组。

下面我们将演示这个方法：

// tip 2:
function convert() {
        var str = "apple, peaches, oranges, mangoes";
        var fruitsArray = str.split(",");
        alert('Array: '+fruitsArray);
     }
convert();

3. 通过索引删除数组中的元素
你有一个JavaScript 数组，现在你想通过指定索引的方式删除其中某个元素。我们可以使用 splice() 方法来实现这个要求。这个方法可以往数组中添加元素，也可以从数组中删除元素。我们先来看看删除的操作：
// tip 3:
function removeByIndex(arr, index) {
     		arr.splice(index, 1);
		 }
		 
function testRemove() {
		 		var test = ['Apple', 'Ball', 'Cat', 'Dog'];
		 		var old = ['Apple', 'Ball', 'Cat', 'Dog'];
		
				removeByIndex(test, 2);
		
               alert("Array before removing elements: "+old
		     	  +"\nArray after removing elements: "+test);
}
		 
testRemove();
 
译者注：splice(index, num) 这种用法，指明从index位置开始，删除num个元素，这个方法会直接在调用数组上操作，如果删除了元素(num > 0)则返回更新后的数组，如果没有删除元素(num ===0) ，则返回一个空数组([]) ；splice(index, num, element1, element2 ...) 这种用法，则 num 后面所有的元素均是需要插入的新的元素，所操作的流程就是，从index开始删除num个原始元素，然后再在这个位置插入 element1,element2......如果你只想插入新的元素，则只需 num === 0 即可！注意，如果插入的是数组，则该方法会以嵌套数组的方式插入，不会讲数组展开！
4. 通过值匹配的方式从数组中删除元素
你有一个数组，现在你想基于值（不是上述的索引）来删除某元素:
// tip 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"]
var oldBeforeRemoveByValue = ["mon", "tue", "wed", "thur"];
		
removeByValue(somearray, "tue");
		
alert("Array before removing elements: " + oldBeforeRemoveByValue  
				+"\n Array after removing elements : " + somearray);
 
上面我们就是通过定义了一个函数 removeByValue 来达到我们的目的。在JavaScript中，我们可以通过prototypes在运行时为某些类添加一些方法（虽然这个并不被提倡）， 下面我们就为 JavaScript的Array类添加 removeByValue() 方法，这样任何数组都可以直接调用这个方法了：
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"];
var oldBeforeRemoveByValue = ["mon", "tue", "wed", "thur"];

somearray.removeByValue("tue");
		
alert("Array before removing elements: " + oldBeforeRemoveByValue  
				+"\n Array after removing elements : " + somearray);
 
5. 从一个串来调用JavaScript函数
有时，你知道一个函数的名称，在运行期你想调用这个函数。假设这里有一个函数 foo()，你想在运行时调用，这里我们会给一个例子，来告诉你如何通过一个函数的名字来调用这个函数：


// tip 5:
function fooForFun(vals){
			
			alert(vals);
			return 1;	
		}
		
var functionName = "fooForFun";// something you get from the input of user or other places......
var theSpecialFun = window[functionName];
theSpecialFun("test");

 
 
6. 生成 1 到 N 的随机数
下面的代码将帮助你产生 1 到 N的随机数，这个代码在你的 JS 游戏中或许有一些用处：
// tip 6:
/**
生成 1 到 val 的一个随机数
**/
function generateMyRandom(val){
			
				var myRandom = Math.floor(Math.random() * val + 1);
				return 	myRandom;
		}
		
alert(generateMyRandom(100));
 
7. 捕获浏览器的关闭事件
这是一个常用的功能，你想要捕获浏览器的关闭事件这样你可以提醒用户查看页面上是否有未保存的数据，下面的JavaScript代码可以帮助你做到这个：
// tip 7:
function fnUnloadHandler() {
       // Add your code here
       alert("Unload event.. Do something to invalidate users session..");
		}
/*
<body οnbefοreunlοad="fnUnloadHandler()">
		
</body>
*/
 
 
这是前7个的翻译，后面的会陆续翻译好的，顺便吐个槽，csdn写博客时贴代码的功能难道变弱了嘛！！！！？？？依稀记得以前贴代码没有这么恶心........