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

時間  2020-03-18
標籤 值得 收藏 javascript 技巧 欄目 JavaScript 简体版
原文   原文鏈接

在本文中列出了21個值得收藏的Javascript技巧,在實際工做中,若是能適當運用,則大大提升工做效率。javascript

1  Javascript數組轉換爲CSV格式html

首先考慮以下的應用場景,有一個Javscript的字符型(或者數值型)數組,如今須要轉換爲以逗號分割的CSV格式文件。則咱們可使用以下的小技巧，代碼以下：java

  
  
  
  
    
   
   
   
   
  1. var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; 
    chrome
    2. 
   
   
   
   
  2. var str = fruits.valueOf(); 數組
    3.

輸出：apple,peaches,oranges,mangoes瀏覽器

其中，valueOf()方法會將Javascript數組轉變爲逗號隔開的字符串。要注意的是，若是想不使用逗號分割，好比用｜號分割，則請使用join方法，以下：session

  
  
  
  
    
   
   
   
   
  1. var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; 
    app
    2. 
   
   
   
   
  2. var str = fruits.join("|"); dom
    3.

輸出： apple|peaches|oranges|mangoeside

2 將CSV格式從新轉換回Javscript數組

那麼如何將一個CSV格式的字符串轉變回Javascript數組呢？可使用split()方法，就可使用任何指定的字符去分隔，代碼以下：

  
  
  
  
    
   
   
   
   
  1. var str = "apple, peaches, oranges, mangoes"; 
    2. 
   
   
   
   
  2. var fruitsArray = str.split(","); 
    3.

輸出 fruitsArray[0]: apple

3 根據索引移除數組中的某個元素

假如須要從Javascript數組中移除某個元素，可使用splice方法，該方法將根據傳入參數n，移除數組中移除第n個元素(Javascript數組中從第0位開始計算)。

  
  
  
  
    
   
   
   
   
  1. function removeByIndex(arr, index) { 
    2. 
   
   
   
   
  2.     arr.splice(index, 1); 
    3. 
   
   
   
   
  3. } 
    4. 
   
   
   
   
  4. test = new Array(); 
    5. 
   
   
   
   
  5. test[0] = 'Apple'; 
    6. 
   
   
   
   
  6. test[1] = 'Ball'; 
    7. 
   
   
   
   
  7. test[2] = 'Cat'; 
    8. 
   
   
   
   
  8. test[3] = 'Dog'; 
    9. 
   
   
   
   
  9. alert("Array before removing elements: "+test); 
    10. 
   
   
   
   
  10. removeByIndex(test, 2); 
    11. 
   
   
   
   
  11. alert("Array after removing elements: "+test); 
    12.

則最後輸出的爲Apple,Ball,Dog

4 根據元素的值移除數組元素中的值

下面這個技巧是很實用的，是根據給定的值去刪除數組中的元素，代碼以下：

  
  
  
  
    
   
   
   
   
  1. function removeByValue(arr, val) { 
    2. 
   
   
   
   
  2. for(var i=0; i<arr.length; i++) { 
    3. 
   
   
   
   
  3. if(arr[i] == val) { 
    4. 
   
   
   
   
  4.             arr.splice(i, 1); 
    5. 
   
   
   
   
  5. break; 
    6. 
   
   
   
   
  6.         } 
    7. 
   
   
   
   
  7.     } 
    8. 
   
   
   
   
  8. } 
    9. 
   
   
   
   

    10. 
   
   
   
   
  10. var somearray = ["mon", "tue", "wed", "thur"] 
    11. 
   
   
   
   

    12. 
   
   
   
   
  12. removeByValue(somearray, "tue"); 
    13. 
   
   
   
   

    14. 
   
   
   
   
  14. //somearray 將會有的元素是 "mon", "wed", "thur"
    15.

固然，更好的方式是使用prototype的方法去實現，以下代碼：

  
  
  
  
    
   
   
   
   
  1. Array.prototype.removeByValue = function(val) { 
    2. 
   
   
   
   
  2. for(var i=0; i<this.length; i++) { 
    3. 
   
   
   
   
  3. if(this[i] == val) { 
    4. 
   
   
   
   
  4. this.splice(i, 1); 
    5. 
   
   
   
   
  5. break; 
    6. 
   
   
   
   
  6.         } 
    7. 
   
   
   
   
  7.     } 
    8. 
   
   
   
   
  8. } 
    9. 
   
   
   
   
  9. //..
    10. 
   
   
   
   
  10. var somearray = ["mon", "tue", "wed", "thur"] 
    11. 
   
   
   
   
  11. somearray.removeByValue("tue"); 
    12.

