常用 JavaScript 小技巧及原理詳解
善於利用JS中的小知識的利用,可以很簡潔的編寫代碼
1. 使用!!模擬Boolean()函數
原理:邏輯非操作一個數據對象時,會先將數據對象轉換為布爾值,然後取反,兩個!!重復取反,就實現了轉換為布爾值的效果。
2. 使用一元加(+)模擬Number()函數
原理:對非數值類型的數據使用一元加(+),會起到與Number()函數相同的效果。
-
null轉換為0
-
undefined轉換為NaN
-
false轉換為0,true轉換為1
-
對於字符串:
-
空字串轉換為0
-
含有數字或者浮點數或者十六進制格式的數據(11, 0.3, 0xfe等),轉換為相應的數值
-
含有其他格式字符,無法轉換為數值的字符串,轉換為NaN
-
-
對於對象,先調用
valueOf()
方法,在轉換,若結果為NaN,那麽再調用toString()
方法,之後再轉換
3. 使用邏輯與(&&)進行短路操作
if(connected){
login();
}
以上代碼可以簡化為
connected && login()
也可以用這種方法來檢查對象中是否存在某個屬性
user && user.login
原理:邏輯與(&&)會首先對第一個操作數進行求值,只有求值結果為true時才會對第二個操作數求值。connected && login()
中,若判斷connected不為true,則不再進行下一步操作。
所謂的短路操作即第一個操作數可以決定結果,則不再對第二個操作數進行求值。
4. 使用邏輯或(||)設置默認值
邏輯或(||)也屬於短路操作,即當第一個操作數可以決定結果時,不再對第二個操作數進行求值。利用這個特點,我們可以給賦值語句設置默認值。只有當第一個操作數為null或者undefined時,才會把第二個操作數賦值給目標。
function User(name, age){
this.name = name || "Liming";
}
上述代碼中,如果函數中沒有傳入name參數,name的值為undefined,那麽就會給this.name
賦值為"Liming"。
ES6中可以為函數設置默認值,所以這個無需在函數中使用,但是其他地方還是很有用的。
5. 獲取數組最後n個元素
可以使用以下代碼獲取數組中最後n個元素
var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); //[6]
console.log(array.slice(-2)); //[5, 6]
原理:Array.prototype.slice(begin,end)
可以用來裁剪數組,第二個參數的默認值是數組的長度值。若值傳入一個參數,則會返回從指定索引開始到數組結尾的所有值。
而slice()方法還可以接收負值,當傳入負值時,會自動加上數組的長度值使其轉換為正值,於是便得到了最後的n個值。
6. 合並大數組
常用的合並數組的方式是使用Array.concat()
函數。該函數會創建一個新數組,將兩個數組連接起來存儲到新數組中,這會大量消耗內存。可以使用Array.push.apply(arr1, arr2),它不會創建新數組,而是將第二個數組合並到第一個數組中,以減少內存的消耗。
var a = [1,2];
var b = [3,4];
console.log(a.push.apply(a, b)); // [1,2,3,4]
//或者
console.log(Array.prototype.push.apply(a, b)); // [1,2,3,4]
原理: Array.push()是在數組的末尾增加元素,但是如果使用a.push(b)
會把整個數組b當作一個元素添加到數組a中。
而apply()方法,則允許將某個方法的參數以數組的形式傳入,所以起到了將數組b中的元素追加到數組a中的效果。
7. NodeList轉換為數組
使用document.querySelectorAll(‘div‘)
返回的是NodeList對象,雖然它很像數組,但是並不能使用諸如sort(),filter()等方法。你可以將其轉換為真正的數組。
var eles = document.querySelectorAll(‘p‘); //NodeList
var arrayElements = [].slice.call(eles); //轉化為數組
// 或者
var arrayElements = Array.prototype.slice.call(eles);
// 或者
var arrayElements = Array.from(eles);
原理:
-
[].slice.call(eles):
首先創建了一個空數組[],然後調用他的slice()
方法,但是在slice()方法的執行中,把this
對象指向了eles,所以會對eles進行裁減,由於對slice()方法沒有傳入參數,所以相當於slice(0,eles.length),會按照元長度返回一個數組。 -
Array.prototype.slice.call(eles): 原理與上面相似,只不過這次沒有創建空數組,而是直接使用了原型中的方法
-
Array.from()
Array.from()接受一個類數組對象或者可叠代對象,基於該對象創建一個新的Array實例。詳解看這裏
常用 JavaScript 小技巧及原理詳解