12個非常實用的JavaScript小技巧【推薦】，javascript小技巧

12個非常實用的JavaScript小技巧【推薦】，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.50console.log(account.hasMoney); // truevar emptyAccount = new Account(0);console.log(emptyAccount.cash); // 0console.log(emptyAccount.hasMoney); // false

在這個樣本中，只要account.cash的值大於0，那麼account.hasMoney返回的值就是true。

使用+將字串轉換成數字

這個技巧非常有用，其非常簡單，可以交字串資料轉換成數字，不過其只適合用於字串資料，否則將返回NaN，比如下面的樣本：

function toNumber(strNumber) {  return +strNumber;}console.log(toNumber("1234")); // 1234console.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 Queenconsole.log(user1.age); // 27var user2 = new User("Barry Allen", 25);console.log(user2.name); // Barry Allenconsole.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); // 6array.length = 3;console.log(array.length); // 3console.log(array); // [1,2,3]

替換所有

String.replace()函數允許你使用字串或Regex來替換字串，本身這個函數只替換第一次出現的字串，不過你可以使用正則表達多中的/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"); // NodeListvar arrayElements = [].slice.call(elements); // Now the NodeList is an arrayvar 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小技巧【推薦】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。