5 經過字符串指定的方式動態調用某個方法

有的時候，須要在運行時，動態調用某個已經存在的方法，併爲其傳入參數。這個如何實現呢？下面的代碼能夠：

  
  
  
  
    
   
   
   
   
  1. var strFun = "someFunction"; //someFunction 爲已經定義的方法名
    2. 
   
   
   
   
  2. var strParam = "this is the parameter"; //要傳入方法的參數  
    3. 
   
   
   
   
  3. var fn = window[strFun]; 
    4. 
   
   
   
   

    5. 
   
   
   
   
  5. //調用方法傳入參數
    6. 
   
   
   
   
  6. fn(strParam); 
    7.

6 產生1到N的隨機數

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

    3. 
   
   
   
   
  3. //產生1到10之間的隨機數
    4. 
   
   
   
   
  4. var random = Math.floor(Math.random() * 10 + 1); 
    5. 
   
   
   
   

    6. 
   
   
   
   
  6. //產生1到100之間的隨機數
    7. 
   
   
   
   
  7. var random = Math.floor(Math.random() * 100 + 1); 
    8.

7 捕捉瀏覽器關閉的事件

咱們常常但願在用戶關閉瀏覽器的時候，提示用戶要保存還沒有保存的東西，則下面的這個Javascript技巧是十分有用的，代碼以下：

  
  
  
  
    
   
   
   
   
  1. 　<script language="javascript"> 
    2. 
   
   
   
   
  2. function fnUnloadHandler() { 
    3. 
   
   
   
   

    4. 
   
   
   
   
  4.        alert("Unload event.. Do something to invalidate users session.."); 
    5. 
   
   
   
   
  5. } 
    6. 
   
   
   
   
  6. </script> 
    7. 
   
   
   
   
  7. <body onbeforeunload="fnUnloadHandler()"> 
    8. 
   
   
   
   
  8. ………     
    9. 
   
   
   
   
  9. </body> 
    10.

就是編寫onbeforeunload()事件的代碼便可


8  檢查是否按了回退鍵

一樣，能夠檢查用戶是否按了回退鍵，代碼以下：

  
  
  
  
    
   
   
   
   
  1. window.onbeforeunload = function() {  
    2. 
   
   
   
   
  2. return"You work will be lost.";  
    3. 
   
   
   
   
  3. }; 
    4.

9  檢查表單數據是否改變

有的時候，須要檢查用戶是否修改了一個表單中的內容，則可使用下面的技巧，其中若是修改了表單的內容則返回true，沒修改表單的內容則返回false。代碼以下：

  
  
  
  
    
   
   
   
   
  1. function formIsDirty(form) { 
    2. 
   
   
   
   
  2. for (var i = 0; i < form.elements.length; i++) { 
    3. 
   
   
   
   
  3. var element = form.elements[i]; 
    4. 
   
   
   
   
  4. var type = element.type; 
    5. 
   
   
   
   
  5. if (type == "checkbox" || type == "radio") { 
    6. 
   
   
   
   
  6. if (element.checked != element.defaultChecked) { 
    7. 
   
   
   
   
  7. returntrue; 
    8. 
   
   
   
   
  8.       } 
    9. 
   
   
   
   
  9.     } 
    10. 
   
   
   
   
  10. elseif (type == "hidden" || type == "password" || 
    11. 
   
   
   
   
  11.              type == "text" || type == "textarea") { 
    12. 
   
   
   
   
  12. if (element.value != element.defaultValue) { 
    13. 
   
   
   
   
  13. returntrue; 
    14. 
   
   
   
   
  14.       } 
    15. 
   
   
   
   
  15.     } 
    16. 
   
   
   
   
  16. elseif (type == "select-one" || type == "select-multiple") { 
    17. 
   
   
   
   
  17. for (var j = 0; j < element.options.length; j++) { 
    18. 
   
   
   
   
  18. if (element.options[j].selected != 
    19. 
   
   
   
   
  19.             element.options[j].defaultSelected) { 
    20. 
   
   
   
   
  20. returntrue; 
    21. 
   
   
   
   
  21.         } 
    22. 
   
   
   
   
  22.       } 
    23. 
   
   
   
   
  23.     } 
    24. 
   
   
   
   
  24.   } 
    25. 
   
   
   
   
  25. returnfalse; 
    26. 
   
   
   
   
  26. } 
    27. 
   
   
   
   
  27. window.onbeforeunload = function(e) { 
    28. 
   
   
   
   
  28.   e = e || window.event;   
    29. 
   
   
   
   
  29. if (formIsDirty(document.forms["someForm"])) { 
    30. 
   
   
   
   
  30. // IE 和 Firefox
    31. 
   
   
   
   
  31. if (e) { 
    32. 
   
   
   
   
  32.       e.returnValue = "You have unsaved changes."; 
    33. 
   
   
   
   
  33.     } 
    34. 
   
   
   
   
  34. // Safari瀏覽器
    35. 
   
   
   
   
  35. return"You have unsaved changes."; 
    36. 
   
   
   
   
  36.   } 
    37. 
   
   
   
   
  37. }; 
    38.

