JS 加法知多少？

xuhong 發布于2019-08-23 15:41 / 3291人閱讀

摘要：今天收到一個問題別用控制臺，能說出來是多少一下沒反應過來，不知道你說對了沒反正我說錯了，哈哈哈好了，先公布結果下面好好分析分析到底是啥原理。

今天收到一個問題

var a = +[]

別用控制臺，能說出來是多少？

一下沒反應過來，不知道你說對了沒

反正我說錯了，哈哈哈~

好了，先公布結果

console.log(+[]) // 0 
console.log(0 + []) // "0"
console.log(0 - []) // 0
console.log([] + []) // ""
console.log({} + []) // "[object Object]"

下面好好分析分析到底是啥原理。

加法運算

1、加號運算符只能用于原始數據類型，對于對象類型的值，需要進行數據轉換

2、在轉換后，如果其中一個運算元出現原始數據類型是“字符串”類型值時，則另一運算元強制轉換為字符串，然后做字符串的連接運算

3、在其他情況時，所有運算元都會轉換為原始數據類型的“數字”類型值，然后作數字的相加

Number() 轉換規則

如果是 Boolean 值，true 和 false 將分別轉換為 1 和 0。

如果是數字值，只是簡單的傳入和返回。

如果是 null 值，返回 0。

如果是 undefined ,返回 NaN。

如果是字符串，遵循下列規則：

   (1) 如果字符串截去開頭和結尾的空白字符后，不是純數字字符串，那么最終返回結果為 `NaN`。 

   (2) 如果是字符串中只包含數字（包括前面帶正號或負號的情況），則將其轉換為十進制數值，即“1”變成1，“123”會變成123，而“011”會變成11（前導的零被忽略了）； 

   (3) 如果字符串中包含有效的浮點格式，如“1.1”，則將其轉換為對應的浮點數值（同樣也會忽略前導零）； 

   (4) 如果字符串中包含有效的十六進制格式，例如 `0xf`，則將其他轉換為相同大小的十進制整數值； 

   (5) 如果字符串是空的（不包含任何字符），則將其轉換為 0； 

   (6) 如果字符串中包含除上述格式之外的字符，則將其他轉換成 `NaN`。

如果是對象，則調用對象的 valueOf() 方法，然后依照前面的規則轉換返回的值。如果轉換的結果是 NaN，則調用對象的 toString()
方法，然后再次依照前面的規則轉換返回的字符串值。

示例

console.log(Number(undefined)) // NaN
console.log(Number(null)) // 0
console.log(Number(NaN)) // NaN
console.log(Number("")) // 0
console.log(Number({})) // NaN
console.log(Number({a:1})) // NaN
console.log(Number([])) // 0
console.log(Number([1])) // 1
console.log(Number([1,2])) // NaN

console.log(String(undefined)) // "undefined"
console.log(String(null)) // "null"
console.log(String(NaN)) // "NaN"
console.log(String({})) // "[object Object]"
console.log(String({a:1})) // "[object Object]"
console.log(String([])) // ""
console.log(String([1])) // "1"
console.log(String([1,2])) // "1,2"

分析

+[]，[] 是對象，依據第六條規則，轉換的結果是 NaN，然后調用對象的 toString() 方法，得到 "" 空字符串，Number("") => 0，所以 +[] => 0，結果為數字 0

0 + []，得到 0 + "" => "0" ，結果為字符串 0

{} + []，得到 "[object Object]" + "" => "[object Object]"，結果為字符串 [object Object]

其他以此類推可得。

懂了沒~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102452.html

【JS基礎】類型轉換知多少

摘要：正確的解釋是允許在相等比較中進行強制類型轉換，而不允許。參考資料小議下字符串比較大小中的強制類型轉換核心概念類型轉換對象和方法隱式類型轉換小結開胃菜先說一個題外話，我在工作中遇到一個問題，需要比較 08:00 和 09:00 的大小，最后我找到三種方法：在兩個字符串前后各拼接相同的年月日和秒，拼成完整的時間格式進行比較： var head = 2016-01-01 var fo...

AdolphLWQ 2019-08-23 17:59 評論0 收藏0
[js高手之路]this知多少

摘要：關鍵字在中的變化非常的靈活，如果用的不好就非常惡心，用的好程序就非常的優雅，靈活，飄逸所以掌握的用法，是每一個前端工程師必知必會的而且這個也是一些大公司筆試中常見的考察項第一種單獨的，指向的是這個對象注當前的執行環境是所以指向了第二種全局函 this關鍵字在javascript中的變化非常的靈活，如果用的不好就非常惡心，用的好,程序就非常的優雅，靈活，飄逸.所以掌握this的用法，是每...

APICloud 2019-08-20 19:07 評論0 收藏0
document.write知多少

摘要：原生的里絕對是重量級的。第二個案例，如果是異步引入的加或者動態加入的，里面的因安全原因是無法工作的。頁面在狀態，即使沒有調用操作也會自動調用方法從而將頁面清空了。有的同學說將是不是可以避免，結論是。所以使用一定要知道執行的時機。原生JavaScript的API里document.write絕對是重量級的。如果大家對他的使用場景、注意事項、原理等不明晰，歡迎閱讀本文。使用場景 ...

ARGUS 2019-08-29 11:04 評論0 收藏0
document.write知多少

摘要：原生的里絕對是重量級的。第二個案例，如果是異步引入的加或者動態加入的，里面的因安全原因是無法工作的。頁面在狀態，即使沒有調用操作也會自動調用方法從而將頁面清空了。有的同學說將是不是可以避免，結論是。所以使用一定要知道執行的時機。原生JavaScript的API里document.write絕對是重量級的。如果大家對他的使用場景、注意事項、原理等不明晰，歡迎閱讀本文。使用場景 ...

syoya 2019-08-20 10:11 評論0 收藏0
document.write知多少

摘要：原生的里絕對是重量級的。第二個案例，如果是異步引入的加或者動態加入的，里面的因安全原因是無法工作的。頁面在狀態，即使沒有調用操作也會自動調用方法從而將頁面清空了。有的同學說將是不是可以避免，結論是。所以使用一定要知道執行的時機。原生JavaScript的API里document.write絕對是重量級的。如果大家對他的使用場景、注意事項、原理等不明晰，歡迎閱讀本文。使用場景 ...

TNFE 2019-08-01 15:33 評論0 收藏0