JavaScript中“+”的陷阱深刻理解
更新時(shí)間：2012年12月04日 10:12:56 作者：
本文將詳細(xì)介紹JavaScript中“+”的一些錯(cuò)誤應(yīng)用，需要的朋友可以參考下
一、兩個(gè)中括號(hào)相加
[] + []
中括號(hào)沒(méi)有語(yǔ)句塊的作用，因此這里的兩個(gè)中括號(hào)就是一個(gè)數(shù)組。兩個(gè)數(shù)組（對(duì)象類(lèi)型）相加先要將其轉(zhuǎn)換成值類(lèi)型（基本類(lèi)型）。
1，轉(zhuǎn)成值類(lèi)型調(diào)用valueOf，[]的valueOf()還是自己
var arr = [];
arr.valueOf() === arr; // true
2，轉(zhuǎn)成字符串，[]的toString是空字符串
[].toString(); // ""
String([]) // ""
結(jié)果出來(lái)了。兩個(gè)空字符串相加，結(jié)果仍然是空字符串。即這里的“+”指字符串連接而非數(shù)字相加。
二、大括號(hào)和中括號(hào)的相加
{} + []
注意這里的大括號(hào)仍然不是對(duì)象直接量，而是空語(yǔ)句塊。因此可以去掉它，即相當(dāng)于
+ []
注意，這時(shí)由之前看似的兩個(gè)運(yùn)算數(shù)變成了實(shí)際的單運(yùn)算數(shù)。而“+”運(yùn)算符當(dāng)只有一個(gè)運(yùn)算數(shù)時(shí)只代表一個(gè)意思：算術(shù)加運(yùn)算。即這里沒(méi)有字符串連接的意思了。
中括號(hào)的toString()是空字符串，又相當(dāng)于
+ ""
“+”代表算術(shù)加運(yùn)算，字符串非數(shù)字，因此將其轉(zhuǎn)換成數(shù)字類(lèi)型。空字符串轉(zhuǎn)成數(shù)字類(lèi)型在上一篇提到過(guò)，為0。
那么最后的結(jié)果就是0。
三、中括號(hào)和大括號(hào)相加
[] + {}
與上面的對(duì)比，只是中括號(hào)和小括號(hào)交換了順序。結(jié)果卻不相同。大括號(hào)放到右邊后，與上面討論的大括號(hào)的意義不同了。這里的大括號(hào)就是一個(gè)對(duì)象直接量而非語(yǔ)句塊。
“+” 兩邊的運(yùn)算數(shù)轉(zhuǎn)成值類(lèi)型分別是："" 和 "[object Object]"。這時(shí) "+" 表示字符串連接。即
"" + "[object Object]"
結(jié)果是 “[object Object]”。
四、小括號(hào)也和它們相加試試
突發(fā)奇想！好吧，小括號(hào)雖然有多義性，但它不能作為運(yùn)算數(shù)。
[] + []
中括號(hào)沒(méi)有語(yǔ)句塊的作用，因此這里的兩個(gè)中括號(hào)就是一個(gè)數(shù)組。兩個(gè)數(shù)組（對(duì)象類(lèi)型）相加先要將其轉(zhuǎn)換成值類(lèi)型（基本類(lèi)型）。
1，轉(zhuǎn)成值類(lèi)型調(diào)用valueOf，[]的valueOf()還是自己
復(fù)制代碼 代碼如下:
var arr = [];
arr.valueOf() === arr; // true
2，轉(zhuǎn)成字符串，[]的toString是空字符串
復(fù)制代碼 代碼如下:
[].toString(); // ""
String([]) // ""
結(jié)果出來(lái)了。兩個(gè)空字符串相加，結(jié)果仍然是空字符串。即這里的“+”指字符串連接而非數(shù)字相加。
二、大括號(hào)和中括號(hào)的相加
復(fù)制代碼 代碼如下:
{} + []
注意這里的大括號(hào)仍然不是對(duì)象直接量，而是空語(yǔ)句塊。因此可以去掉它，即相當(dāng)于
復(fù)制代碼 代碼如下:
+ []
注意，這時(shí)由之前看似的兩個(gè)運(yùn)算數(shù)變成了實(shí)際的單運(yùn)算數(shù)。而“+”運(yùn)算符當(dāng)只有一個(gè)運(yùn)算數(shù)時(shí)只代表一個(gè)意思：算術(shù)加運(yùn)算。即這里沒(méi)有字符串連接的意思了。
中括號(hào)的toString()是空字符串，又相當(dāng)于
復(fù)制代碼 代碼如下:
+ ""
“+”代表算術(shù)加運(yùn)算，字符串非數(shù)字，因此將其轉(zhuǎn)換成數(shù)字類(lèi)型。空字符串轉(zhuǎn)成數(shù)字類(lèi)型在上一篇提到過(guò)，為0。
那么最后的結(jié)果就是0。
三、中括號(hào)和大括號(hào)相加
復(fù)制代碼 代碼如下:
[] + {}
與上面的對(duì)比，只是中括號(hào)和小括號(hào)交換了順序。結(jié)果卻不相同。大括號(hào)放到右邊后，與上面討論的大括號(hào)的意義不同了。這里的大括號(hào)就是一個(gè)對(duì)象直接量而非語(yǔ)句塊。
“+” 兩邊的運(yùn)算數(shù)轉(zhuǎn)成值類(lèi)型分別是："" 和 "[object Object]"。這時(shí) "+" 表示字符串連接。即
復(fù)制代碼 代碼如下:
"" + "[object Object]"
結(jié)果是 “[object Object]”。
四、小括號(hào)也和它們相加試試
突發(fā)奇想！好吧，小括號(hào)雖然有多義性，但它不能作為運(yùn)算數(shù)。
相關(guān)文章
使用JavaScript監(jiān)視有沒(méi)有被刷新后跳轉(zhuǎn)其他頁(yè)面
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript監(jiān)視有沒(méi)有被刷新后跳轉(zhuǎn)其他頁(yè)面,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2025-01-01
js、jquery圖片動(dòng)畫(huà)、動(dòng)態(tài)切換示例代碼
這篇文章主要介紹了通過(guò)js、jquery實(shí)現(xiàn)的圖片動(dòng)畫(huà)、圖片動(dòng)態(tài)切換 ,需要的朋友可以參考下2014-06-06
一般參數(shù)值不能超過(guò)16位。如果超出16都是用0替代，導(dǎo)致我們查詢(xún)不到自己想要的結(jié)果，本文將介紹如何處理這種現(xiàn)象2012-12-12
這篇文章主要介紹了微信小程序上傳圖片到服務(wù)器的實(shí)例代碼，在文章給大家補(bǔ)充介紹了微信小程序上傳一或多張圖片 的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒加載,需要的朋友可以參考下2017-11-11
BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持,介紹如何在生成表單后，可以支持上傳圖片后可以及時(shí)預(yù)覽圖片的功能，需要的朋友可以參考下2016-06-06
微信小程序以7天為周期連續(xù)簽到7天功能效果的示例代碼
這篇文章主要介紹了微信小程序以7天為周期連續(xù)簽到7天功能效果的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實(shí)現(xiàn)RN與原生通信的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
頁(yè)面加載完畢后滾動(dòng)條自動(dòng)滾動(dòng)一定位置
希望頁(yè)面加載完畢后向左自動(dòng)滾動(dòng)一定位置，下面有個(gè)不錯(cuò)的方法可以輕松幫大家實(shí)現(xiàn)下2014-02-02
這篇文章主要介紹了JS作為值的函數(shù)用法,結(jié)合實(shí)例形式分析了javascript處理函數(shù)作為參數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-06-06
JS中三目運(yùn)算符和if else的區(qū)別分析與示例
本文是通過(guò)示例詳細(xì)分析了JS中三目運(yùn)算符和if else的區(qū)別，是篇非常不錯(cuò)的文章，這里推薦給大家。2014-11-11