10  徹底禁止使用後退鍵

下面的技巧放在頁面中，則能夠防止用戶點後退鍵，這在一些狀況下是須要的。代碼以下：

  
  
  
  
    
   
   
   
   
  1. <SCRIPT type="text/javascript"> 
    2. 
   
   
   
   
  2.     window.history.forward(); 
    3. 
   
   
   
   
  3. function noBack() { window.history.forward(); } 
    4. 
   
   
   
   
  4. </SCRIPT> 
    5. 
   
   
   
   
  5. </HEAD> 
    6. 
   
   
   
   
  6. <BODY onload="noBack();"
    7. 
   
   
   
   
  7.     onpageshow="if (event.persisted) noBack();" onunload=""> 
    8.

11 刪除用戶多選框中選擇的項目

下面提供的技巧，是當用戶在下拉框多選項目的時候，當點刪除的時候，能夠一次刪除它們，代碼以下：

  
  
  
  
    
   
   
   
   
  1. function selectBoxRemove(sourceID) { 
    2. 
   
   
   
   
  2. //得到listbox的id
    3. 
   
   
   
   
  3. var src = document.getElementById(sourceID); 
    4. 
   
   
   
   
  4. //循環listbox
    5. 
   
   
   
   
  5. for(var count= src.options.length-1; count >= 0; count--) { 
    6. 
   
   
   
   
  6. //若是找到要刪除的選項，則刪除
    7. 
   
   
   
   
  7. if(src.options[count].selected == true) { 
    8. 
   
   
   
   
  8. try { 
    9. 
   
   
   
   
  9.                          src.remove(count, null); 
    10. 
   
   
   
   

    11. 
   
   
   
   
  11.                  } catch(error) { 
    12. 
   
   
   
   

    13. 
   
   
   
   
  13.                          src.remove(count); 
    14. 
   
   
   
   
  14.                 } 
    15. 
   
   
   
   
  15.         } 
    16. 
   
   
   
   
  16.     } 
    17. 
   
   
   
   
  17. } 
    18.

12  Listbox中的全選和非全選

若是對於指定的listbox，下面的方法能夠根據用戶的須要，傳入true或false,分別表明是全選listbox中的全部項目仍是非全選全部項目，代碼以下：

  
  
  
  
    
   
   
   
   
  1. function listboxSelectDeselect(listID, isSelect) { 
    2. 
   
   
   
   
  2. var listbox = document.getElementById(listID); 
    3. 
   
   
   
   
  3. for(var count=0; count < listbox.options.length; count++) { 
    4. 
   
   
   
   
  4.             listbox.options[count].selected = isSelect; 
    5. 
   
   
   
   
  5.     } 
    6. 
   
   
   
   
  6. } 
    7.


13 在Listbox中項目的上下移動

