2019獨角獸企業重金招聘Python工程師標準>>>

????????眾所周知，Javascript是全球最流行的語言之一，它涉足Web開發，移動端開發（PhoneGap?、?Appcelerator?），服務端開發（?Nodejs?、?Wakanda?），還有多種第三方實現（CoffeeScript這種）。此外Javascript還是許多開發者進入編程世界所接觸的第一門語言。它既可以在瀏覽器中簡單的彈出一個alert窗口，也能達到控制機器人這種復雜的程度（比如?nodebot?、nodruino）。現在那些能夠熟練編寫結構清晰、性能卓越的Javascript開發者們，已經成為招聘市場上炙手可熱的應聘者了。

????????在這篇文章中，我將向你展示一系列Javascript相關的小技巧和一些最佳實踐。除了少數幾個示例，大部分示例都可以在瀏覽器環境或者服務端環境適用。

注意，文章中所有的代碼片段都已經在Google Chrome V30(V8 3.20.17.15)測試通過。

1、使用?var?關鍵字進行變量賦值

在Javascript中，如果一個變量沒有經過聲明就直接進行賦值操作，那么這個變量就會自動轉變成全局變量。我們要盡量避免這種情況（全局變量）。

2、使用?===?來代替?==?進行判等

==?和?!=?操作符會在某些情況下自動進行類型轉化。但是?===?和?!==?不會做自動轉化，它們在做比較時，會同時比較數據類型和值，這也使得?===?和?!==?要比==?和?!=?的速度要快。

