JavaScript紅色警戒

JS紅色警戒

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

with

with可以擴(kuò)展作用域鏈,建議永遠(yuǎn)不要使用它。我們來看看這些列子。

案例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應(yīng)該定義在對象me中
        console.log(this.name);
    }
    nickName="xiao" + name;//如果是省略了me.,那么nickName應(yīng)該定義在對象me中
}

我們運(yùn)行一下就知道,兩個變量變成了全局變量。

案例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可能會使代碼不清晰,影響調(diào)試和性能,應(yīng)該避免使用??纯聪旅孢@段代碼。

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創(chuàng)建很多的屬性,eval實(shí)際上想執(zhí)行這樣的語句workers.work1='finin task:1'。在參數(shù)一切正常的情況下是可以很好的工作的,但是這個函數(shù)是很容易出錯的。
像下面這樣傳入空格,“'”等字符串的結(jié)束標(biāo)記,都會讓eval嘗試運(yùn)行的語句是不合法的,非常容易出錯,也不容易調(diào)試。

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

eval最常見的錯誤就是像上面這樣給對象加很多屬性,其實(shí)用數(shù)組就可以很好的實(shí)現(xiàn)同樣的功能??纯聪旅娴拇a。

function WorkersBetter(){
    this.workers=[];
    this.assignment=function assignment(name, task){
        //TODO: 檢查數(shù)組越界......
        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);

正確的做法應(yīng)該用專門解析json的函數(shù)或者第三方庫

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

括號

條件判斷應(yīng)該加括號,并且成對出現(xiàn),但是就是有人喜歡節(jié)省點(diǎn),這樣真實(shí)坑死隊(duì)友啊??纯聪旅孢@樣的代碼

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

上面的vacation=30;已經(jīng)不在if的控制范圍里面了,好一些的寫法應(yīng)該這樣

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

數(shù)字問題

精度問題

程序并不能精確的保存和運(yùn)算浮點(diǎn)數(shù)(小數(shù))。我們看看JS如何處理這種情況。

0.1 + 0.2
=>0.30000000000000004

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

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

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

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

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

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

進(jìn)制轉(zhuǎn)換

parseInt(string, radix);

radix
一個2到36之間的整數(shù)值,用于指定轉(zhuǎn)換中采用的基數(shù)。比如參數(shù)"10"表示使用我們通常使用的十進(jìn)制數(shù)值系統(tǒng)??偸侵付ㄔ搮?shù)可以消除閱讀該代碼時的困惑并且保證轉(zhuǎn)換結(jié)果可預(yù)測。當(dāng)忽略該參數(shù)時,不同的實(shí)現(xiàn)環(huán)境可能產(chǎn)生不同的結(jié)果。

看看如下代碼:

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

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

判斷是否是數(shù)字

typeof data === "number"可以判斷一個變量是否是number類型。好像情況已經(jīng)很簡單了。但是JS有一個NaN,表示不是一個數(shù)字。但是typeof NaN === "number"卻返回true。所以我們最好使用下面這個代碼判斷是否是數(shù)字,來處理這個特殊情況。

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

強(qiáng)制轉(zhuǎn)換

var hasAge = !!age;  

這為啥要寫2個‘!’ ?
實(shí)際上!!age === Boolean(age),所以!!相當(dāng)于強(qiáng)制轉(zhuǎn)換成Boolean類型了。
另外這樣也可以強(qiáng)制轉(zhuǎn)換

var a = '12';
//+a就是數(shù)字12.

想了解強(qiáng)制轉(zhuǎn)換的更多細(xì)節(jié)可以查看Javascript 強(qiáng)制類型轉(zhuǎn)換函數(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容