下面的代碼，給出了在一個listbox中如何上下移動項目

  
  
  
  
    
   
   
   
   
  1. unction listbox_move(listID, direction) { 
    2. 
   
   
   
   

    3. 
   
   
   
   
  3. var listbox = document.getElementById(listID); 
    4. 
   
   
   
   
  4. var selIndex = listbox.selectedIndex; 
    5. 
   
   
   
   

    6. 
   
   
   
   
  6. if(-1 == selIndex) { 
    7. 
   
   
   
   
  7.         alert("Please select an option to move."); 
    8. 
   
   
   
   
  8. return; 
    9. 
   
   
   
   
  9.     } 
    10. 
   
   
   
   

    11. 
   
   
   
   
  11. var increment = -1; 
    12. 
   
   
   
   
  12. if(direction == 'up') 
    13. 
   
   
   
   
  13.         increment = -1; 
    14. 
   
   
   
   
  14. else
    15. 
   
   
   
   
  15.         increment = 1; 
    16. 
   
   
   
   

    17. 
   
   
   
   
  17. if((selIndex + increment) < 0 || 
    18. 
   
   
   
   
  18.         (selIndex + increment) > (listbox.options.length-1)) { 
    19. 
   
   
   
   
  19. return; 
    20. 
   
   
   
   
  20.     } 
    21. 
   
   
   
   

    22. 
   
   
   
   
  22. var selValue = listbox.options[selIndex].value; 
    23. 
   
   
   
   
  23. var selText = listbox.options[selIndex].text; 
    24. 
   
   
   
   
  24.     listbox.options[selIndex].value = listbox.options[selIndex + increment].value 
    25. 
   
   
   
   
  25.     listbox.options[selIndex].text = listbox.options[selIndex + increment].text 
    26. 
   
   
   
   

    27. 
   
   
   
   
  27.     listbox.options[selIndex + increment].value = selValue; 
    28. 
   
   
   
   
  28.     listbox.options[selIndex + increment].text = selText; 
    29. 
   
   
   
   

    30. 
   
   
   
   
  30.     listbox.selectedIndex = selIndex + increment; 
    31. 
   
   
   
   
  31. } 
    32. 
   
   
   
   
  32. //..
    33. 
   
   
   
   
  33. //..
    34. 
   
   
   
   

    35. 
   
   
   
   
  35. listbox_move('countryList', 'up'); //move up the selected option
    36. 
   
   
   
   
  36. listbox_move('countryList', 'down'); //move down the selected option
    37.

14 在兩個不一樣的Listbox中移動項目

若是在兩個不一樣的Listbox中，常常須要在左邊的一個Listbox中移動項目到另一個Listbox中去，下面是相關代碼：

  
  
  
  
    
   
   
   
   
  1. function listbox_moveacross(sourceID, destID) { 
    2. 
   
   
   
   
  2. var src = document.getElementById(sourceID); 
    3. 
   
   
   
   
  3. var dest = document.getElementById(destID); 
    4. 
   
   
   
   

    5. 
   
   
   
   
  5. for(var count=0; count < src.options.length; count++) { 
    6. 
   
   
   
   

    7. 
   
   
   
   
  7. if(src.options[count].selected == true) { 
    8. 
   
   
   
   
  8. var option = src.options[count]; 
    9. 
   
   
   
   

    10. 
   
   
   
   
  10. var newOption = document.createElement("option"); 
    11. 
   
   
   
   
  11.                 newOption.value = option.value; 
    12. 
   
   
   
   
  12.                 newOption.text = option.text; 
    13. 
   
   
   
   
  13.                 newOption.selected = true; 
    14. 
   
   
   
   
  14. try { 
    15. 
   
   
   
   
  15.                          dest.add(newOption, null); //Standard
    16. 
   
   
   
   
  16.                          src.remove(count, null); 
    17. 
   
   
   
   
  17.                  }catch(error) { 
    18. 
   
   
   
   
  18.                          dest.add(newOption); // IE only
    19. 
   
   
   
   
  19.                          src.remove(count); 
    20. 
   
   
   
   
  20.                  } 
    21. 
   
   
   
   
  21.                 count--; 
    22. 
   
   
   
   
  22.         } 
    23. 
   
   
   
   
  23.     } 
    24. 
   
   
   
   
  24. } 
    25. 
   
   
   
   
  25. //..
    26. 
   
   
   
   
  26. //..
    27. 
   
   
   
   

    28. 
   
   
   
   
  28. listbox_moveacross('countryList', 'selectedCountryList'); 
    29.

15 快速初始化Javscript數組

下面的方法，給出了一種快速初始化Javscript數組的方法，代碼以下：

  
  
  
  
    
   
   
   
   
  1. var numbers = []; 
    2. 
   
   
   
   
  2. for(var i=1; numbers.push(i++)<100;); 
    3. 
   
   
   
   
  3. //numbers = [0,1,2,3 ... 100]
    4. 
   
   
   
   
  4. 使用的是數組的push方法 
    5.

16 截取指定位數的小數

