12個非常有用的javascript技巧，必看！
提示：該文章是整理別人別人的文章，作者比較多，很難分辨原創作者是誰。
1）使用!!將變量轉換成布爾類型
有時，我們需要檢查一些變量是否存在，或者它是否具有有效值，從而將他們的值視為true。對於這樣的檢查，你可以使用!!（雙重否定運算符），他能自動將任何類型的數據轉化為布爾值，只有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
2）使用+將變量轉化成數字
這個轉化比較簡單，但它只適合數字字符串，不然就會返回NaN（Not a Number）。看例子：
function toNumber(strNumber){ return +strNumber; } console.log(toNumber(‘342‘)); //342
console.log(toNumber(‘324s‘)); //NaN
//也可以用於轉化Date，返回結果為時間戳
console.log(+new Date());
3）短路條件
在編寫代碼中經常會遇到這樣的代碼:
if(conected){ login(); }
可以使用&&（and連接符）來縮短代碼，上面的代碼可以縮減為
conected&&login();
也可以使用這種方法來檢查對象中是否存在某些屬性或者方法
user&&user.login();
4）使用||設置默認值
在ES6中有默認參數這個功能。為了在舊版瀏覽器中模擬此功能，可使用||（or運算符），並把默認值作為他的第二個參數。如果第一個參數返回false，那麽第二個參數就會被作為默認值返回
function user(name,age){ this.name = name||‘Olive Queen‘; this.age = age||27; } var user1 = new user(); console.log(user1.name);//Olive Queen console.log(user1.age);//27 var user2 = new user(‘liming‘,25); console.log(user2.name);//liming console.log(user2.age);//25
5）在循環中緩存arr.length
這個技巧非常簡單，並且在循環處理大數組時能夠避免對性能造成巨大的影響。例如for循環
var arr = [1,2,3,‘a‘,‘ds‘,4]; for(var i = 0;i<arr.length;i++){ console.log(arr[i]); }
對於小數組還好，較大數組的話每一次循環都會獲取arr.length，這會產生一定的延遲，為了避免這種情況，在for循環開始之前緩存arr.length
var arr = [1,2,3,‘a‘,‘ds‘,4]; var len = arr.length; for(var i = 0;i<len;i++){ console.log(arr[i]); }
或者
var arr = [1,2,3,‘a‘,‘ds‘,4]; for(var i = 0，len = arr.length;i<len;i++){ console.log(arr[i]); }
6）檢查對象中的屬性
當你需要檢查某些屬性是否存在的時候，避免運行未定義的函數或者屬性時，這個技巧就會非常的有用。解決瀏覽器兼容問題中也可以使用這個技巧。例如通過ID獲取元素的完美方法
if(‘querySelector‘ in document){ document.querySelector(‘#id‘); }else{ document.getElementById(‘id‘); }
7）獲取數組的最後一個元素
Array。prototype.slice（begin，end）可以用來裁剪數組。但是如果沒有設置結束參數end的值的話，該函數會自動將end設置為數組長度值。如果將begin的數值設置為復制的話，就會從數組中獲取倒數的元素：
var arr = [1,2,3,4,5]; console.log(arr.slice(-1));//[6]
console.log(arr.slice(-2));//[5,6]
console.log(arr.slice(-3));//[4,5,6]
8）數組截斷
這個技術可以鎖定數組的大小，這對於要刪除數組中固定數量的元素是非常有用的。
var arr = [1,2,3,4,5,6,7,8,9,10]; arr.length = 5; console.log(arr);//[1,2,3,4,5] arr.length = 7; console.log(arr);//[1,2,3,4,5,undefined,undefined]
如果arr.length設置的數值大於當前數組長度，超過的元素會分配為undefined
9）替換數組元素
var str = ‘john john‘; console.log(str.replace(/hn/,‘nan‘));//jonan john console.log(str.replace(/hn/g,‘nan‘));//jonan jonan
這看似是在數組替換元素中增加了正則表達式中的內容，全局匹配g
10）合並數組
一般需要合並數組，使用Array.concat()方法，字符串也可以看做是數組
var str1 = ‘hello‘; var str2 = ‘world‘; console.log(str1.concat(str2));//helloworld
var str3 = [1,2,3];
var str4 = [4,5,6];
console.log(str3.concat(str4));//[1,2,3,4,5,6]
但是該方法對於大數組來說並不合適，因為他會在內部新建一個數組並消耗大量的內存。原作者推薦使用Array.push.apply(arr1,arr2)，但是在實踐後發現其返回的結果始終是最後數組的長度，而不是數組的各個元素；而且有博主曾經做過Array.concat與Array.push.apply之間性能的測試實驗。結果顯示Array.concat操作的數組長度沒有顯示，而Array.oush.apply操作的數組因瀏覽器不同而不同，一般不能超過十萬。
腳本之家有位朋友寫過一篇《關於JS數組追加數組采用push.apply的問題》，討論Array.push.apply的問題，最後采用forEach，不僅可以避免數組過大的問題，而且從性能考慮forEach也是最快的。
var arr = [1,2,3,4,5,6,7,8,9]; arr.forEach(function(a){ console.log(a); });
但是在IE中該方法不能正常執行，提示Array不支持此屬性或此方法，即IE的Array中沒有forEach方法。但是可以添加原型方法
//Array.forEach implementation for IE support.. //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback, thisArg) { var T, k; if (this == null) { throw new TypeError(" this is null or not defined"); } var O = Object(this); var len = O.length >>> 0; // Hack to convert O.length to a UInt32 if ({}.toString.call(callback) != "[object Function]") { throw new TypeError(callback + " is not a function"); } if (thisArg) { T = thisArg; } k = 0; while (k < len) { var kValue; if (k in O) { kValue = O[k]; callback.call(T, kValue, k, O); } k++; } }; }
11）
12個非常有用的javascript技巧，必看！