建站
咨詢
售后
建站咨詢
新聞中心
今天，小芯給大家整理11條非常好用的JavaScript技巧。
買不了吃虧，買不了上當(dāng)，快來看看吧~
1.獲取數(shù)組的最后一項(xiàng)
設(shè)置起始參數(shù)和終止參數(shù)時(shí)，Array.prototype.slice(begin,end)具有剪切數(shù)組的功能。但是，如果未設(shè)置終止參數(shù)，該功能將自動(dòng)設(shè)置為數(shù)組的最大值。
該功能可接受負(fù)值，我想很多人對(duì)此并不了解，而且如果將起始參數(shù)設(shè)定為負(fù)數(shù)，那么會(huì)得到數(shù)組的最后幾個(gè)元素：
- 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)某值，將其作為第二個(gè)可用的參數(shù)。
如果第一個(gè)參數(shù)返回到了false，那么第二個(gè)參數(shù)就會(huì)被視為默認(rèn)值。請(qǐng)看這個(gè)例子：
- 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ù)組元素?試試下面這個(gè)神奇的函數(shù)：
- var list= [1,2,3];
- console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
4.短路條件
如果你看到一個(gè)代碼類似于：
- if (connected) { login();
- }
可以通過結(jié)合使用變量(會(huì)被驗(yàn)證)和函數(shù)之間的&&(AND運(yùn)算符)來縮短上述代碼。比如，上述代碼可以縮短為一行：
- connected && login();
你可以執(zhí)行相同操作來檢查對(duì)象中是否存在屬性或函數(shù)。與以下代碼類似：
- user && user.login();
5.截取數(shù)組
這項(xiàng)技巧可以鎖定數(shù)組的大小，能夠根據(jù)你要設(shè)置的元素?cái)?shù)目從數(shù)組中刪除某些元素，十分有用。
比如，如果有一個(gè)含有10個(gè)元素的數(shù)組，但是你只想要
前五個(gè)，那就可以截取數(shù)組，通過設(shè)置array.length=5讓它變小。請(qǐng)看下面的例子：
- 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ù)字
這種技巧真是太棒了!它操作起來非常簡(jiǎn)單，不過只適用于str函數(shù)，否則它會(huì)返回到NaN(非數(shù)字)。請(qǐng)看下面的例子：
- functiontoNumber(strNumber) {
- return +strNumber;
- }console.log(toNumber("1234")); // 1234
- console.log(toNumber("ACB")); // NaN
這種技巧同樣適用于日期，在這種情況下，它會(huì)返回到時(shí)間戳：
- console.log(+new Date()) //1461288164385
7.合并數(shù)組
如果需要將兩個(gè)數(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ù)組時(shí)會(huì)占用大量?jī)?nèi)存。
在這種情況下，可以用Array.push.apply(arr1, arr2)，而不用創(chuàng)建新數(shù)組。這種函數(shù)會(huì)將第二個(gè)數(shù)組并入第一個(gè)數(shù)組，不會(huì)占用太多內(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
這個(gè)技巧很簡(jiǎn)單，但在循環(huán)中處理大型數(shù)組時(shí)，它會(huì)對(duì)性能產(chǎn)生很大影響。為了迭代數(shù)組，幾乎每個(gè)人都會(huì)同時(shí)寫出這樣的代碼：
- for(vari = 0; i < array.length; i++) {
- console.log(array[i]);
- }
如果處理的是小型數(shù)組，那沒問題，可是如果處理的是大型數(shù)組，那么代碼會(huì)在循環(huán)的每一次迭代中重新計(jì)算數(shù)組的大小，從而造成延遲。
為了避免此種情況，可以將要用的array.length緩存在某個(gè)變量中，而不用在循環(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)換為布爾值
有時(shí)候，為將變量看作真值，我們需要檢查一個(gè)變量是否存在或是否具有有效值。在此驗(yàn)證過程中，你可以用!!(雙重否定運(yùn)算符)。
一個(gè)簡(jiǎn)單的!!variable會(huì)自動(dòng)將數(shù)據(jù)轉(zhuǎn)換為布爾值，而且該變量只有在含有0、null、""、undefined或NaN這樣的值時(shí)才會(huì)返回到false，否則會(huì)返回到true。
為了在實(shí)踐中理解這一過程，我們來看一看下面這個(gè)簡(jiǎn)單的例子：
- 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ù)，那么它有可能會(huì)返回到DOM元素?cái)?shù)組，即NodeList對(duì)象。但是該對(duì)象并不具有數(shù)組的全部函數(shù)，比如sort()、reduce()、map()和filter()。
為了運(yùn)行以上函數(shù)以及其他自帶的數(shù)組函數(shù)，需要將NodeList轉(zhuǎn)化為Arrays。想試試這個(gè)技巧?用下面這個(gè)函數(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);
文章題目：別客氣，11種在教程中難以找到的JavaScript技巧，請(qǐng)收下
標(biāo)題路徑：http://www.5511xx.com/article/coohjdi.html
