在這篇文章中將給大家分享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();
||運算符
||操作符,並且將將默認值當做第二個參數傳入。如果第一個參數返回的值為
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
var list = [1,2,3]; console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]