JavaScript中“+”的陷阱深刻理解
更新時(shí)間:2012年12月04日 10:12:56 作者:
本文將詳細(xì)介紹JavaScript中“+”的一些錯(cuò)誤應(yīng)用,需要的朋友可以參考下
一、兩個(gè)中括號相加
[] + []
中括號沒有語句塊的作用,因此這里的兩個(gè)中括號就是一個(gè)數(shù)組。兩個(gè)數(shù)組(對象類型)相加先要將其轉(zhuǎn)換成值類型(基本類型)。
1,轉(zhuǎn)成值類型調(diào)用valueOf,[]的valueOf()還是自己
var arr = [];
arr.valueOf() === arr; // true
2,轉(zhuǎn)成字符串,[]的toString是空字符串
[].toString(); // ""
String([]) // ""
結(jié)果出來了。兩個(gè)空字符串相加,結(jié)果仍然是空字符串。即這里的“+”指字符串連接而非數(shù)字相加。
二、大括號和中括號的相加
{} + []
注意這里的大括號仍然不是對象直接量,而是空語句塊。因此可以去掉它,即相當(dāng)于
+ []
注意,這時(shí)由之前看似的兩個(gè)運(yùn)算數(shù)變成了實(shí)際的單運(yùn)算數(shù)。而“+”運(yùn)算符當(dāng)只有一個(gè)運(yùn)算數(shù)時(shí)只代表一個(gè)意思:算術(shù)加運(yùn)算。即這里沒有字符串連接的意思了。
中括號的toString()是空字符串,又相當(dāng)于
+ ""
“+”代表算術(shù)加運(yùn)算,字符串非數(shù)字,因此將其轉(zhuǎn)換成數(shù)字類型??兆址D(zhuǎn)成數(shù)字類型在上一篇提到過,為0。
那么最后的結(jié)果就是0。
三、中括號和大括號相加
[] + {}
與上面的對比,只是中括號和小括號交換了順序。結(jié)果卻不相同。大括號放到右邊后,與上面討論的大括號的意義不同了。這里的大括號就是一個(gè)對象直接量而非語句塊。
“+” 兩邊的運(yùn)算數(shù)轉(zhuǎn)成值類型分別是:"" 和 "[object Object]"。這時(shí) "+" 表示字符串連接。即
"" + "[object Object]"
結(jié)果是 “[object Object]”。
四、小括號也和它們相加試試
突發(fā)奇想!好吧,小括號雖然有多義性,但它不能作為運(yùn)算數(shù)。
[] + []
中括號沒有語句塊的作用,因此這里的兩個(gè)中括號就是一個(gè)數(shù)組。兩個(gè)數(shù)組(對象類型)相加先要將其轉(zhuǎn)換成值類型(基本類型)。
1,轉(zhuǎn)成值類型調(diào)用valueOf,[]的valueOf()還是自己
復(fù)制代碼 代碼如下:
var arr = [];
arr.valueOf() === arr; // true
2,轉(zhuǎn)成字符串,[]的toString是空字符串
復(fù)制代碼 代碼如下:
[].toString(); // ""
String([]) // ""
結(jié)果出來了。兩個(gè)空字符串相加,結(jié)果仍然是空字符串。即這里的“+”指字符串連接而非數(shù)字相加。
二、大括號和中括號的相加
復(fù)制代碼 代碼如下:
{} + []
注意這里的大括號仍然不是對象直接量,而是空語句塊。因此可以去掉它,即相當(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)算。即這里沒有字符串連接的意思了。
中括號的toString()是空字符串,又相當(dāng)于
復(fù)制代碼 代碼如下:
+ ""
“+”代表算術(shù)加運(yùn)算,字符串非數(shù)字,因此將其轉(zhuǎn)換成數(shù)字類型??兆址D(zhuǎn)成數(shù)字類型在上一篇提到過,為0。
那么最后的結(jié)果就是0。
三、中括號和大括號相加
復(fù)制代碼 代碼如下:
[] + {}
與上面的對比,只是中括號和小括號交換了順序。結(jié)果卻不相同。大括號放到右邊后,與上面討論的大括號的意義不同了。這里的大括號就是一個(gè)對象直接量而非語句塊。
“+” 兩邊的運(yùn)算數(shù)轉(zhuǎn)成值類型分別是:"" 和 "[object Object]"。這時(shí) "+" 表示字符串連接。即
復(fù)制代碼 代碼如下:
"" + "[object Object]"
結(jié)果是 “[object Object]”。
四、小括號也和它們相加試試
突發(fā)奇想!好吧,小括號雖然有多義性,但它不能作為運(yùn)算數(shù)。
相關(guān)文章
JavaScript樹結(jié)構(gòu)深度優(yōu)先算法
這篇文章主要介紹了JavaScript樹結(jié)構(gòu)深度優(yōu)先算法,樹結(jié)構(gòu)可以說是前端中最常見的數(shù)據(jù)結(jié)構(gòu)之一,比如說DOM樹、級聯(lián)選擇、樹形組件,更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-07-07拖動(dòng)Html元素集合 Drag and Drop any item
拖動(dòng)Html元素集合 Drag and Drop any item...2006-12-12OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09原生JS實(shí)現(xiàn)手動(dòng)輪播圖效果實(shí)例代碼
手動(dòng)輪播圖,為輪播圖中的一種,輪播圖主要有無縫輪播,手動(dòng)輪播,延遲輪播,切換輪播等等,輪播圖主要用于展現(xiàn)圖片,新出商品,詞條,又能美觀網(wǎng)頁。給網(wǎng)頁中增加動(dòng)態(tài)效果。接下來通過本文給大家分享原生JS實(shí)現(xiàn)手動(dòng)輪播圖的實(shí)例代碼,一起看看吧2018-11-11js用正則表達(dá)式來驗(yàn)證表單(比較齊全的資源)
在學(xué)習(xí)網(wǎng)頁中的表單驗(yàn)證,順便學(xué)習(xí)下正則表達(dá)式,在網(wǎng)上找了后發(fā)現(xiàn)了一個(gè)比較齊全的資源,稍微進(jìn)行了一下排版,喜歡的朋友可以收藏2013-11-11javaScript把其它類型轉(zhuǎn)換為Number類型
在本篇文章里小編給大家整理的是關(guān)于javaScript把其它類型轉(zhuǎn)換為Number類型的相關(guān)文章,有需要的朋友們學(xué)習(xí)下。2019-10-10基于Bootstrap實(shí)現(xiàn)Material Design風(fēng)格表單插件 附源碼下載
Jquery Material Form Plugin是一款基于Bootstrap的Material Design風(fēng)格的jQuery表單插件。這篇文章主要介紹了基于Bootstrap的Material Design風(fēng)格表單插件附源碼下載,感興趣的朋友參考下2016-04-04使用Firebug對js進(jìn)行斷點(diǎn)調(diào)試的圖文方法
使用Firebug調(diào)試JavaScript非常方便。因?yàn)閖s的錯(cuò)誤不容易查找,用這個(gè)就方便多了。2011-04-04