這篇文章主要為大家展示了“非常實用的JavaScript小技巧有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“非常實用的JavaScript小技巧有哪些”這篇文章吧。

信宜網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

使用!!操作符轉(zhuǎn)換布爾值

有時候我們需要對一個變量查檢其是否存在或者檢查值是否有一個有效值，如果存在就返回true值。為了做這樣的驗證，我們可以使用!!操作符來實現(xiàn)是非常的方便與簡單。對于變量可以使用!!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。

使用+將字符串轉(zhuǎn)換成數(shù)字

這個技巧非常有用，其非常簡單，可以交字符串數(shù)據(jù)轉(zhuǎn)換成數(shù)字，不過其只適合用于字符串數(shù)據(jù)，否則將返回NaN，比如下面的示例：

function toNumber(strNumber) {     return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN

這個也適用于Date，在本例中，它將返回的是時間戳數(shù)字：

console.log(+new Date()) // 1461288164385

并條件符

如果你有一段這樣的代碼：

if (conected) {     login(); }

你也可以將變量簡寫，并且使用&&和函數(shù)連接在一起，比如上面的示例，可以簡寫成這樣：

conected && login();

如果一些屬性或函數(shù)存在于一個對象中，你也可以這樣做檢測，如下面的代碼所示：

user && user.login();

使用||運算符

在ES6中有默認參數(shù)這一特性。為了在老版本的瀏覽器中模擬這一特性，可以使用||操作符，并且將將默認值當做第二個參數(shù)傳入。如果***個參數(shù)返回的值為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

在循環(huán)中緩存array.length

這個技巧很簡單，這個在處理一個很大的數(shù)組循環(huán)時，對性能影響將是非常大的?；旧?，大家都會寫一個這樣的同步迭代的數(shù)組：

for(var i = 0; i < array.length; i++) {     console.log(array[i]); }

如果是一個小型數(shù)組，這樣做很好，如果你要處理的是一個大的數(shù)組，這段代碼在每次迭代都將會重新計算數(shù)組的大小，這將會導致一些延誤。為了避免這種現(xiàn)象出現(xiàn)，可以將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]); }

檢測對象中屬性

當你需要檢測一些屬性是否存在，避免運行未定義的函數(shù)或?qū)傩詴r，這個小技巧就顯得很有用。如果你打算定些一些跨兼容的瀏覽器代碼，你也可能會用到這個小技巧。例如，你想使用document.querySelector()來選擇一個id，并且讓它能兼容IE6瀏覽器，但是在IE6瀏覽器中這個函數(shù)是不存在的，那么使用這個操作符來檢測這個函數(shù)是否存在就顯得非常的有用，如下面的示例：

if ('querySelector' in document) {     document.querySelector("#id"); } else {     document.getElementById("id"); }

在這個示例中，如果document不存在querySelector函數(shù)，那么就會調(diào)用docuemnt.getElementById("id")。

獲取數(shù)組中***一個元素

Array.prototype.slice(begin,end)用來獲取begin和end之間的數(shù)組元素。如果你不設置end參數(shù)，將會將數(shù)組的默認長度值當作end值。但有些同學可能不知道這個函數(shù)還可以接受負值作為參數(shù)。如果你設置一個負值作為begin的值，那么你可以獲取數(shù)組的***一個元素。如：

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]

數(shù)組截斷

這個小技巧主要用來鎖定數(shù)組的大小，如果用于刪除數(shù)組中的一些元素來說，是非常有用的。例如，你的數(shù)組有10個元素，但你只想只要前五個元素，那么你可以通過array.length=5來截斷數(shù)組。如下面這個示例：

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()函數(shù)允許你使用字符串或正則表達式來替換字符串，本身這個函數(shù)只替換***次出現(xiàn)的字符串，不過你可以使用正則表達多中的/g來模擬replaceAll()函數(shù)功能：

var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"

合并數(shù)組

如果你要合并兩個數(shù)組，一般情況之下你都會使用Array.concat()函數(shù)：

var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然后這個函數(shù)并不適合用來合并兩個大型的數(shù)組，因為其將消耗大量的內(nèi)存來存儲新創(chuàng)建的數(shù)組。在這種情況之個，可以使用Array.pus().apply(arr1,arr2)來替代創(chuàng)建一個新數(shù)組。這種方法不是用來創(chuàng)建一個新的數(shù)組，其只是將***個第二個數(shù)組合并在一起，同時減少內(nèi)存的使用：

var array1 = [1,2,3]; var array2 = [4,5,6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

將NodeList轉(zhuǎn)換成數(shù)組

如果你運行document.querySelectorAll(“p”)函數(shù)時，它可能返回DOM元素的數(shù)組，也就是NodeList對象。但這個對象不具有數(shù)組的函數(shù)功能，比如sort()、reduce()、map()、filter()等。為了讓這些原生的數(shù)組函數(shù)功能也能用于其上面，需要將節(jié)點列表轉(zhuǎn)換成數(shù)組。可以使用[].slice.call(elements)來實現(xiàn)：

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

數(shù)組元素的洗牌

對于數(shù)組元素的洗牌，不需要使用任何外部的庫，比如Lodash，只要這樣做：

var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

以上是“非常實用的JavaScript小技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！