你可能不知道的一些JavaScript 奇技淫巧
這里記錄一下以前學習各種書籍和文章里邊出現(xiàn)的JS的小技巧，分享給大家，也供自己查閱，同時感謝那些發(fā)現(xiàn)創(chuàng)造和分享這些技巧的前輩和大牛們。
1、遍歷一個obj的屬性到數(shù)組
- var a=[];
- for(a[a.length] in obj);
- return a;
乍一看可能比較蒙，不過仔細分析還是不難理解的。常見用法是for(var key in obj)，這里key初始也是undefined的，a[a.length]整體也是undefined，所以二者其實是等價的。在for循環(huán)中，obj 的屬性會依次賦值給key，同樣，也依次賦值給a[a.length]，這里length一直在變，就巧妙地挨個賦值給數(shù)組的每一個元素了。
2、重復字符串(如abc=>abcabc)
- function repeat(target,n){
- return (new Array(n+1).join(target));
- }
改良版本：
- function repeat(target,n){
- return Array.prototype.join.call(
- {length:n+1},target);//之所以要創(chuàng)建帶length屬性的對象，是因為調用數(shù)組原型方法時，必須是一個類數(shù)組對象，而類數(shù)組對象的條件就是length為非負整數(shù)
- }
不新建數(shù)組，而是用擁有l(wèi)ength屬性的對象替代，然后調用數(shù)組的join方法,性能提升很大
再改進：
- var repeat=(function(){
- join=Array.prototype.join,obj={};
- return function(target,n){
- obj.length=n+1;
- return join.call(obj,target); } })();
利用閉包將對象和join方法緩存起來，不用每次都新建對象和尋找方法
3、for循環(huán)中，當?shù)诙棡閒alse時會終止循環(huán)，這里并不一定存在比較，可以直接賦值，如果賦值為undefined之類的值時，轉成bool值也為假，因此也會終止，比如遍歷數(shù)組可以寫成：
- for(var i=arr.length,element;element=arr[—-i];){…}
這里，第二項一定是arr[—-i]而非arr[i--],如果是后者的話，上來就是undefined，就不會執(zhí)行循環(huán)體，或者for(var i=0,element;element=arr[i++];){…}
4、NaN是JS中唯一不等于自己的值，因此可以用來判斷一個變量是否真的為NaN：a!==a
5、“<”，”+”等運算符會強制符號兩邊的表達式執(zhí)行valueOf然后比較，所以如果兩邊是函數(shù)或者對象，而又重寫了該對象的valueOf方法，就會自動執(zhí)行兩邊的方法。如：
- var a={valueOf:function(){console.log(“aaa”);}},b={valueOf:function(){console.log(“bbb”);}};
- a<b;//會輸出：aaa;bbb;false;
6、JS具備自動插入分號的能力，但是自動插入分號并不是***的，其有三條規(guī)則：
1）只在”}”標記之前、一個或多個換行之后以及程序輸入的結尾被插入；
2）分號只在隨后的輸入標記不能被解析時插入；
這一點很重要，比如：
- a=b
- (f());
是不會在a=b之后自動插入分號的，因為a=b(f())是可以被解析的，因此像”(“,”[“,”+”,”-“,”/“開頭的時候，需要特別注意上一行可能不會自動插入。
還有一些情況，盡管不會出現(xiàn)解析錯誤，JS仍然會強制插入分號，這就是所謂的JS語法限制產生式。它不允許在兩個字符間出現(xiàn)換行，最危險的就是return語句，如
return
{};
會被強制插入而成為
return;
{};
類似的還有：throw語句、帶有顯示標簽的break活著continue語句、后置自增或自減運算符
3）分號不會作為分隔符在for循環(huán)空語句的頭部被自動插入
因此，***的辦法是在自己的js文件的最開始防御性地插入”;”，這樣在合并js文件的時候就不會出問題了。
7、閉包。理解閉包需學會三個基本事實：
（1）JS允許你引用在當前函數(shù)意外定義的變量
（2）即使外部函數(shù)已經返回，當前函數(shù)仍然可以引用在外部函數(shù)所定義的變量。這是因為JS的函數(shù)值包含里比調用它們時執(zhí)行所需要的代碼更多的信息
（3）閉包可以更新外部變量的值。這是因為閉包存儲的是外部變量的引用而非值副本。如：
- function box(){ var val=undefined; return { set:function(x){val=x;}, get:function(){return val;} };}var b=box();b.get();//“undefined”
- b.set(5);b.get();//5
這一點很重要，比如在函數(shù)的for循環(huán)體內返回閉包或者有閉包取for循環(huán)的計數(shù)器值，那么這個閉包取到的永遠是for循環(huán)結束時i的最終值，因為閉包存儲的是它的引用而非當時的值副本。
8、JS沒有塊級作用域，因此通常情況下函數(shù)內部的所有變量都是綁定到函數(shù)作用域的，也就是說相當于都在函數(shù)一開始就聲明了的，一個例外就是try/catch中的變量是塊級的，只屬于try/catch塊。
9、眾所周知，在函數(shù)內部聲明函數(shù)是可以的，但是在在函數(shù)內的局部塊里聲明，可能會出現(xiàn)問題：
- function f(){return “global”;}function test(x){ function f(){return “local”} var result=[]; if(x){ result.push(f()); } result.push(f()); return result;}test(true);//[“local”,”local”]
- test(false);//[“local”]
將函數(shù)聲明到if塊中：
- function f(){return “global”;}function test(x){ var result=[]; if(x){ function f(){return “local”} result.push(f()); } result.push(f()); return result;} test(true);//?
- test(false);//?
結果會如何呢？理論上講，JS沒有塊級作用域，因此f()的作用域是整個test函數(shù)，因此合理猜測應該是與上一次輸出相同，全部 為”local”，可是并不是所有的JS執(zhí)行環(huán)境都如此行事，有的會根據(jù)是否執(zhí)行包含f的代碼塊來有條件地綁定函數(shù)f（綁定即意味著將該變量綁定到其最近 的作用域，而賦值是發(fā)生在代碼實際執(zhí)行到賦值那一步的時候進行的）。
因此***的辦法是如果要聲明嵌套函數(shù)，都在其富函數(shù)的最外層聲明，要么就不要聲明函數(shù)，而是使用var聲明和函數(shù)表達式來實現(xiàn)：
- function f(){return “global”;}function test(x){ var result=[]; if(x){ var g=function(){return “local”} result.push(g()); } result.push(f()); return result;}
10、用js創(chuàng)建字典的時候，如果是利用對象的方式（因為JS對象的核心是一個字符串屬性名稱和屬性值的映射表），會遇到一個問題就是原型污染，因 為獲取字典屬性值的時候用hasOwnProperty還好，如果用for in遍歷的話，不僅會遍歷對象本身，包括它的原型，因此如果在其他地方污染了Object的原型，那么for in就會產生非預期的結果，這時可能會用hasOwnProperty來先檢測該對象本身是否含有屬性來避免原型污染，然而更極端的情況是連 hasOwnProperty這個原型方法都有可能被污染。避免原型污染的方法是在創(chuàng)建字典對象的時候用Object.create(null)來創(chuàng)建一 個完全空對象，這個對象沒有原型，這個方法是ES5的,在沒有這個方法可用的時候，***是創(chuàng)建字典類，然后在字典類里用數(shù)組來存儲有序集合，自己維護這個 集合。
11、JS中的類數(shù)組對象可以享用數(shù)組的大部分原型方法如map等，類數(shù)組對象是指滿足兩個條件的對象：一是具備合理范圍值內的length屬性， 二是length屬性大于該對象的***索引，索引是一個合理范圍的證書，它的字符串表示的是對象的一個key；但是數(shù)組的一個原型方法contact是不 能被類數(shù)組對象調用的，因此需要先用[].slice.call把類數(shù)組對象轉換為真正的數(shù)組比如[].slice.call(arguments)。
12、并不是所有時候都需要繼承，繼承也不是***的，有時候會創(chuàng)造比他能解決的更多的問題，特別是當層次關系沒那么明顯的時候，這時候應該多用結構 類型(又叫鴨子類型，如果它看起來像鴨子、游泳像鴨子并且叫聲像鴨子，那么它就是鴨子)，用結構類型設計靈活的對象接口的時候，不需要創(chuàng)建類工廠來返回類 的實例，而是直接返回對象，對象具備預期的方法和屬性，比如：
原文鏈接：http://www.cnblogs.com/dson/p/4415278.html
【編輯推薦】
- JavaScript全文搜索之相關度評分
- 編程語言流行榜：JavaScript 坐頭把交椅，Swift 躥升最快
- JavaScript中常見的字符串操作函數(shù)及用法
- JavaScript開發(fā)者：Win10斯巴達瀏覽器很贊
- JavaScript將在企業(yè)環(huán)境中引發(fā)巨大變革
【責任編輯：wangxueyan TEL：（010）68476606】
