1. 程式人生 > >22條常用JavaScript開發小技巧

22條常用JavaScript開發小技巧

分號 算數 允許 trim 表示 類型轉換 函數 容易 變量

1、使用var聲明變量

如果給一個沒有聲明的變量賦值,默認會作為一個全局變量(即使在函數內賦值)。要盡量避免不必要的全局變量。

2、行尾使用分號

雖然JavaScript允許省略行尾的分號,但是有時不註意的省略,會導致不必要的錯誤。建議在可用可不用行尾分號的地方加上分號。

3、獲取指定範圍內的隨機數

var getRandom = function(max, min) {
    min = arguments[1] || 0;
    return Math.floor(Math.random() * (max - min + 1) + min);};

上面的函數接受一個你希望的隨機最大數和一個你希望的隨機最小數。

4、打亂數字數組的順序

var sortArray = array.sort(function(){
  return Math.random() - 0.5;});

5、取出數組中的隨機項

var ran = array[Math.floor(Math.random() * array.length)];

6、去除字符串的首尾空格

var s = string.trim();

7、類數組對象轉為數組

比如:類數組對象遍歷:

Array.prototype.forEach.call(argumens,function(value){})

DOM的NodeList和HTMLCollection也是類數組對象

8、獲取數組中的最大值和最小值

var max = Math.max.apply(Math, array);
var min = Math.min.apply(Math, array);

9、清空數組

array.length = 0;
array = [];

10、保留指定小數位

var num = num.toFixed(2);

返回字符串,保留兩位小數

11、使用for-in循環來遍歷對象的屬性

for(var key in object) {
   // object[key]}

不要用for-in來遍歷數據

12、獲取某月天數

function getMonthDay(date){
  date 
= date || new Date(); if(typeof date === ‘string‘) { date = new Date(date); }; date.setDate(32); return 32 - date.getDate();}

傳入date參數,可以是字符串、日期對象實例;為空表示當月天數

13、浮點數問題

0.1 + 0.2 = 0.30000000000000004 != 0.3

JavaScript的數字都遵循IEEE 754標準構建,在內部都是64位浮點小數表示

14、JSON序列化和反序列化

使用JSON.stringify()來將JavaScript對象序列化為有效的字符串。
使用JSON.parse()來將有效的字符串轉換為JavaScript對象。

在AJAX傳輸數據時很有用

15、使用“===”替換“==”

相等運算符(==)在比較時會將操作數進行相應的類型轉換,而全等運算符(===)不會進行類型轉換。

16、避免使用with()

使用with()可以把變量加入到全局作用域中,因此,如果有其它的同名變量,一來容易混淆,二來值也會被覆蓋。

17、不要使用eval()或函數構造器

eval()和函數構造器(Function consturctor)的開銷較大,每次調用,JavaScript引擎都要將源代碼轉換為可執行的代碼。

18、簡化if語句

if (condition) {
  fn();}

可替換成:

condition && fn();

19、給可能省略的參數賦默認值

function test(a, b){
  a = a || ‘1‘;}

20、給數組循環中緩存length的值

如果你確定循環中數組的長度不會變化,那麽你可以這樣:

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

可以避免在每次叠代都將會重新計算數組的大小,提高效率

21、合並數組

對於小數組,我們可以這樣:

var arr1 = [1,2,3];var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);  // [1,2,3,4,5,6]

不過,concat()這個函數並不適合用來合並兩個大型的數組,因為其將消耗大量的內存來存儲新創建的數組。在這種情況之個,可以使用Array.prototype.push.apply(arr1,arr2)來替代創建一個新數組。
這種方法不是用來創建一個新的數組,其只是將第一個第二個數組合並在一起,同時減少內存的使用:

Array.prototype.push.apply(arr1, arr2); 
console.log(arr1); // [1,2,3,4,5,6]

22 枚舉對象“自身”的屬性

for...in除了枚舉對象“自身”的屬性外,還會枚舉出繼承過來的屬性。

var hasOwn = Object.prototype.hasOwnProperty;
var obj = {name: ‘tg‘, age: 24};for(var name in obj) {
  if (hasOwn.call(obj, name)) {
    console.log(name + ‘:‘ + obj[name]);
  }}// name:tg// age:24

22條常用JavaScript開發小技巧