常用JavaScript小技巧及原理詳解

chnmagnus 發布于2019-08-20 17:00 / 317人閱讀

摘要：使用一元加模擬函數原理對非數值類型的數據使用一元加，會起到與函數相同的效果。中，若判斷不為則不再進行下一步操作。使用邏輯或設置默認值邏輯或也屬于短路操作，即當第一個操作數可以決定結果時，不再對第二個操作數進行求值。

善于利用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. 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實例。詳解看這里

GPU云服務器云服務器銷售經驗及技巧變量及數據詳解 database詳解及實例推送原理詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83307.html

2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

wwolf 2019-08-29 14:21 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 評論0 收藏0