1. 程式人生 > >JS 數據類型轉換以其他

JS 數據類型轉換以其他

指向 一律 保存 date style 添加屬性 name 分享圖片 src

JavaScript 是一種弱類型的語言,也就是沒有類型限制,變量可以隨時被賦予任意值。
同時,在程序運行過程中,類型會被自動確認的。因此,這就是涉及到數據的類型轉換。在 JS 的世界中,數據類型轉換可以分為類型的顯示轉換隱式轉換

JavaScript 中的顯示轉換

JS 中的顯示轉換主要指的就是手動轉換為 數值、字符串、布爾值。
任意值轉換為數值

  • 基本數據類型值轉換為數值
    原始類型的值主要是字符串、布爾值、undefined和null,它們都能被Number轉成數值或NaN。
// 數值:轉換後還是原來的值
Number(324) // 324

// 字符串:如果可以被解析為數值,則轉換為相應的數值
Number(‘324‘) // 324 // 字符串:如果不可以被解析為數值,返回NaN Number(‘324abc‘) // NaN // 空字符串轉為0 Number(‘‘) // 0 // 布爾值:true 轉成1,false 轉成0 Number(true) // 1 Number(false) // 0 // undefined:轉成 NaN Number(undefined) // NaN // null:轉成0 Number(null) // 0
  • 對象轉換為數值
    Number方法的參數是對象時,將返回NaN,除非是包含單個數值的數值
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

對象的轉換規則:
調用對象自身的valueOf方法。如果返回基本類型的值,則直接對該值使用Number函數,不再進行後續步驟。
如果valueO方法返回的還是對象,則改為調用對象自身的toString方法。如果toStrin方法返回基本類型的值,則對該值使用Numbe函數,不再進行後續步驟。
如果toStrin方法返回的是對象,就報錯。

任意值轉化為字符串

  • 基本類型值
String(123) // "123"
String(‘abc‘) // "abc"
String(true) // "true"
String(undefined) // "undefined"
String
(null) // "null"
  • 對象
    String方法的參數如果是對象,返回一個類型字符串;如果是數組,返回該數組的字符串形式。
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

對象轉換規則:
先調用對象自身的toString方法。如果返回基本類型的值,則對該值使用String函數,不再進行以下步驟。
如果toString方法返回的是對象,再調用原對象的valueO方法。如果valueOf方法返回基本類型的值,則對該值使用String函數,不再進行以下步驟。
如果valueOf方法返回的是對象,就報錯。

任意值轉換為布爾值
使用 Boolean 函數,以下六個值的轉換結果為false:

  • undefined
  • null
  • -0
  • 0 或 +0
  • NaN
  • ""(空字符串)

其他的任意值都是true,包括所有對象,即使是空對象

Boolean(new Boolean(false)) // true

甚至連false對應的布爾對象new Boolean(false)也是true

JavaScript 中的隱式轉換

數據類型既然有顯示的轉換,就有隱式轉換,而數據的隱式轉化主要是發生在JS中的運算符操作流程控制語句中。

// 1. 不同類型的數據互相運算
123 + ‘abc‘ // "123abc"

// 2. 對非布爾值類型的數據求布爾值
if (‘abc‘) {
console.log(‘hello‘)
} // "hello"

// 3. 對非數值類型的數據使用一元運算符(即“+”和“-”)
+ {foo: ‘bar‘} // NaN
- [1, 2, 3] // NaN

這其中有兩個隱式轉化需要特別註意:”==“”+“
“ + “號有兩種用途:一是作為加法運算符,二是作為連接運算符

// 當其中一個是字符串,不管另一個是什麽,都會轉換為字符串
"1" + "2" // "12"
"1" + 2 // "12"
"1" + true // "1true"

// 兩邊是數值或者布爾值(false轉換為0,true轉換為1),均相加
true + 1 // 2
ture + true // 2
ture + false // 0
1 + 2 // 3

還有一種情況是:
其中一邊或者兩都存在對象,則先調用該對象的valueOf方法。如果返回結果為原始類型的值,則運用上面兩條規則;否則繼續調用該對象的toString方法,對其返回值運用上面兩條規則

1 + {} // 1[object Object]
1 + [] // 1 註意:這裏空數組最終返回空字符串
1 + [1,2] // 11,2

function a() {
return 2;
}
1 + a // 1function a() {return 2}
1 + a() // 3

再來看” == “

  • 雙等號兩邊是否有NaN,如果有,一律返回false
  • 兩邊是否存在布爾值,有則將布爾值轉換為數字(false是0,true是1)
  • 一邊存在字符串時:對方是對象,對象使用toString() 或者 valueOf() 轉換
  • 對方是數字,字符串轉換為數字
  • 對方是字符串,直接比較
  • 其他均返回false
  • 一邊是數字,對方是對象,對象使用toString() 或者valueOf() 比較,其他均返回false
  • null和undefined比較,返回true

還要註意的是:
並不是對象轉換為字符串就是只調用 toString(),數值就只調用 valueOf()。
大多數對象(Date對象就是例外)的轉換會先調用valueOf()方法,再調用toString()方法

普通類型和對象的區別

  

ECMAScirpt 變量有兩種不同的數據類型:基本類型,引用類型。也有其他的叫法,比如原始類型和對象類型,擁有方法的類型和不能擁有方法的類型,
還可以分為可變類型和不可變類型,其實這些叫法都是依據這兩種的類型特點來命名的,大家愛叫啥就叫啥吧 。
1.基本類型

