文章詳情頁

JavaScript 開發的45個技巧

瀏覽：148日期：2023-11-19 10:19:46

JavaScript是一個絕冠全球的編程語言，可用于Web開發、移動應用開發（PhoneGap、Appcelerator）、服務器端開發（Node.js和Wakanda）等等。JavaScript還是很多新手踏入編程世界的第一個語言。既可以用來顯示瀏覽器中的簡單提示框，也可以通過nodebot或nodruino來控制機器人。能夠編寫結構清晰、性能高效的JavaScript代碼的開發人員，現如今已成了招聘市場最受追捧的人。

在這篇文章里，我將分享一些JavaScript的技巧、秘訣和最佳實踐，除了少數幾個外，不管是瀏覽器的JavaScript引擎，還是服務器端JavaScript解釋器，均適用。

本文中的示例代碼，通過了在Google Chrome 30最新版（V8 3.20.17.15）上的測試。

1、首次為變量賦值時務必使用var關鍵字

變量沒有聲明而直接賦值得話，默認會作為一個新的全局變量，要盡量避免使用全局變量。

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 false3、underfined、null、0、false、NaN、空字符串的邏輯結果均為false4、行尾使用分號

實踐中最好還是使用分號，忘了寫也沒事，大部分情況下JavaScript解釋器都會自動添加。對于為何要使用分號，可參考文章JavaScript中關于分號的真相。

5、使用對象構造器

function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName;}var Saad = new Person('Saad', 'Mousliki');6、小心使用typeof、instanceof和contructortypeof：JavaScript一元操作符，用于以字符串的形式返回變量的原始類型，注意，typeof null也會返回object，大多數的對象類型（數組Array、時間Date等）也會返回objectcontructor：內部原型屬性，可以通過代碼重寫instanceof：JavaScript操作符，會在原型鏈中的構造器中搜索，找到則返回true，否則返回false

var arr = ['a', 'b', 'c'];typeof arr; // 返回 'object' arr instanceof Array // truearr.constructor(); //[]7、使用自調用函數

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

(function(){ // 置于此處的代碼將自動執行})(); (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、生成隨機的字母數字字符串

function generateRandomAlphaNum(len) { var rdmString = ''; for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); return rdmString.substr(0, len);}12、打亂數字數組的順序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];numbers = numbers.sort(function(){ return Math.random() - 0.5});/* numbers 數組將類似于 [120, 5, 228, -215, 400, 458, -85411, 122205] */

這里使用了JavaScript內置的數組排序函數，更好的辦法是用專門的代碼來實現（如Fisher-Yates算法），可以參見StackOverFlow上的這個討論。

13、字符串去空格

Java、C#和PHP等語言都實現了專門的字符串去空格函數，但JavaScript中是沒有的，可以通過下面的代碼來為String對象函數一個trim函數：

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, '');};

新的JavaScript引擎已經有了trim()的原生實現。

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、對象轉換為數組

var argArray = Array.prototype.slice.call(arguments);16、驗證是否是數字

function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n);}17、驗證是否是數組

function isArray(obj){ return Object.prototype.toString.call(obj) === ’[object Array]’ ;}

但如果toString()方法被重寫過得話，就行不通了。也可以使用下面的方法：

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

如果在瀏覽器中沒有使用frame，還可以用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 的結果將不正常// 構造器是不能跨 frame 共享的arr instanceof Array; // false18、獲取數組中的最大值和最小值

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或remove元素

如果對數組元素直接使用delete，其實并沒有刪除，只是將元素置為了undefined。數組元素刪除應使用splice。

切忌：

