在這篇文章中，我將分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少並優化程式碼，需要的朋友參考下本文吧
在這篇文章中，我將分享12個非常有用的JavaScript技巧。這些技巧可以幫助你減少並優化程式碼。
有時，我們需要檢查一些變數是否存在，或者它是否具有有效值，從而將它們的值視為true。對於做這樣的檢查，你可以使用||（雙重否定運算子），它能自動將任何類型的資料轉換為布林值，只有這些變數才會回傳false：0， null，""，undefined或NaN，其他的都回傳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的值大於零，則account.hasMoney的值就是true。
2) 使用+將變數轉換成數字
這個轉換超級簡單，但它只適用於數字字串，不然就會返回NaN（不是數字）。看看這個範例：
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN這個轉換運算也可以作用在Date，在這種情況下，它將傳回時間戳：
console.log(+new Date()) // 1461288164385
3) 短路條件
如果你看過這種類似的程式碼:
if (conected) {
login();
}那麼你可以在這兩個變數之間使用&&（AND運算符）來縮短程式碼。例如，前面的程式碼可以縮減到一行：
conected && login();
你也可以用這個方法來檢查物件中是否存在某些屬性或函數。類似以下程式碼：
user && user.login();
4) 使用||設定預設值
在ES6中有預設參數這個功能。為了在舊版瀏覽器中模擬此功能，你可以使用||（OR運算子），並將預設值當作它的第二個參數。如果第一個參數傳回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數組時能夠避免對效能造成巨大的影響。基本上幾乎每個人都是這樣使用for來循環遍歷一個數組的：
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}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]);
}6) 偵測物件中的屬性
當你需要檢查某些屬性是否存在，避免執行未定義的函數或屬性時，這個技巧非常有用。如果你打算寫跨瀏覽器程式碼，你也可能會用到這個技術。例如，我們假設你需要編寫與舊版Internet Explorer 6相容的程式碼，並且想要使用document.querySelector()來透過ID取得某些元素。 但是，在現代瀏覽器中，這個函數並不存在。所以，要檢查這個函數是否存在，你可以使用in運算子。看下這個範例：
if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}7) 取得陣列的最後一個元素
Array.prototype.slice（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]
#8) 數組截斷
这个技术可以锁定数组的大小，这对于要删除数组中固定数量的元素是非常有用的。例如，如果你有一个包含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]
9) 全部替换
String.replace()函数允许使用String和Regex来替换字符串，这个函数本身只能替换第一个匹配的串。但是你可以在正则表达式末尾添加/g来模拟replaceAll()函数：
var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
10) 合并数组
如果你需要合并两个数组，你可以使用Array.concat()函数：
var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
但是，这个函数对于大数组来说不并合适，因为它将会创建一个新的数组并消耗大量的内存。在这种情况下，你可以使用Array.push.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];
11) 把NodeList转换成数组
如果运行document.querySelectorAll("p")函数，它会返回一个DOM元素数组，即NodeList对象。但是这个对象并没有一些属于数组的函数，例如：sort()，reduce()，map()，filter()。为了启用这些函数，以及数组的其他的原生函数，你需要将NodeList转换为数组。要进行转换，只需使用这个函数：[] .slice.call（elements）：
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // 现在已经转换成数组了
var arrayElements = Array.from(elements); // 把NodeList转换成数组的另外一个方法12) 对数组元素进行洗牌
如果要像外部库Lodash那样对数据元素重新洗牌，只需使用这个技巧：
var list = [1, 2, 3];
console.log(list.sort(function() {
return Math.random() - 0.5
})); // [2,1,3]结论
现在，你已经学到了一些有用的JS技巧，它们主要用于缩减JavaScript代码量，其中一些技巧在许多流行的JS框架都使用到，如Lodash，Underscore.js，Strings.js等。如果你知道其他JS技巧，欢迎分享！
【相关推荐】
2. JavaScript运动框架之多值运动的具体介绍（四）
3. JavaScript运动框架之多物体任意值运动的示例代码分享（三）
4. JavaScript运动框架之如何解决防抖动问题、悬浮对联（二）
5. JavaScript运动框架之如何解决速度正负取整问题（一）
以上是關於JavaScript中最實用的12個技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
