在這篇文章中將給大家分享12個(gè)有關(guān)于JavaScript的小技巧。這些小技巧可能在你的實(shí)際工作中或許能幫助你解決一些問(wèn)題。

[[166146]]

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

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

在這個(gè)示例中，只要account.cash的值大于0，那么account.hasMoney返回的值就是true。

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

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

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

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

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

并條件符

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

if (conected) { 
    login(); 
} 

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

conected && login(); 

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

user && user.login(); 

使用||運(yùn)算符

在ES6中有默認(rèn)參數(shù)這一特性。為了在老版本的瀏覽器中模擬這一特性，可以使用||操作符，并且將將默認(rèn)值當(dāng)做第二個(gè)參數(shù)傳入。如果***個(gè)參數(shù)返回的值為false，那么第二個(gè)值將會(huì)認(rèn)為是一個(gè)默認(rèn)值。如下面這個(gè)示例：

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

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

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

如果是一個(gè)小型數(shù)組，這樣做很好，如果你要處理的是一個(gè)大的數(shù)組，這段代碼在每次迭代都將會(huì)重新計(jì)算數(shù)組的大小，這將會(huì)導(dǎo)致一些延誤。為了避免這種現(xiàn)象出現(xiàn)，可以將array.length做一個(gè)緩存：

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]); 
} 

檢測(cè)對(duì)象中屬性

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

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

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

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

Array.prototype.slice(begin,end)用來(lái)獲取begin和end之間的數(shù)組元素。如果你不設(shè)置end參數(shù)，將會(huì)將數(shù)組的默認(rèn)長(zhǎng)度值當(dāng)作end值。但有些同學(xué)可能不知道這個(gè)函數(shù)還可以接受負(fù)值作為參數(shù)。如果你設(shè)置一個(gè)負(fù)值作為begin的值，那么你可以獲取數(shù)組的***一個(gè)元素。如：

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ù)組截?cái)?/strong>

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] 

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

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

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

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]