1) 使用!!將變數轉換成布林類型
有時,我們需要檢查一些變數是否存在,或者它是否具有有效值,從而將它們的值視為true。對於做這樣的檢查,你可以使用||(雙重否定運算子),它能自動將任何類型的資料轉換為布林值,只有這些變數才會回傳false:0,null,"",undefined或NaN,其他的都回傳true。我們來看看這個簡單的範例:
function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false
在這個範例中,如果account.cash的值大於零,則account.hasMoney的值就是true。
2) 使用+將變數轉換成數字
這個轉換超級簡單,但它只適用於數字字串,不然就會回傳NaN(不是數字) 。看看這個範例:
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
這個轉換運算也可以作用在Date,在這個情況下,它將傳回時間戳記:
console.log(+new Date()) // 1461288164385
3) 短路條件
如果你看過這種類似的程式碼:
if (conected) { login(); }
那麼你可以在這兩個變數之間使用&&(AND運算子)來縮短程式碼。例如,前面的程式碼可以縮減到一行:
conected && login();
你也可以用這個方法來檢查物件中是否存在某些屬性或函數。類似以下程式碼:
user && user.login();
4) 使用||設定預設值
在ES6中有預設參數這個功能。為了在舊版瀏覽器中模擬此功能,你可以使用||(OR運算子),並將預設值當作它的第二個參數。如果第一個參數傳回false,那麼第二個參數將會被傳回作為預設值。看下這個範例:
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25
5) 在循環中快取array.length
這個技巧非常簡單,並且在循環處理大數組時能夠避免對效能造成巨大的影響。基本上幾乎每個人都是這樣使用for來循環遍歷一個數組的:
for (var i = 0; i < array.length; i++) { console.log(array[i]); }
如果你使用較小的數組,那還好,但是如果處理大數組,則此程式碼將在每個循環中重複計算數組的大小,這會產生一定的延遲。為了避免這種情況,你可以在變數中快取array.length,以便在循環中每次都使用快取來代替array.length:
var length = array.length; for (var i = 0; i < length; i++) { console.log(array[i]); }
為了更簡潔,可以這麼寫:
for (var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
6) 偵測物件中的屬性
當你需要檢查某些屬性是否存在,避免在執行未定義的函數或屬性時,這個技巧非常有用。如果你打算寫跨瀏覽器程式碼,你也可能會用到這個技術。例如,我們假設你需要編寫與舊版Internet Explorer 6相容的程式碼,並且想要使用document.querySelector()來透過ID取得某些元素。 但是,在現代瀏覽器中,這個函數並不存在。所以,要檢查這個函數是否存在,你可以使用in運算子。看下這個範例:
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
在這種情況下,如果在document中沒有querySelector函數,它就會使用document.getElementById()作為取代。
7) 取得陣列的最後一個元素
Array.prototype.slice(begin,end)可以用來裁切陣列。但是如果沒有設定結束參數end的值的話,該函數會自動將end設定為陣列長度值。我認為很少人知道這個函數可以接受負值,如果你將begin設定一個負數的話,你就能從陣列中取得到倒數的元素:
var array = [1, 2, 3, 4, 5, 6]; console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
8) 陣列截斷
這個技術可以鎖定陣列的大小,這對於要刪除陣列中固定數量的元素是非常有用的。例如,如果你有一個包含10個元素的數組,但是你只想獲得前五個元素,則可以透過設定array.length = 5來階段數組。看下這個範例:
var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3; console.log(array.length); // 3 console.log(array); // [1,2,3]
9) 全部替換
String.replace()函數允許使用String和Regex來替換字串,這個函數本身只能替換第一個符合的字串。但你可以在正規表示式最後加上/g來模擬replaceAll()函數:
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
10) 合併陣列
#如果你需要合併兩個數組,你可以使用Array.concat()函數:
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
但是,這個函數對於大數組來說不合適,因為它將會建立一個新的數組並消耗大量的記憶體。在這種情況下,你可以使用Array.push.apply(arr1,arr2),它不會創建一個新數組,而是將第二個數組合併到第一個數組中,以減少記憶體使用:
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
11) 把NodeList轉換成陣列
如果运行document.querySelectorAll("p")函数,它会返回一个DOM元素数组,即NodeList对象。但是这个对象并没有一些属于数组的函数,例如:sort(),reduce(),map(),filter()。为了启用这些函数,以及数组的其他的原生函数,你需要将NodeList转换为数组。要进行转换,只需使用这个函数:[] .slice.call(elements):
var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // 现在已经转换成数组了 var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法
12) 对数组元素进行洗牌
如果要像外部库Lodash那样对数据元素重新洗牌,只需使用这个技巧:
var list = [1, 2, 3]; console.log(list.sort(function() { return Math.random() - 0.5 })); // [2,1,3]
以上是JavaScript中減少並優化程式碼的技巧總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!