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最常見的錯誤就是像上面這樣給對象加很多屬性,其實用數組就可以很好的實現同樣的功能?？纯聪旅娴拇a。

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"表示使用我們通常使用的十進制數值系統?？偸侵付ㄔ搮悼梢韵喿x該代碼時的困惑并且保證轉換結果可預測。當忽略該參數時，不同的實現環境可能產生不同的結果。

看看如下代碼：

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红色警戒的全部內容，希望文章能夠幫你解決所遇到的問題。

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