關於12個非常實用的JavaScript小技巧的程式碼實例詳解
在這篇文章中將分享12個有關於JavaScript的小技巧。這些小技巧可能在你的實際工作中或許能幫助你解決一些問題。
使用!!
運算元轉換布林值
有時候我們需要對一個變數查檢其是否存在或檢查值是否有一個有效值,如果存在就回傳true
值。為了做這樣的驗證,我們可以使用!!
操作符來實現是非常的方便與簡單。對於變數可以使用!!variable
做偵測,只要變數的值為:0
、null
、" "
、 undefined
或NaN
都會回傳的是false
,反之回傳的是true
。例如下面的範例:
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
的值大於0
,那麼account.hasMoney
回傳的值就是true
。
使用+
將字串轉換成數字
這個技巧非常有用,其非常簡單,可以交字串資料轉換成數字,不過其只適合用於字串數據,否則將返回NaN
,例如下面的範例:
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN
這個也適用於Date
,在本例中,它將返回的是時間戳數字:
console.log(+new Date()) // 1461288164385
並條件符
如果你有一段這樣的程式碼:
if (conected) { login(); }
你也可以將變數簡寫,並且使用&&
#和函數連接在一起,例如上面的範例,可以簡寫成這樣:
conected && login();
如果一些屬性或函數存在於一個物件中,你也可以這樣做檢測,如下面的程式碼所示:
user && user.login();
使用||
運算子
在ES6中有預設參數這一特性。為了在舊版的瀏覽器中模擬此特性,可以使用||
操作符,並且將預設值當作第二個參數傳入。如果第一個參數傳回的值為false
,那麼第二個值將會被視為一個預設值。如下面這個範例:
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25
在迴圈中快取array.length
這個技巧很簡單,這個在處理一個很大的陣列循環時,對效能影響將是非常大的。基本上,大家都會寫一個這樣的同步迭代的數組:
for(var i = 0; i < array.length; i++) { console.log(array[i]); }
如果是一個小型數組,這樣做很好,如果你要處理的是一個大的數組,這段程式碼在每次迭代都會重新計算數組的大小,這將會導致一些延誤。為了避免這種現像出現,可以將array.length
做一個快取:
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]); }
偵測物件中屬性
當你需要偵測一些屬性是否存在,避免執行未定義的函數或屬性時,這個小技巧就顯得很有用。如果你打算訂些一些跨相容的瀏覽器程式碼,你也可能會用到這個小技巧。例如,你想使用document.querySelector()
來選擇一個id
,並且讓它能相容於IE6瀏覽器,但是在IE6瀏覽器中這個函數是不存在的,那麼使用這個運算子來偵測這個函數是否存在就顯得非常的有用,如下面的範例:
if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); }
在這個範例中,如果document
不存在querySelector
函數,那麼就會呼叫docuemnt.getElementById("id")
。
取得陣列中最後一個元素
Array.prototype.slice(begin,end)
用來取得begin
和end
之間的陣列元素。如果你不設定end
參數,你會將陣列的預設長度值當作end
值。但有些同學可能不知道這個函數還可以接受負值當參數。如果你設定一個負值作為begin
的值,那麼你可以取得陣列的最後一個元素。如:
var array = [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]
陣列截斷
這個小技巧主要用來鎖定陣列的大小,如果用於刪除陣列中的某些元素來說,是非常有用的。例如,你的陣列有10
個元素,但你只想只要前五個元素,那麼你可以透過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]
取代所有
String.replace()
函數允許你使用字串或正規表示式來取代字串,本身這個函數只取代第一次出現的字串,不過你可以用正規表示多中的/g
來模擬replaceAll()
函數函數:
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
合併陣列
如果你要合併兩個數組,一般情況之下你都會使用Array.concat()
函數:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
然後這個函數並不適合用來合併兩個大型的數組,因為其將消耗大量的記憶體來儲存新建立的數組。在這種情況之個,可以使用Array.pus().apply(arr1,arr2)
來取代建立一個新陣列。這種方法不是用來創建一個新的數組,其只是將第一個第二個數字組合併在一起,同時減少記憶體的使用:
var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
将NodeList
转换成数组
如果你运行document.querySelectorAll(“p”)
函数时,它可能返回DOM元素的数组,也就是NodeList
对象。但这个对象不具有数组的函数功能,比如sort()
、reduce()
、map()
、filter()
等。为了让这些原生的数组函数功能也能用于其上面,需要将节点列表转换成数组。可以使用[].slice.call(elements)
来实现:
var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // Now the NodeList is an array var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array
数组元素的洗牌
对于数组元素的洗牌,不需要使用任何外部的库,比如Lodash,只要这样做:
var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
总结
现在你学会了些有用的JavaScript小技巧。希望这些小技巧能在工作中帮助你解决一些麻烦,或者说这篇文章对你有所帮助。如果你有一些优秀的JavaScript小技巧,欢迎在评论中与我们一起分享。
以上就是关于12个非常实用的JavaScript小技巧的代码实例详解的内容,更多相关内容请关注PHP中文网(www.php.cn)!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

PyQt5安裝報錯怎麼辦?這些小技巧讓你事半功倍! PyQt5是一種Python程式語言中使用廣泛的GUI(圖形使用者介面)工具包。它提供了許多強大的功能和工具,幫助開發人員創建互動式的和吸引人的應用程式。然而,在安裝PyQt5時,有時會遇到一些報錯。本文將介紹一些常見的PyQt5安裝報錯及解決方法,以協助您順利安裝並使用PyQt5。常見報錯一:找不到pip指令