var items = [12, 548 ,’a’ , 2 , 5478 , ’foo’ , 8852, , ’Doe’ ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items 結果為 [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; // return 11 items.splice(3,1) ; items.length; // return 10 /* items 結果為 [12, 548, 'a', 5478, 'foo', 8852, undefined × 1, 'Doe', 2154, 119]

刪除對象的屬性時可以使用delete。

21、使用length屬性截斷數組

前面的例子中用length屬性清空數組，同樣還可用它來截斷數組：

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

與此同時，如果把length屬性變大，數組的長度值變會增加，會使用undefined來作為新的元素填充。length是一個可寫的屬性。

myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined22、在條件中使用邏輯與或

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

邏輯或還可用來設置默認值，比如函數參數的默認值。

function doSomething(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

注意，toFixec()返回的是字符串，不是數字。

25、浮點計算的問題

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

為什么呢？因為0.1+0.2等于0.30000000000000004。JavaScript的數字都遵循IEEE 754標準構建，在內部都是64位浮點小數表示，具體可以參見JavaScript中的數字是如何編碼的.

可以通過使用toFixed()和toPrecision()來解決這個問題。

26、通過for-in循環檢查對象的屬性

下面這樣的用法，可以防止迭代的時候進入到對象的原型屬性中。

for (var name in object) { 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 9928、臨時存儲用于計算和查詢的變量

在jQuery選擇器中，可以臨時存儲整個DOM元素。

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) ; // falseisFinite('foo'); // falseisFinite('10'); // trueisFinite(10); // trueisFinite(undefined); // falseisFinite(); // falseisFinite(null); // true，這點當特別注意30、避免在數組中使用負數做索引

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

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

31、用JSON來序列化與反序列化

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

var func1 = new Function(functionCode);var func2 = eval(functionCode);32、不要使用eval()或者函數構造器

eval()和函數構造器（Functionconsturctor）的開銷較大，每次調用，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++)35、傳給setInterval()和setTimeout()時使用函數而不是字符串

如果傳給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條件，還可以這樣寫：

function getCategory(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); // 將返回 'Baby'38、使用對象作為對象的原型

下面這樣，便可以給定對象作為參數，來創建以此為原型的新對象：

function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype = object; return new OneShotConstructor(); } clone(Array).prototype ; // []39、HTML字段轉換函數

try-catch-finally中catch部分在執行時會將異常賦給一個變量，這個變量會被構建成一個運行時作用域內的新的變量。

切忌：

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

而應該：

XMLHttpRequests在執行時，當長時間沒有響應（如出現網絡問題等）時，應該中止掉連接，可以通過setTimeout()來完成這個工作：

同時需要注意的是，不要同時發起多個XMLHttpRequests請求。

42、處理WebSocket的超時

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

為了防止這種情況的發生，可以每隔一定時間，往服務器發送一條空的消息。可以通過下面這兩個函數來實現這個需求，一個用于使連接保持活動狀態，另一個專門用于結束這個狀態。

keepAlive()函數可以放在WebSocket連接的onOpen()方法的最后面，cancelKeepAlive()放在onClose()方法的最末尾。

43、時間注意原始操作符比函數調用快，使用VanillaJS

比如，一般不要這樣：

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

可以這樣來代替：

var min = a < b ? a : b; A[A.length] = v;44、開發時注意代碼結構，上線前檢查并壓縮JavaScript代碼

別忘了在寫代碼時使用一個代碼美化工具。使用JSLint(一個語法檢查工具)并且在上線前壓縮代碼（比如使用JSMin）。注：現在代碼壓縮一般推薦 UglifyJS (https://github.com/mishoo/UglifyJS2)

45、JavaScript博大精深，這里有些不錯的學習資源Code Academy資源：http://www.codecademy.com/tracks/javascriptMarjin Haverbekex編寫的Eloquent JavaScript：http://eloquentjavascript.net/John Resig編寫的Advanced JavaScript：http://ejohn.org/apps/learn/

JavaScript

上一條：JavaScript 判斷該對象是否為數組下一條：哪些JavaScript IDE最好用？

相關文章：

1. Python 制作查詢商品歷史價格的小工具2. Python 合并拼接字符串的方法3. Python sublime安裝及配置過程詳解4. Python插件機制實現詳解5. Python3 json模塊之編碼解碼方法講解6. ASP基礎知識VBScript基本元素講解7. Linux刪除系統自帶版本Python過程詳解8. ASP.NET MVC使用jQuery ui的progressbar實現進度條9. python 使用事件對象asyncio.Event來同步協程的操作10. Python 利用Entrez庫篩選下載PubMed文獻摘要的示例

排行榜

					
					Android 簡單的實現滑塊拼圖驗證碼功能
Java源碼解析之SortedMap和NavigableMap
ASP.NET MVC使用jQuery ui的progressbar實現進度條
Django 模板中常用的過濾器實現
Android打包篇:Android Studio將代碼打包成jar包教程
springboot配置Jackson返回統一默認值的實現示例
淺談django不使用restframework自定義接口與使用的區別
樹型結構列出指定目錄里所有文件的PHP類
Linux刪除系統自帶版本Python過程詳解
ASP基礎知識VBScript基本元素講解
Python字符串到字節的轉換。雙反斜杠問題
				