好用JavaScript技巧有哪些

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

1.獲取數(shù)組的最后一項(xiàng)

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

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

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.用||運(yùn)算符默認(rèn)某值

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

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

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.重組數(shù)組元素

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

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

4.短路條件

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

if (connected) { login(); }

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

connected && login();

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

user && user.login();

5.截取數(shù)組

這項(xiàng)技巧可以鎖定數(shù)組的大小，能夠根據(jù)你要設(shè)置的元素?cái)?shù)目從數(shù)組中刪除某些元素，十分有用。

比如，如果有一個含有10個元素的數(shù)組，但是你只想要

前五個，那就可以截取數(shù)組，通過設(shè)置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.用+運(yùn)算符轉(zhuǎn)換為數(shù)字

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

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

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

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

7.合并數(shù)組

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

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

但是，該函數(shù)并不是合并大型數(shù)組比較好的工具，因?yàn)樗鼊?chuàng)建新數(shù)組時會占用大量內(nèi)存。

在這種情況下，可以用Array.push.apply(arr1,  arr2)，而不用創(chuàng)建新數(shù)組。這種函數(shù)會將第二個數(shù)組并入第一個數(shù)組，不會占用太多內(nèi)存：

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

8.在循環(huán)中緩存array.length

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

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

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

為了避免此種情況，可以將要用的array.length緩存在某個變量中，而不用在循環(huán)的每一次迭代中都調(diào)用它：

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()函數(shù)允許使用字符串和正則表達(dá)式替換字符串;在本機(jī)中該函數(shù)只能替換第一次。但是可以在正則表達(dá)式的末尾使用/g，從而模擬replaceAll()函數(shù)：

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

10.用!!運(yùn)算符轉(zhuǎn)換為布爾值

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

一個簡單的!!variable會自動將數(shù)據(jù)轉(zhuǎn)換為布爾值，而且該變量只有在含有0、null、""、undefined或NaN這樣的值時才會返回到false，否則會返回到true。

為了在實(shí)踐中理解這一過程，我們來看一看下面這個簡單的例子：

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轉(zhuǎn)換為Arrays

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

為了運(yùn)行以上函數(shù)以及其他自帶的數(shù)組函數(shù)，需要將NodeList轉(zhuǎn)化為Arrays。想試試這個技巧?用下面這個函數(shù)就可以：[].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技巧有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對好用JavaScript技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！