Javascript的弱類型以及函數(shù)作用域等規(guī)則使用編寫Javascript代碼極為容易，但是編寫可維護、高質(zhì)量的代碼卻變得十分困難，這個系列的文章將總結(jié)在項目開發(fā)過程中，能夠改善代碼可讀性、可維護性及優(yōu)化運行性能的一系列技巧。
如有問題，請不吝指出，非常感謝；如果喜歡，右下角點個推薦吧~
1.全局變量污染與變量提升
var key = 'value'; // 所有函數(shù)外執(zhí)行
window.key = 'value'; // window為全局對象
key = 'value'; // 省去 var，隱式的全局變量
- 全局對象是所有域中都可見的變量，如果程序比較小，那么定義全局變量可以避免函數(shù)調(diào)用時參數(shù)的傳遞，但是對于一個大的項目，全局變量定義不善，極為容易造成全局變量被某個程序改掉，而沒有被發(fā)現(xiàn)，這也使調(diào)試時難以發(fā)現(xiàn)問題所在。
- 在項目較大時，建議盡可能地避免使用全局變量，那么兼顧靈活性與可讀性的解決方法就是在程序中只創(chuàng)建一個全局變量。
/**
* 只有Person一個全局變量，
* 其余變量定義在Person下，盡可能地避免與其他變量名沖突
*/
var Person = { name:"A", age:20 };
Person.parents = {
father:"A",
mother:"C"
}
Person.getAge = function() { /* ... */ }
- 與C、Python等語言擁有塊級作用域不同，Javascript作用域是以函數(shù)為單位的，定義在函數(shù)中的變量函數(shù)外部不可見，但是在函數(shù)內(nèi)部（包括其子函數(shù)）處處可見。
/**
* 考慮下面的函數(shù)，先運行f1()，再var b = 4,
* 但是事實上，f1()中的b就是之后定義的b
* 這是變量提升特性造成的，就是說所有變量定義都將提到函數(shù)最前面
* 局部變量的優(yōu)先級高于外部變量，因此f()外部的b至始至終沒有變過
*/
var b = 15;
var f = function() {
var a = 100;
var f1 = function(){
var c = 3;
b = a + c; // => b=103 變量提升，這里的b是函數(shù)f()內(nèi)部的b
};
f1();
var b = 4;
console.log(a , b , c); // => a=100,b=4,c=undefined
}
f();
console.log(b); // => b=15，b并沒有發(fā)生改變
2.數(shù)據(jù)類型
- 浮點數(shù)是不精確的，在項目中，特別是在線支付環(huán)節(jié)，如果希望計算的結(jié)果是準確的，一般先乘100轉(zhuǎn)換為整數(shù)后，計算完后再除以100，這樣能夠得到預想中的結(jié)果。
0.1 + 0.2 === 0.3 // => false
- 檢測數(shù)據(jù)類型，我們先看面試中常出現(xiàn)的判斷題
typeof null === 'null' // => false
typeof null === 'object' // => true
typeof NaN === 'NaN' // => false
typeof NaN === 'number' // => true
// javascript6個基本類型如下，typeof總是返回這6個值
// number、string、boolean、object、function、undefined
// chrome 50中，typeof 3/0 結(jié)果為 NaN，有博友知道為什么求告知
- typeof null 返回的是'object'，項目開發(fā)中，我們并不希望null被判斷為'object'，自定義一個函數(shù)，可以滿足需求。
function type(ob){
return (ob === null ) ? "null" : (typeof ob);
}
- 上面的方法不能識別數(shù)組、日期等對象，如果需要判斷日期、數(shù)組、正則、錯誤等類型，那么可以考慮使用
toString()方法。
// 更多內(nèi)置類型，例如 Math 等可以根據(jù)需要添加
function type(ob){
var _toString = Object.prototype.toString;
var _type = {
"undefined" : "undefined",
"number" : "number",
"boolean" : "boolean",
"string" : "string",
"[object Function]" : "function",
"[object RegExp]" : "regexp",
"[object Array]" : "array",
"[object Date]" : "date",
"[object Error]" : "error"
}
return _type[typeof ob] || _type[_toString.call(ob)] || (ob ? "object" : "null");
}
- 自定義類型，可結(jié)合typeof、constructor屬性和instanceof實現(xiàn)
3.特殊值（NaN、undefined、null）
typeof NaN === 'number' // => true 類型為number，表示非數(shù)字
'0.1223' // => 0.1223
'1e6' // => 1000000
'1a3' // => NaN
1.2 + NaN // => NaN
- Javascript提供了isNaN函數(shù)檢測NaN值
// 不能轉(zhuǎn)換為數(shù)字的值，均返回true，
// 因此并不能用這個函數(shù)檢測一個值是否真的為 NaN
isNaN(NaN) // => true
isNaN('abc') // => true
isNaN(0) // => false
isNaN('1e6') // => false
isNaN(3/0) // => fasle
// NaN是一個唯一自己與自己不相等的值
NaN === NaN // false
NaN !== NaN // true
// 方法一
function _isNaN(value){
return value !== value;
}
// 方法二
function _isNaN(value) {
return typeof value === 'number' && isNaN(value);
}
- 使用isFinite檢查是否可以是個數(shù)或可被轉(zhuǎn)換為一個數(shù)
isNaN(3/0) // => fasle，雖然3/0 不能代表一個數(shù)，但是isNaN不能識別
isFinite(3/0) // => false，isFinite能檢測 NaN和正負無窮大
isFinite("234") // => true，isFinite 可以將參數(shù)轉(zhuǎn)換為數(shù)字
isFinite(true) // => true，可轉(zhuǎn)化為數(shù)字的字符串和布爾值返回true
- 判斷參數(shù)是否真的是一個數(shù)字，而不是可轉(zhuǎn)換為數(shù)字的字符串等
// 加一個基本類型判斷就OK
function isNumber (value) {
return typeof value === "number" && isFinite(value);
}
var a = 4 ;
if({})a++; // => a=5 空對象可通過 Object.keys().length判斷
if([])a++; // => a=6 空數(shù)組通過 length 判斷
4. === 與 ==
- 使用 == 比較前如果不是相同類型的值，將進行類型轉(zhuǎn)換，轉(zhuǎn)換規(guī)則請看下面的例子。
'' == 0 // => true，String與Number，將String轉(zhuǎn)為 Number
0 == '0' // => true，同上
'' == '0'// => false，2個都是字符串，因此直接比較
fasle == '0' // => true，Boolean與其他，將Boolean轉(zhuǎn)為Number
true == '3' // => false，同上
false == undefined // => false，同上，0與undefined不等
false == 'false' // => false，同上
null == undefined // => true，null與undefined比較返回true
- === ，如果類型不同，則直接返回false，類型相同再進行比較。
- == 與 != 將進行隱式的類型轉(zhuǎn)換，轉(zhuǎn)換規(guī)則復雜，因此在實際的項目開發(fā)中，建議避免使用 == 與 !=，盡量使用 === 與 !==。
5.沒有真正的數(shù)組
- 在Javascript中，數(shù)組也是對象，因此typeof的結(jié)果是object，如果需要判斷一個對象是不是數(shù)組，那么可以使用第2部分的toString()方法，當然還可以利用構(gòu)造函數(shù)判斷。
typeof value === 'object' && value.constructor === Array
- 需要注意的是，函數(shù)參數(shù)arguments并不是數(shù)組，只是一個具有l(wèi)ength屬性，以數(shù)字作為鍵的對象，因此arguments不能使用數(shù)組的方法，但是利用上述方法仍將arguments判斷為數(shù)組。
- 有時我們需要對arguments對象執(zhí)行數(shù)組的某些方法，這個時候可以利用下面的方法將arguments轉(zhuǎn)換為真數(shù)組
/* 將arguments對象轉(zhuǎn)換為數(shù)組 */
var args = Array.prototype.slice.call(arguments);
/* 具有l(wèi)ength屬性，鍵為數(shù)字且從0開始的對象 */
a = {0:"c",1:"d",length:2 }
Array.prototype.slice.call(a); // => ["c","d"]
/* 沒有l(wèi)ength屬性 */
a = {0:"c",1:"d"}
Array.prototype.slice.call(a); // => [ ] 空數(shù)組
/* 猜測slice方法實現(xiàn)方式 */：
function slice(ob){
var arr = new Array();
for(var i = 0; i < ob.length; i++ ){
arr[i] == ob[i];
}
return arr;
}
6.避免使用with與eval
var ob = { a: 1, b: 2};
var d = 0;
with(ob){
a = 3; // ob.a = 3
c = 4; // ob.c = undefined，window.c = 4，無心聲明了全局變量
d = 5; // ob.d = undefined, d為with外申明的變量
}
7.消除switch歧義
- switch中的case語句，定義了函數(shù)的起點，卻沒有定義函數(shù)的終點，不要忘記case語句后使用break
- 有時候，我們確實需要貫穿case語句，比如多種case情況，執(zhí)行同一個方法，這時候，建議顯式聲明，消除歧義
// 在需要貫穿的case語句后添加 /* empty */
// 避免檢查代碼時被認為忘記寫了執(zhí)行語句
// 顯示申明，語意也更明確，提高可讀性
switch(a){
case 1: /* empty */
case 2:
func1();
break;
case 3:
func2();
break;
}
8.不要省略塊標志 { }
- if、while、do、for等語句接受{ ... } 代碼塊，但是有時我們在代碼塊中只有一行代碼，為了使代碼看起來簡潔，很可能省略 { }，但是這可能產(chǎn)生問題。
if(a)
if(b)
func1();
else
func2();
// => 等價于
if(a)
if(b)
func1();
else
func2();
// 這并不是想要的結(jié)果，js不是python，還是加上大括號比較好
- 加上括號，也增強了代碼的可讀性，下面這種寫法是不是一目了然了呢
// 很清晰地看出 if(a) 和 else 并列
// if(b) 是 if(a) 的子語句
if(a){
if(b){
func1();
}
}else{
func2();