[10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false '' == false // is true but true == "a" is false '' === false // is false

3、undefined?，?null?，0，?false?，?NaN?，?''?（空字符串）都為邏輯假值

4、使用分號?;?來結束一行代碼

使用分號來結束代碼行是一個被Javascript社區推薦的最佳實踐。如果你忘了也沒有關系，因為現在的Javascript引擎將會自動給你加上分號。至于我們為什么應該使用分號，可以參閱這篇文章?http://davidwalsh.name/javascript-semicolons?。

5、使用對象構造器

functionPerson(firstName, lastName){this.firstName = firstName;this.lastName = lastName; } var Saad = new Person("Saad", "Mousliki");

6、使用?typeof?、?instanceof?、?constructor?時要謹慎小心

• typeof?：JavaScript的一元操作符，用于以字符串的形式返回變量的原始類型，注意，?typeof null?也會返回?object?，大多數的對象類型（數組?Array?、時間?Date?等）也會返回?object
• constructor?：對象（函數）的內部原型屬性，它是可寫的（可以被重寫）
• instanceof?：JavaScript操作符，會在原型鏈中的構造器中搜索，找到則返回true?，否則返回?false?（常用于判斷某一個對象是否是某個構造器或者其父類構造器的實例）

var arr = ["a", "b", "c"]; typeof arr; // return "object" arr instanceof Array // true arr.constructor(); // []

7、學會使用自調用函數

函數在創建之后直接自動執行，通常稱之為自調用匿名函數（Self-Invoked Anonymous Function）或直接調用函數表達式（Immediately Invoked Function Expression ）。比如，

(function(){// some private code that will be executed automatically })();(function(a,b){var result = a+b;return result; })(10,20);

8、隨機從數組中取出一個元素

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];

9、從一個指定的范圍中取出一個隨機數

這個功能在生成測試用的假數據時特別有用。比如取一個指定范圍內的工資數。

var x = Math.floor(Math.random() * (max - min + 1)) + min;

10、生成一個從0開始到指定數字的序列

var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 100]

11、生成一個隨機的字母數字序列

functiongenerateRandomAlphaNum(len) {var rdmString = "";for( ;rdmString.length < len; rdmString += Math.random().toString(36).substr(2));return rdmString.substr(0, len); }

譯者注

toString()?方法可以接受一個參數表示數字進制。而36進制剛好可以使用a-z和0-9這些字符。所以此方法可以用于生成簡單的隨機串。

12、打亂一個數字數組的順序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; numbers = numbers.sort(function(){ return Math.random() - 0.5}); /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */

這里采用了原生的排序函數?sort()?，此外我們還可以使用專門的工具庫來得到這一目的。

13、字符串去空格

像Java、C#、PHP這些語言都內置了?trim()?功能函數用于字符串去空格。但是Javascript沒有這個內置方法。可以通過下面的方法來得到此目的，

String.prototype.trim = function() {returnthis.replace(/^\s+|\s+$/g, ""); };

不過，在新的Javascript引擎中，已經內置支持了這個功能。

14、將一個數組追加到另一個數組中

var array1 = [12 , "foo" , {name "Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); /* array1 值為 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

15、將?argruments?轉換成數組

var argArray = Array.prototype.slice.call(arguments);

16、檢驗一個參數是否為數字

functionisNumber(n){return !isNaN(parseFloat(n)) && isFinite(n); }

17、檢驗一個參數是否為數組

functionisArray(obj){return Object.prototype.toString.call(obj) === '[object Array]' ; }

如果?toString()?被重寫過的話，上面的方法就不行了。此時我們可以使用下面的方法，

Array.isArray(obj); // its a new Array method

如果在瀏覽器中沒有使用iframe，還可以用?instanceof?，但如果上下文太復雜，也有可能出錯。比如，

var myFrame = document.createElement('iframe'); document.body.appendChild(myFrame);var myArray = window.frames[window.frames.length-1].Array; var arr = new myArray(a,b,10); // [a,b,10]// myArray 的構造器已經丟失，instanceof 的結果將不正常// 不同iframe中的構造器是不能共享的 arr instanceofArray; // false

18、取出一個數組中的最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);

19、清空一個數組

var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].

20、不用使用?delete?關鍵字來移除一個數組元素

應該使用?splice?方法而不是?delete?來移除一個數組元素。對一個數組元素使用delete?會讓這個數組元素的值變為?undefined?，并沒有將這個數組元素給刪除掉。

錯誤的用法，

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; //return11delete items[3]; //return true items.length; //return11 /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

正確的用法，

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; //return11 items.splice(3,1) ; items.length; //return10 /* items 結果為 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

注意，要想移除一個對象的屬性，應該采用?delete?方法。

21、可以通過操作數組長度?length?來截斷一個數組

與前面那個使用?length?清空數組的示例類似，我們可以使用?length?來截斷一個數組。

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

除此之外，如果我們使用一個更大的值去重寫?length?，那么數組的長度將會改變，同時會用?undefined?填充新增的數組元素。

myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined

22、在條件中使用?&&?及?||?進行短語判斷

var foo = 10; foo == 10 && doSomething(); // is the same thing asif (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing asif (foo != 5) doSomething();

||?還用于給函數參數設置默認值，比如

functiondoSomething(arg1){ arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set }

23、使用?map()?對數組進行遍歷操作

var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares will be equal to [1, 4, 9, 16]

24、保留指定位數的小數點

var num = 2.443242342; num = num.toFixed(4); // num will be equal to 2.4432

注意，?toFixed()?方法返回的是字符串而不是一個數字。

25、浮點數計算問題

0.1 + 0.2 === 0.3// is false 9007199254740992 + 1// is equal to 9007199254740992 9007199254740992 + 2// is equal to 9007199254740994

為什么呢？因為0.1+0.2等于0.30000000000000004。JavaScript的數字都遵循IEEE 754標準構建，在內部都是64位浮點小數表示，具體可以參閱?這篇文章?。

另外，你也可以使用?toFixed()?或者?toPrecision()?來解決這個問題。

譯者注

關于這個問題，博主也有一篇相關的文章，?Javascript中浮點數的計算精度問題?。

26、使用?for...in?來遍歷對象的屬性

下面的代碼片段使用?for...in?來遍歷對象屬性，可以防止遍歷到對象原型鏈上的屬性。

for (var name inobject) { if (object.hasOwnProperty(name)) { // do something with name } }

27、逗號運算符

var a = 0; var b = ( a++, 99 ); console.log(a); // a will be equal to 1 console.log(b); // b is equal to 99

28、緩存臨時變量用于避免再次計算或者查詢

在使用jquery時，我們可以臨時緩存整個jq對象，比如

var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');

29、提前檢查傳入?isFinite()?的參數

isFinite(0/0) ; //false isFinite("foo"); //false isFinite("10"); //true isFinite(10); //true isFinite(undefined); //false isFinite(); //false isFinite(null); //true 注意這里！！！

30、避免對數組進行負值索引

var numbersArray = [1,2,3,4,5]; varfrom = numbersArray.indexOf("foo") ; // from is equal to -1 numbersArray.splice(from,2); // will return [5]

注意傳給?splice?的索引參數不要是負數，當是負數時，會從數組結尾處刪除元素。

31、使用?JSON?來進行序列化和反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */var personFromString = JSON.parse(stringFromPerson); /* personFromString is equal to person object */

32、避免使用?eval()?和函數構造器

eval()?和函數構造器（?Function?consturctor）的開銷都比較大，每次調用JavaScript引擎都要將源代碼轉換為可執行的代碼。

var func1 = new Function(functionCode); var func2 = eval(functionCode);

33、避免使用?with()

使用?with()?語法會將變量注入到全局變量中。因此，如果有重名的變量，就會發生覆蓋或者重寫的問題。

34、避免使用?for...in?遍歷數組

錯誤的用法，

var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; }

更好的做法，

var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; }

除此之外，?i?和?len?是在?for?循環的第一個聲明中，二者只會初始化一次，這要比下面這種寫法快：

for (var i = 0; i < arrayNumbers.length; i++)

為什么呢？因為數組?arrayNumbers?的長度在每次遍歷的時候都會計算一次，這就造成了不必要的消耗。

注意，這個問題其實在最新的Javascript引擎中已經被修復了。

35、給?setTimeout()?及?setInterval()?傳遞函數而不是字符串更好

如果你給?setTimeout()?或者?setInterval()?傳遞字符串的話，那么它內部的執行機制其實是和?eval()?是一樣的，這樣會比較慢。

錯誤的用法，

setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);

