首頁 > web前端 > js教程 > 主體

JavaScript隱式型別轉換_javascript技巧

WBOY
發布: 2016-05-16 15:10:40
原創
1198 人瀏覽過

JavaScript的資料型別是非常弱的(不然不會叫它做弱型別語言了)!在使用算術運算子時,運算子兩邊的資料類型可以是任意的,例如,一個字串可以和數字相加。之所以不同的資料型別之間可以做運算,是因為JavaScript引擎在運算之前會悄悄的把他們進行了隱式類型轉換的,如下是數值類型和布林類型的相加:

複製程式碼 程式碼如下:

3 + true; // 4

結果是一個數值型!如果是在C或Java環境的話,上面的運算一定會因為運算子兩邊的資料型別不一致而導致報錯的!但是,在JavaScript中,只有少數情況下,錯誤類型才會導致出錯,例如呼叫非函數,或讀取null或undefined的屬性時,如下:

複製程式碼 程式碼如下:

"hello"(1); // error: not a function
null.x; // error: cannot read property 'x' of null

多數情況下,JavaScript都不會出錯的,而是自動的進行對應的型別轉換。例如-, *, /,和%等算術運算子都會把操作數轉換成數字的,但是「+」號就有點不一樣了,有些情況下,它是算術加號,有些情況下,是字串連接符號,具體的要看它的操作數,如下:

複製程式碼 程式碼如下:

2 + 3; // 5
"hello" + " world"; // "hello world"

但是,如果字串和數字相加,會是怎樣的結果呢? JavaScript會自動把數字轉換成字元的,不管數字在前或字串在前,如下:

複製程式碼 程式碼如下:

"2" + 3; // "23"
2 + "3"; // "23"

字串和數字相加結果是字串,字串和數字相加結果是字串,字串和數字相加結果是字串,重要的事情說三遍! ! ! ! ! !

此外,需要注意的是,「+」的運算方向是從左到右的,如下:

複製程式碼 程式碼如下:

1 + 2 + "3"; // "33"

這與下面是等價的:

複製程式碼 程式碼如下:

(1 + 2) + "3"; // "33"

相較之下,以下的結果是不一樣的:

複製程式碼 程式碼如下:

1 + "2" + 3; // "123"

但是,隱式型別轉換,有時候,會隱藏一些錯誤的,例如,null會轉換成0,undefined會轉換成NaN。需要注意的是,NaN和NaN是不相等的(這是由於浮點數的精度決定的),如下:

複製程式碼 程式碼如下:

var x = NaN;
x === NaN; // false

雖然,JavaScript提供了isNaN來偵測某個值是否為NaN,但是,這也不太精確的,因為,在呼叫isNaN函數之前,本身就存在了一個隱式轉換的過程,它會把那些原本不是NaN的值轉換成NaN的,如下:

複製程式碼 程式碼如下:

isNaN("foo"); // true
isNaN(undefined); // true
isNaN({}); // true
isNaN({ valueOf: "foo" }); // true

上面程式碼,我們使用isNaN來測試後,發現字串,undefined,甚至對象,結果都回傳真! ! !但是,我們總不能說他們也是NaN吧?總而言之,得出的結論是:isNaN檢測NaN並不可靠! ! !

幸運的是,有一種可靠的並且準確的方法可以檢測NaN。我們都知道,只有NaN是自己不等自己的,那麼,我們就以使用不等於號(!==)來判斷一個數是否等於自身,從而,可以檢測到NaN了,如下:

var a = NaN;
a !== a; // true
var b = "foo";
b !== b; // false
var c = undefined;
c !== c; // false
var d = {};
d !== d; // false
var e = { valueOf: "foo" };
e !== e; // false
登入後複製

我們也可以把這個模式定義成一個函數,如下:

function isReallyNaN(x) {
return x !== x;
}
登入後複製

OK,NaN的偵測方法就是這麼簡單,我們下面繼續討論物件的隱式轉換!

物件是可以轉換成原始值的,最常見的方法就是把它轉換成字串,如下:

"the Math object: " + Math; // "the Math object: [object Math]"
"the JSON object: " + JSON; // "the JSON object: [object JSON]"
登入後複製

物件轉換成字串是呼叫了他的toSting函數的,你可以手動的呼叫它來偵測一下:

Math.toString(); // "[object Math]"
JSON.toString(); // "[object JSON]"
登入後複製

類似的,物件也是可以轉換成數字的,他是透過valueOf函數的,當然,你也是可以自訂這個valueOf函數的,如下:

"J" + { toString: function() { return "S"; } }; // "JS"
2 * { valueOf: function() { return 3; } }; // 6
登入後複製

如果,一個物件同時存在valueOf方法和toString方法,那麼,valueOf方法總是會被優先呼叫的,如下:

var obj = {
toString: function() {
return "[object MyObject]";
},
valueOf: function() {
return 17;
}
};
"object: " + obj; // "object: 17"
登入後複製

但是,多數情況下,這都不是我們想要的,一般的,盡可能使valueOf和toString表示的值相同(儘管類型可以不同)。

最後一種強制型別轉換,我們常常稱之為“真值運算”,例如,if, ||, &&,他們的操作數不一定是布林型的額。 JavaScript會透過簡單的轉換規則,將一些非布林類型的值轉換成布林型的。大多數的值都會轉換成true,只有少數的是false,他們分別是:false, 0, -0, ”", NaN, null, undefined,因為存在數字和字符串以及對象的值為false,所以,直接用真值轉換來判斷一個函數的參數是否傳進來了,這是不不太安全的。例如,有一個可以具有預設值得可選參數的函數,如下:

function point(x, y) {
if (!x) {
x = 320;
}
if (!y) {
y = 240;
}
return { x: x, y: y };
}
登入後複製

這個函數會忽略任何的真值為假的參數的,包括0,-0;

複製程式碼 程式碼如下:

point(0, 0); // { x: 320, y: 240 }

檢測undefined的更準確的方法是用typeof操作:

function point(x, y) {
if (typeof x === "undefined") {
x = 320;
}
if (typeof y === "undefined") {
y = 240;
}
return { x: x, y: y };
}
登入後複製

這種寫法,可以區分0和undefined的:

point(); // { x: 320, y: 240 }
point(0, 0); // { x: 0, y: 0 }
登入後複製

另一個方法是利用參數跟undefined作比較,如下:

if (x === undefined) { ... }
登入後複製

總結:

1. 類型錯誤有可能會被型別轉換所隱藏。

2. “+”既可以表示字串連接,又可以表示算術加,這取決於它的操作數,如果有一個為字串的,那麼,就是字串連接了。

3. 物件透過valueOf方法,把自己轉換成數字,透過toString方法,把自己轉換成字串。

4.具有valueOf方法的對象,應該定義一個對應的toString方法,用來傳回相等的數字的字串形式。

5.偵測一些未定義的變數時,應該使用typeOf或與undefined作比較,而不應該直接用真值運算。

關於JavaScript隱式型別轉換就跟大家介紹到這裡,希望對大家有幫助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!