常用 JavaScript 小技巧及原理詳解

標籤：false   使用   org   code   title   tor   oop   儲存   實值型別   

善於利用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‘);  //NodeListvar 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 小技巧及原理詳解