好用JavaScript技巧有哪些

這篇文章主要講解了“好用JavaScript技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“好用JavaScript技巧有哪些”吧！

1.獲取數組的最后一項

設置起始參數和終止參數時，Array.prototype.slice(begin,end)具有剪切數組的功能。但是，如果未設置終止參數，該功能將自動設置為數組的最大值。

該功能可接受負值，我想很多人對此并不了解，而且如果將起始參數設定為負數，那么會得到數組的最后幾個元素：

vararray = [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]

2.用||運算符默認某值

目前的ES6有默認參數功能。為了在舊版瀏覽器中模擬該功能，你可以用||(OR運算符)默認某值，將其作為第二個可用的參數。

如果第一個參數返回到了false，那么第二個參數就會被視為默認值。請看這個例子：

function User(name, age) { this.name = name || "OliverQueen"; this.age = age || 27; }var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25

3.重組數組元素

想不用Lodash這樣的外部工具庫就能重組數組元素?試試下面這個神奇的函數：

var list= [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

4.短路條件

如果你看到一個代碼類似于：

if (connected) { login(); }

可以通過結合使用變量(會被驗證)和函數之間的&&(AND運算符)來縮短上述代碼。比如，上述代碼可以縮短為一行：

connected && login();

你可以執行相同操作來檢查對象中是否存在屬性或函數。與以下代碼類似：

user && user.login();

5.截取數組

這項技巧可以鎖定數組的大小，能夠根據你要設置的元素數目從數組中刪除某些元素，十分有用。

比如，如果有一個含有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]

6.用+運算符轉換為數字

這種技巧真是太棒了!它操作起來非常簡單，不過只適用于str函數，否則它會返回到NaN(非數字)。請看下面的例子：

functiontoNumber(strNumber) {  return +strNumber;  }console.log(toNumber("1234")); // 1234  console.log(toNumber("ACB")); // NaN

這種技巧同樣適用于日期，在這種情況下，它會返回到時間戳：

console.log(+new Date()) //1461288164385

7.合并數組

如果需要將兩個數組合并，那么可以用Array.contat()函數：

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)，而不用創建新數組。這種函數會將第二個數組并入第一個數組，不會占用太多內存：

vararray1 = [1,2,3];  var array2 = [4,5,6];  console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

8.在循環中緩存array.length

這個技巧很簡單，但在循環中處理大型數組時，它會對性能產生很大影響。為了迭代數組，幾乎每個人都會同時寫出這樣的代碼：

for(vari = 0; i < array.length; i++) {  console.log(array[i]);  }

如果處理的是小型數組，那沒問題，可是如果處理的是大型數組，那么代碼會在循環的每一次迭代中重新計算數組的大小，從而造成延遲。

為了避免此種情況，可以將要用的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]);  }

9.全部替換

String.replace()函數允許使用字符串和正則表達式替換字符串;在本機中該函數只能替換第一次。但是可以在正則表達式的末尾使用/g，從而模擬replaceAll()函數：

varstring = "john john";  console.log(string.replace(/hn/, "ana")); // "joana john"  console.log(string.replace(/hn/g, "ana")); // "joana joana"

10.用!!運算符轉換為布爾值

有時候，為將變量看作真值，我們需要檢查一個變量是否存在或是否具有有效值。在此驗證過程中，你可以用!!(雙重否定運算符)。

一個簡單的!!variable會自動將數據轉換為布爾值，而且該變量只有在含有0、null、""、undefined或NaN這樣的值時才會返回到false，否則會返回到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。

11.將NodeList轉換為Arrays

如果運行document.querySelectorAll("p")函數，那么它有可能會返回到DOM元素數組，即NodeList對象。但是該對象并不具有數組的全部函數，比如sort()、reduce()、map()和filter()。

為了運行以上函數以及其他自帶的數組函數，需要將NodeList轉化為Arrays。想試試這個技巧?用下面這個函數就可以：[].slice.call(elements):

var elements = document.querySelectorAll("p");// NodeList  var arrayElements = [].slice.call(elements); // Now the NodeList is an array//This is another way of converting NodeList to Arrayvar arrayElements =Array.from(elements);

感謝各位的閱讀，以上就是“好用JavaScript技巧有哪些”的內容了，經過本文的學習后，相信大家對好用JavaScript技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！