正確的用法，

setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);

36、使用?switch/case?來代替一坨?if/else

當判斷有超過兩個分支的時候使用?switch/case?要更快一些，而且也更優雅，更利于代碼的組織，當然，如果有超過10個分支，就不要使用?switch/case?了。

37、在?switch/case?中使用數字范圍進行分界

其實?switch/case?中的?case?條件，還可以這樣寫：

functiongetCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); // will return "Baby"

38、為創建的對象指定原型

下面的示例演示了可以給定對象作為參數，來創建以此為原型的新對象：

functionclone(object) { functionOneShotConstructor(){}; OneShotConstructor.prototype = object; returnnew OneShotConstructor(); } clone(Array).prototype ; // []

39、html轉義函數

functionescapeHTML(text) { var replacements= {'<': '<', '>': '>', '&': '&', '"': '"'}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }

40、不要在循環中使用?try...catch...finally

try...catch...finally?在捕獲一個異常時，會創建一個運行時環境的子作用域。而異常變量的生命周期僅限在這個運行時的子作用域。

譯者注

這里我們可以使用閉包來保存這個運行時的異常變量。

錯誤的用法

varobject = ['foo', 'bar'], i; for (i = 0, len = object.length; i <len; i++) { try { // do something that throws an exception } catch (e) { // handle exception } }

正確的用法

varobject = ['foo', 'bar'], i; try { for (i = 0, len = object.length; i <len; i++) { // do something that throws an exception } } catch (e) { // handle exception }

41、使用?XMLHttpRequests?時注意設置超時參數

如果一個ajax請求長時間沒有響應，我們應該中止請求。否則瀏覽器將會一直等待。我們可以使用?setTimeout()?來做一個定時器，

var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () { if (this.readyState == 4) { clearTimeout(timeout); // do something with response data } } var timeout = setTimeout( function () { xhr.abort(); // call error callback }, 60*1000/* timeout after a minute */ ); xhr.open('GET', url, true); xhr.send();

除此之外，我們應該避免同時發送多個?同步的?ajax請求。

42、處理websocket超時

一般地，WebSocket連接創建后，如果30秒內沒有任何活動服務器端會對連接進行超時處理，防火墻也可以對單位周期內沒有活動的連接進行超時處理。

為了防止超時中斷，你需要每隔一段時間發送一個心跳數據（空字符串）以保持websocket連接。下面的兩個方法一個用于周期的發送心跳數據保持連接，一個是取消心跳數據包。

var timerID = 0;functionkeepAlive() {var timeout = 15000;if (webSocket.readyState == webSocket.OPEN) {webSocket.send('');}timerId = setTimeout(keepAlive, timeout); }functioncancelKeepAlive() {if (timerId) {cancelTimeout(timerId);} }

keepAlive()?方法應該被添加在?webSOcket?連接的?onOpen()?方法的最后，而cancelKeepAlive()?添加在?onClose()?方法的最后。

43、記住：原生操作肯定比函數調用要效率高

比如，

錯誤的用法，

var min = Math.min(a,b); A.push(v);

正確的用法，

var min = a < b ? a:b; A[A.length] = v;

44、編碼時注意保持代碼的優雅格式，上生產環境前做一些壓縮工作。

45、與其他JavaScript類庫沖突的解決方案

?$(document).ready(function()?{

???var?$jq?=?jQuery.noConflict();

???$jq('#id').show();

});?

轉載于:https://my.oschina.net/u/2391658/blog/693263

總結

以上是生活随笔為你收集整理的45个实用的JavaScript黑科技的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。