基本的數據類型有:`undefined,boolean,number,string,null.基本類型的訪問是按值訪問的,就是說你可以操作保存在變量中的實際的值。
基本類型有以下幾個特點:

1.基本類型的值是不可變得:

任何方法都無法改變一個基本類型的值,比如一個字符串:

var name = ‘jozo‘; name.toUpperCase(); // 出 ‘JOZO‘ console.log(name); // 出 ‘jozo‘



會發現原始的name並未發生改變,而是調用了toUpperCase()方法後返回的是一個新的字符串。
再來看個:

var person = ‘jozo‘; person.age = 22; person.method = function(){//...}; console.log(person.age); // undefined console.log(person.method); // undefined



通過上面代碼可知,我們不能給基本類型添加屬性和方法,再次說明基本類型時不可變得;

2.基本類型的比較是值的比較:


只有在它們的值相等的時候它們才相等。
但你可能會這樣:

var a = 1; var b = true; console.log(a == b);//true


它們不是相等嗎?其實這是類型轉換和 == 運算符的知識了,也就是說在用==比較兩個不同類型的變量時會進行一些類型轉換。像上面的比較先會把true
轉換為數字1再和數字1進行比較,結果就是true了。 這是當比較的兩個值的類型不同的時候==運算符會進行類型轉換,但是當兩個值的類型相同的時候,
即使是==也相當於是===。

var a = ‘jozo‘; var b = ‘jozo‘; console.log(a === b);//true



3.基本類型的變量是存放在棧區的(棧區指內存裏的棧內存)

假如有以下幾個基本類型的變量:

var name = ‘jozo‘; var city = ‘guangzhou‘; var age = 22;



那麽它的存儲結構如下圖:
技術分享圖片




棧區包括了 變量的標識符和變量的值。
2.引用類型

引用類型會比較好玩有趣一些。

javascript中除了上面的基本類型(number,string,boolean,null,undefined)之外就是引用類型了,也可以說是就是對象了。對象是屬性和方法的集合。
也就是說引用類型可以擁有屬性和方法,屬性又可以包含基本類型和引用類型。來看看引用類型的一些特性:

1.引用類型的值是可變的


我們可為為引用類型添加屬性和方法,也可以刪除其屬性和方法,如:

var person = {};//象 -- person.name = ‘jozo‘; person.age = 22; person.sayName = function(){console.log(person.name);} person.sayName();// ‘jozo‘ delete person.name; //除person的name person.sayName(); // undefined

上面代碼說明引用類型可以擁有屬性和方法,並且是可以動態改變的。

2.引用類型的值是同時保存在棧內存和堆內存中的對象

javascript和其他語言不同,其不允許直接訪問內存中的位置,也就是說不能直接操作對象的內存空間,那我們操作啥呢? 實際上,是操作對象的引用,
所以引用類型的值是按引用訪問的。
準確地說,引用類型的存儲需要內存的棧區和堆區(堆區是指內存裏的堆內存)共同完成,棧區內存保存變量標識符和指向堆內存中該對象的指針,
也可以說是該對象在堆內存的地址。
假如有以下幾個對象:

var person1 = {name:‘jozo‘}; var person2 = {name:‘xiaom‘}; var person3 = {name:‘xiaoq‘};



則這三個對象的在內存中保存的情況如下圖:


技術分享圖片



3.引用類型的比較是引用的比較

var person1 = ‘{}‘; var person2 = ‘{}‘; console.log(person1 == person2); // true

上面講基本類型的比較的時候提到了當兩個比較值的類型相同的時候,相當於是用 === ,所以輸出是true了。再看看:

var person1 = {}; var person2 = {}; console.log(person1 == person2); // false

可能你已經看出破綻了,上面比較的是兩個字符串,而下面比較的是兩個對象,為什麽長的一模一樣的對象就不相等了呢?

別忘了,引用類型時按引用訪問的,換句話說就是比較兩個對象的堆內存中的地址是否相同,那很明顯,person1和person2在堆內存中地址是不同的:

技術分享圖片



所以這兩個是完全不同的對象,所以返回false;
3.簡單賦值

在從一個變量向另一個變量賦值基本類型時,會在該變量上創建一個新值,然後再把該值復制到為新變量分配的位置上:

var a = 10; var b = a; a ++ ; console.log(a); // 11 console.log(b); // 10

此時,a中保存的值為 10 ,當使用 a 來初始化 b 時,b 中保存的值也為10,但b中的10與a中的是完全獨立的,該值只是a中的值的一個副本,此後,
這兩個變量可以參加任何操作而相互不受影響。

也就是說基本類型在賦值操作後,兩個變量是相互不受影響的。

技術分享圖片



4.對象引用

當從一個變量向另一個變量賦值引用類型的值時,同樣也會將存儲在變量中的對象的值復制一份放到為新變量分配的空間中。前面講引用類型的時候提到,
保存在變量中的是對象在堆內存中的地址,所以,與簡單賦值不同,這個值的副本實際上是一個指針,而這個指針指向存儲在堆內存的一個對象。那麽賦值操作後,
兩個變量都保存了同一個對象地址,則這兩個變量指向了同一個對象。因此,改變其中任何一個變量,都會相互影響:

var a = {}; // a var b = a; // a和b a.name = ‘jozo‘; console.log(a.name); // ‘jozo‘ console.log(b.name); // ‘jozo‘ b.age = 22; console.log(b.age);// 22 console.log(a.age);// 22 console.log(a == b);// true


它們的關系如下圖:
技術分享圖片

因此,引用類型的賦值其實是對象保存在棧區地址指針的賦值,因此兩個變量指向同一個對象,任何的操作都會相互影響。

JS 數據類型轉換以其他