js中對象轉化成字元串、數字或布爾值的轉化規則

来源:https://www.cnblogs.com/lihuijuan/archive/2018/09/15/9643570.html
-Advertisement-
Play Games

js中對象可以轉化成 字元串、數字、布爾值 一、對象轉化成字元串: 規則: 1、如果對象有toString方法,則調用該方法,並返回相應的結果;(代碼通常會執行到這,因為在所有對象中都有toString方法) 2、如果對象有valueOf方法,則調用該方法,並返回相應的結果; 3、否則拋出異常。 通 ...


js中對象可以轉化成 字元串、數字、布爾值

一、對象轉化成字元串:

規則:

1、如果對象有toString方法,則調用該方法,並返回相應的結果;(代碼通常會執行到這,因為在所有對象中都有toString方法)

2、如果對象有valueOf方法,則調用該方法,並返回相應的結果;

3、否則拋出異常。

通常,所有對象都有toString方法,且內置對象都有自己toString方法的實現

alert( {key: 'value'} ) // [object Object]
alert( [1,2] )          // "1,2" 
alert( new Date() )       // "Sat Sep 15 2018 15:58:01 GMT+0800 (中國標準時間)"

在界面輸出中, 比如 alert() 和 document.write() ,將優先調用 toString,如果過得不到 標量 或 undefined、null ,再嘗試 valueOf ,如果仍然返回對象則報錯。
其實 parseInt()、 alert()、 document.write() 這些函數的調用中,參數所進行的類型轉換,應當視為"被動的" , 是函數的實現方式使之優先調用 toString, 而非數據對象自動調用 toString。

可以自定義toString()

var obj = {
    age:23,
    toString:function(){
        return this.age;
    }
}
obj.toString();//23

二、對象轉化成數字

需要轉化成數字的兩種主要情況:
  1. 函數裡邊的參數需要是數字,如: Math.sin(obj) / isNaN(obj) 以及算術運算符: +obj ;
  2. 用於比較,如:obj == 'John'

PS:下麵兩種比較不會發生類型轉換,

      a)在嚴格比較(===)中,不會發生任何的類型轉換,

      b)在非嚴格比較中,如果參數都是對象,不會發生類型轉換,通常,如果兩個對象引用統一對象,則返回true. 

轉化成數字的規則:

1、如果對象有valueOf方法,則調用該方法,並返回相應的結果;

 2、當調用valueOf返回的依然不是數字,則會調用對象的toString方法,並返回相應的結果;

 3、否則拋出異常。

對象的valueOf方法返回的是對象本身,而不是字元串(比如數組、函數,它們的valueOf方法是從Object.prototype上繼承下來的,預設行為是返回對象本身),所以才會採用toString

對於對象型參與 算術運算和 "==" 運算, 不等於比較元算(> 、<、>=、<=),自動發生數據類型轉換,先調用 valueOf ,如果 valueOf 不能返回標量(number、string、boolean) 和 undefined、 null ,

將繼續調用 toString, 如果仍然返回對象型數據,報錯。

Date 類型的例外: 在 + 和 == 運算中,優先 toString ,這應該是規範對該數據類型的特殊對待。

補充:調用valueOf()的結果:

參數類型   返回結果
Undefined 拋出TypeError異常
Null 拋出TypeError異常
Number 創建一個Number對象,它內部的初始值為傳入的參數值
String 創建一個String對象,它內部的初始值為傳入的參數值
Boolean 創建一個Boolean對象,它內部的初始值為傳入的參數值
Object 對象本身

 

 

 

 

 

 

可以重寫對象的valueOf()方法(百度一道面試題,定義一個對象,使obj == '1' ,結果為true):

var obj = {
    valueOf: function(){
        return 1;
    }
};
console.log(obj == '1');//true

三、對象轉化成布爾值:

對象在JS中總是返回true

根據上述,對象在相等性判斷中如何轉變?

在布爾上下文中, atrue , bfalse,a == b這是可能的 。

 [] == ![] //true

內部的轉化步驟:

