JS紅色警戒

JS有很多讓人迷惑的地方，一起來看看吧。

with

with可以擴展作用域鏈，建議永遠不要使用它。我們來看看這些列子。

案例1

正常用法

function People(name){this.name = name;this.eat = function(){console.log(this.name+"要吃飯");} } var me = new People("xiaohu");with(me){console.log(name);//可以省略me.eat();//可以省略me. }

看起來很方便的樣子。

with讓閱讀代碼的人很瘋狂

看看下面的代碼

with(me){console.log(name);eat();play=function(){//如果是省略了me.,那么play應該定義在對象me中console.log(this.name);}nickName="xiao" + name;//如果是省略了me.,那么nickName應該定義在對象me中 }

我們運行一下就知道，兩個變量變成了全局變量。

案例2

正常用法

function People(name){this.name = name;this.property={wallet:{banknote:1000,coin:20,salary:9}};this.eat = function(){console.log(this.name+"要吃飯");} } var me = new People("xiaohu"); var salary=2000; with(me.property.wallet){//好像很方便啊banknote+=salary;//等等，salary到底是me.property.wallet還是哪兒的啊？console.log(banknote); }

with讓閱讀代碼的人很瘋狂

我們還是用其他方法吧。

var salary=2000; var wallet = me.property.wallet; wallet.banknote+=salary; console.log(wallet.banknote);

像這樣緩存起來就很好var wallet = me.property.wallet;

eval

eval容易出錯

JS的eval可能會使代碼不清晰，影響調試和性能，應該避免使用。看看下面這段代碼。

function Workers(){this.assignment=function assignment(who, number){eval("this.work" + who + "='finish task:"+number+"'");} } var workers = new Workers(); for (var i = 0; i < 5; i++) {workers.assignment(i,i); }

這段代碼給工人分配工作，在對象workers創建很多的屬性，eval實際上想執行這樣的語句workers.work1='finin task:1'。在參數一切正常的情況下是可以很好的工作的，但是這個函數是很容易出錯的。
像下面這樣傳入空格，“'”等字符串的結束標記，都會讓eval嘗試運行的語句是不合法的，非常容易出錯，也不容易調試。

workers.assignment("1 1","'");

eval最常見的錯誤就是像上面這樣給對象加很多屬性,其實用數組就可以很好的實現同樣的功能。看看下面的代碼。

function WorkersBetter(){this.workers=[];this.assignment=function assignment(name, task){//TODO: 檢查數組越界......var obj ={name:name,task:task};this.workers.push(obj);} } var workersBetter = new WorkersBetter();for (var i = 0; i < 3; i++) {workersBetter.assignment(i,"task"+i); }

用eval容易被注入代碼

看看這段代碼，你只想賦值，彈出了對話框

workers.assignment("1","';alert('xiaohu');'");

在看看用eval解析json字符串的用法。同樣這樣也會讓人注入代碼，而且性能不好。

var jsonString='{"task":"write better javascript!"}'; var json = eval('('+jsonString+')'); console.log(json);

正確的做法應該用專門解析json的函數或者第三方庫

console.log(JSON.parse(jsonString));

括號

條件判斷應該加括號，并且成對出現，但是就是有人喜歡節省點，這樣真實坑死隊友啊。看看下面這樣的代碼

var isGoodCoder=false; var salary=0,vacation=0; if(isGoodCoder)salary=10000;vacation=30;

上面的vacation=30;已經不在if的控制范圍里面了，好一些的寫法應該這樣

if(isGoodCoder){salary=10000;vacation=30; }else{salary=1000;vacation=5; }

數字問題

精度問題

程序并不能精確的保存和運算浮點數（小數）。我們看看JS如何處理這種情況。

0.1 + 0.2 =>0.30000000000000004

可以看到多出了0.00000000000000004，如果我們要用==或者和別的數字做運輸，就會有問題。使用toFixed保存精度。

(0.1 + 0.2).toFixed(1); =>"0.3"

雖然toFixed處理了精度問題，但是卻返回了字符串，還要用parseFloat處理一下

parseFloat((0.1 + 0.2).toFixed(1));

parseFloat,parseInt可以從字符串中解析出數字。不過只能解析出以數字開頭的字符串。
看一下下面的代碼。

parseFloat("2.333是xiaohu的零用錢");//=>2.333 parseFloat("xiaohu的零用錢為2.333");//=>NaN

進制轉換

parseInt(string, radix);

radix
一個2到36之間的整數值，用于指定轉換中采用的基數。比如參數"10"表示使用我們通常使用的十進制數值系統。總是指定該參數可以消除閱讀該代碼時的困惑并且保證轉換結果可預測。當忽略該參數時，不同的實現環境可能產生不同的結果。

看看如下代碼：

parseInt(021);//=>17，八進制2*8^1+1*8^0=17 parseInt(021,10);//=>17，貌似第一個參數指定了進制，第二個參數沒啥用處？ parseInt("021");//老得js標志和新的標準不一樣，新的標準會返回21 parseInt("021",10);//=>21，這種方式才是最安全。

parseInt("021",10);是最好的。

判斷是否是數字

typeof data === "number"可以判斷一個變量是否是number類型。好像情況已經很簡單了。但是JS有一個NaN，表示不是一個數字。但是typeof NaN === "number"確返回true。所以我們最好使用下面這個代碼判斷是否是數字

function isNumber(data){return ( typeof data === "number" && !isNaN(data) ); }

轉載于:https://www.cnblogs.com/xiaohu1986/p/5207064.html

總結

以上是生活随笔為你收集整理的JS红色警戒的全部內容，希望文章能夠幫你解決所遇到的問題。

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