為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 onbeforeunload="fnUnloadHandler()">
		
</body>
*/

 

 

這是前7個的翻譯，後面的會陸續翻譯好的，順便吐個槽，csdn寫部落格時貼程式碼的功能難道變弱了嘛！！！！？？？依稀記得以前貼程式碼沒有這麼噁心........