1、右邊是![],將會被轉換成一個布爾值,[]為true,取非為false,此時表達式變成:

[]==false;

2、按照規則,右邊是布爾值,將false轉換成0,左邊是數組,數組也將進行數字轉換,先調用valueOf(),不能轉化成原始值,再用toString(),轉換為0

0 == 0

 3、結果為true

補充 == 和!=判斷規則(註意: ===!==  和 對象==對象 這三種情況不會進行類型轉換):

  1. 如果有一個操作數是布爾值,則在比較相等性之前先將其轉換為數值----false轉化為0,true轉化為1;
  2. 如果有一個數是字元串,另一個操作數是數值,將字元串轉化成數值;
  3. 如果一個操作數是對象,另一個操作數不是對象,將對象轉化為基本操作類型(先valueOf()再toString(),均不能得到基本類型的值則會報錯),再比較。

所以,對象在相等性判斷中:

  • 若兩邊都是對象,不會進行類型轉換,為同一個引用才會返回true
  • 若只有一邊為對象,則會先調用對象的valueOf()方法,不能返回基本類型,再調用對象的toString()方法,還是不能就會報錯,否則用轉化後的基本類型值繼續進行判斷

舉例,感受下~: 

[]==[]//false
[]==false//true
!![]//true
[]==![]//true

總結:


在JavaScript中,對象有三個轉換,這取決於具體情況:

  1. 字元串輸出,使用toString 。
  2. 數字:數學函數,操作符,使用valueOf 後使用 toString 。
  3. 布爾值:轉化為true。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 局部變數前面要加var 如 var name = "jiahuai" 全局變數 name = "jiahuai" 寫完每一行JavaScript代碼用;號隔開 註釋: 單行 // 多行 /* */ ...
  • 如果當前路徑是迴圈的,或者包含多個相交的子路徑,那麼Canvas的繪圖環境變數就必須判斷,當fill()方法被調用時,應該如何對當前路徑進行填充。 Canvas在填充互相有交叉的路徑時,使用 非零環繞規則 非零環繞 對於路徑中的任意給定區域,從該區域內部畫一條足夠長的線段,使此線段的終點完全落在路徑 ...
  • 實現效果:楊輝三角 即: 在這裡我將用到js中數組的知識來完成,我將用二維數組來儲存這個序列,其中外層數組儲存所有的值,裡層數組將儲存每一行的值。 我的思路是: 1.獲取用戶輸入要的行數。 2.創建二維數組併進行計算,優先計算出所需要的數值,並按行儲存,輸出之後效果如下: 3.對以上的數據,按照楊輝 ...
  • 《一統江湖的大前端》系列是自己的前端學習筆記,旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫,不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件,那你真的是有點OUT了,前端能做的事情已經太多了, , , , , , 甚至 ,什麼火就搞什麼,活脫脫一個 蹭熱點小能手 。 ...
  • 這是第一次使用html寫一個簡單的註冊表 <!DOCTYPE html><html><head> <title>木木音樂網第一次註冊表</title></head><body><h2>使用手機號碼註冊</h2><form action="" method="get"> <p>手機號碼: <input ...
  • 今天在使用scroll-view組件的時候發現結果跟預想的不一樣。其實也不是第一次用了,同樣的寫法卻出現了意料之外的效果,所以認定是bug了。博主使用的是2.3.0版本,所以之前的版本應該也會有這個bug。 ...
  • React 組件中處理 onClick 類似事件綁定的時候,是需要顯式給處理器綁定上下文(context)的,這一度使代碼變得冗餘和難看。 請看如下的示例: class App extends Component { constructor() { super(); this.state = { i ...
  • 今天給大家分享的案例是酷炫的3D照片牆 這個案例主要是通過 CSS3 和原生的 JS 來實現的,接下來我給大家分享一下這個效果實現的過程。博客上不知道怎麼放本地視頻,所以只能放兩張效果截圖了. 1.實現靜態的散開的效果圖 1 <div id="perspective"> 2 <div id="wra ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...