若是要截取小數後的指定位數，可使用toFixed方法，好比：

  
  
  
  
    
   
   
   
   
  1. var num = 2.443242342; 
    2. 
   
   
   
   
  2. 　alert(num.toFixed(2)); // 2.44
    3. 
   
   
   
   
  3. 而使用toPrecision(x)則提供指定位數的精度，這裏的x是所有的位數，如： 
    4. 
   
   
   
   
  4. num = 500.2349; 
    5. 
   
   
   
   
  5. 　result = num.toPrecision(4);//輸出500.2
    6.

17 檢查字符串中是否包含其餘字符串

下面的代碼中，能夠實現檢查某個字符串中是否包含其餘字符串。代碼以下：

  
  
  
  
    
   
   
   
   
  1. if (!Array.prototype.indexOf) {  
    2. 
   
   
   
   
  2.     Array.prototype.indexOf = function(obj, start) { 
    3. 
   
   
   
   
  3. for (var i = (start || 0), j = this.length; i < j; i++) { 
    4. 
   
   
   
   
  4. if (this[i] === obj) { return i; } 
    5. 
   
   
   
   
  5.          } 
    6. 
   
   
   
   
  6. return -1; 
    7. 
   
   
   
   
  7.     } 
    8. 
   
   
   
   
  8. } 
    9. 
   
   
   
   

    10. 
   
   
   
   
  10. if (!String.prototype.contains) { 
    11. 
   
   
   
   
  11.     String.prototype.contains = function (arg) { 
    12. 
   
   
   
   
  12. return !!~this.indexOf(arg); 
    13. 
   
   
   
   
  13.     }; 
    14. 
   
   
   
   
  14. } 
    15.

在上面的代碼中重寫了indexOf方法並定義了contains方法，使用的方法以下：

  
  
  
  
    
   
   
   
   
  1. var hay = "a quick brown fox jumps over lazy dog"; 
    2. 
   
   
   
   
  2. var needle = "jumps"; 
    3. 
   
   
   
   
  3. alert(hay.contains(needle)); 
    4.

18去掉Javscript數組中的重複元素

下面的代碼能夠去掉Javascript數組中的重複元素，以下：

  
  
  
  
    
   
   
   
   
  1. function removeDuplicates(arr) { 
    2. 
   
   
   
   
  2. var temp = {}; 
    3. 
   
   
   
   
  3. for (var i = 0; i < arr.length; i++) 
    4. 
   
   
   
   
  4.         temp[arr[i]] = true; 
    5. 
   
   
   
   

    6. 
   
   
   
   
  6. var r = []; 
    7. 
   
   
   
   
  7. for (var k in temp) 
    8. 
   
   
   
   
  8.         r.push(k); 
    9. 
   
   
   
   
  9. return r; 
    10. 
   
   
   
   
  10. } 
    11. 
   
   
   
   

    12. 
   
   
   
   
  12. //用法
    13. 
   
   
   
   
  13. var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange']; 
    14. 
   
   
   
   
  14. var uniquefruits = removeDuplicates(fruits); 
    15. 
   
   
   
   
  15. //輸出的 uniquefruits ['apple', 'orange', 'peach', 'strawberry'];
    16.

19  去掉String中的多餘空格

下面的代碼會爲String增長一個trim()方法，代碼以下：

  
  
  
  
    
   
   
   
   
  1. if (!String.prototype.trim) { 
    2. 
   
   
   
   
  2.    String.prototype.trim=function() { 
    3. 
   
   
   
   
  3. returnthis.replace(/^\s+|\s+$/g, ''); 
    4. 
   
   
   
   
  4.    }; 
    5. 
   
   
   
   
  5. } 
    6. 
   
   
   
   

    7. 
   
   
   
   
  7. //用法
    8. 
   
   
   
   
  8. var str = "  some string    "; 
    9. 
   
   
   
   
  9. str.trim(); 
    10. 
   
   
   
   
  10. //輸出 str = "some string"
    11.

20 Javascript中的重定向

在Javascript中，能夠實現重定向，方法以下：

  
  
  
  
    
   
   
   
   
  1. window.location.href = "http://viralpatel.net"; 
    2.

21 對URL進行編碼

有的時候，須要對URL中的傳遞的進行編碼，方法以下：

  
  
  
  
    
   
   
   
   
  1. var myOtherUrl =  
    2. 
   
   
   
   
  2. "http://example.com/index.html?url=" + encodeURIComponent(myUrl); 
    3.

原文連接：http://viralpatel.net/blogs/javascript-tips-tricks/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程