一起來了解資料型別(也許通俗易懂)

weixin_44399953發表於2020-10-14

我是一個菜雞,筆試完一家公司,筆試完後的我就傻掉了。於是開始奮筆疾書,記錄一下,也不知道會不會更全。話不多說直接放程式碼。

首先看到typeof操作符:
宣告瞭但是沒有賦值和沒有宣告的變數,兩種都是undefined。然後呢,undefined本身也是undefined。

var cc;
var ccc;
console.log(typeof ccc);  // undefined
console.log(typeof cccc); // undefined
console.log(typeof undefined); // undefined

於是我想了一下,如果上面兩個宣告但是未定義值得兩個數加減會怎麼樣,結果全是number型,

console.log(typeof (ccc - cc)); // number
console.log(typeof (cc + ccc)); // number
console.log(typeof (cc * ccc)); // number
console.log(typeof (cc / ccc)); // number

所以得出了我的一個結果: (undefined ±*/ undefined = number)

  • (在這裡做一個簡單的補充就是,未宣告變數和宣告瞭變數但是沒有初始化【就是沒有賦值】)是有區別的。看下面的程式碼
var ss;
console.log(ss);  // undefined
console.log(ssss); // ReferenceError: ssss is not defined

好了,我繼續開始下一個驗證,說到了number就先看number吧,看看有哪些會得出number的值來,

// 加法
console.log(typeof (1 + 1)); // number
console.log(typeof (1 + '1')); // string
console.log(typeof ('1' + 1)); // string
console.log(typeof ('1' + '1')); // string
// 減法 乘法 除法
console.log(typeof (1 -*/ 1)); // number
console.log(typeof (1 -*/ '1')); // number
console.log(typeof ('1' -*/ 1)); // number
console.log(typeof ('1' -*/ '1')); // number

由此,得出了我的第二個結果: 加法出了數字加數字是number以外,加其他的都是string型別,劍法,乘法,除法,都是number型別,不管數字是number型還是字元型


畫個分割繼續來,不僅數字可以加減,如果是布林型別加減呢,來看一下會有什麼樣的結果
console.log(true + true); //2 
console.log(true - false); // 0
 console.log(true */ true); // 1
 
console.log(typeof (true +-*/ true));  //number

通過true的加減乘除可以得知第三個結果: 布林型別之間互相加減的時候,是會程式設計數字進行操作的,true為1, false為0
瞭解完了這一層以後,但是還是有幾個值是特殊的,如下。

console.log(false / false); // NaN   (這個說不清楚,看後文,相信我也許會懂的)
console.log(true / false); // Infinity  (這個詞表示的是無窮大)

既然是number型別,自然而然就得要去分清楚 整型, 浮點型 吧。也要了解下 十進位制,八進位制,十六進位制吧 好了,直接放程式碼瞭解(為什麼要放這個呢, 因為筆試!!!!! 做到了!!!!!!)

好了,開始放程式碼,首先時整數型的,

var intNum = 55;  // 這是最簡單的一個十進位制整數了。

// 下面這三個都是八進位制,八進位制第一位必須為0, 數字序列必須為7
// 如果字面值超出了範圍,前導0將會被忽略。
var ocralNum = 070;   // 八進位制的  56 , 列印ocralNum = 56
var ocralNum1 = 078;   // 無效的八進位制,數值 , 列印 79
var ocralNum2 = 08;  // 無效的八進位制,數值 , 列印 8

// 下面是十六進位制的值
// 十六進位制前面兩位必須是 0x, 後面跟任何十六進位制
var hexNum1 = 0xA;  // 十六進位制的10
var hexNum2 = 0x1f;  // 十六進位制的 31

程式碼清晰明瞭,註釋也比較清晰明瞭,我懂了,好,繼續浮點型,先看看定義: 浮點數值,就是數值中必須包含一個小數點,而且小數點後面必須至少有一個數字

var a = 1.1;
var b = 0.1;
var c = .1 //  這種方法不推薦使用,雖然可以使用。

小數很簡單,通俗明瞭, 但是要了解一個知識點,儲存浮點數值需要的記憶體空間是儲存整數值的 兩倍 。因此ECMAScript 會不失時機的將浮點數值轉換為整數值。

什麼意思呢??? 看下面程式碼和註釋你也許就能明白了( 就是一個數雖然看起來是小數,但是他表示是整數,他就會被轉換為整數 )

var a = 1.;   // 小數點後面沒有數字 --- 解析為 1
var a = 10.0;  // 整數 ---- 解析為  10

是不是很明瞭 (Javascript 高階程式設計紅寶書裡面的例子哈哈,盜用了 !!!)。

表示完了浮點,還有一種 極大或者極小的數值,可以用 e 表示法。

var floatNum = 3.12e7   // 等於 312 000 00 這個數值
var floatNum = 3e-7;  //等於 3乘以10的-7次方

現在讓我們來看看,NaN,好多地方都能看到 NaN這種玩意,那一般什麼時候才會得到NaN這個值呢??? 還是先看看定義吧。
NaN,即非數值,是一個特殊的值, 這個數值用於表示一個本來要返回數值的運算元, 但是未返回數值的情況。
聽不懂對吧,我也不懂,好繼續看這裡!!!
即任何數值除以非數值會返回NaN,因此不會像其他程式語言那樣影響程式碼的執行。
好,大概理解了,其實就是一種不會影響程式碼執行的報錯嘛。那就根據程式碼理解看看吧。

console.log(1 / 'a');  // NaN
console.log(1 / true);  // 1
console.log(0 / false); // NaN
console.log(1 / false); // Infinity
console.log(1 / []);   // Infinity
console.log(1 / {});  // NaN

看到這裡,我人就有點傻了(畢竟我是個菜鳥)。大概意思估計是: [ ] 作為被除的數時候,會變成0. false 和true上面已經提過,此處不再提起。好吧。懵裡懵懂先這樣理解咯,看看後文會不會有答案。

看了下 NaN 就發現了這麼一堆疑問。決定先放棄看完。繼續看書。發現了他有兩個特性。

  • 任何涉及 NaN 的操作 ( 例如 NaN / 10) 都會返回 NaN,這個特點在多步計算 中有可能導致問題。
  • NaN 與任何值都不等,包括 NaN 本身。如 alert(NaN == NaN) 返回 false.

這兩個定義應該還是很好理解的,也就不過多解釋了。
注:第一個定義我已經能測試的都測試過了。全是NaN,你們可以試試看。有其他的歡迎評論。

針對這兩個特點,定義了一個方法 ::isNaN().這個函式會幫我們確認這個引數是否 ”不是數值“。不說了,看程式碼如何用

alert(isNaN(NaN)) // true   不是數值
alert(isNaN(10))  // false  是數值
alert(isNaN("10"))  //  10 是一個數值,因為 "10" 可以被轉換成數值  10
alert(isNaN("blue")) //  true  不是數值
alert(isNaN(true))  //  false   是數值 因為 true 可以被轉換成數值1
alert(isNaN([]))  // false  是數值 因為 []  可以被轉換成數值 0
alert(isNaN({})) //  true 不是數值  

所以我們可以知道: isNaN() 判斷是否 ”不是數值“,數字字串和boolean值會轉換成 數值型

但是看到上面 [] 和 {} 的值就會很疑惑,為什麼會這樣呢。有這樣的思考就有這樣的解決方法,自然是。數值轉換了。 首先我們先看看 [] 和 {} 轉換成數值是什麼樣的。雖然我上面給了註釋,但是我們驗證一下比較好。

console.log(Number([]))   //  0
console.log(Number({}))   //  NaN 

現在懂了。{} 轉換成數值是NaN呀,當然true了

現在開始

現在開始我認為number裡面重要的點了。

數值轉換

有三個函式可以把非數值轉換為數值: Number(), parseInt()parseFloat()

  1. 看看Number的轉換規則:(程式碼配註釋)
// Boolean 值, true  false  --> 1 0
console.log(Number(true)) // 1
console.log(Number(false)) // 0

// 如果是 null -->  0
cosole.log(Number(null))  //  0

// undefined  -->  NaN
console.log(Number(undefined))  // NaN

// "" --> 0
console.log(Number("")) // 0

如果是字串。啊,看了下規則也太多東西了。
行吧,一點點來。

// 如果是這種,則返回 NaN
console.log(Number("helloworld"))  // NaN
// 如果是這種, 返回數字
console.log(Number('123')) // 123
// 如果是這種, 八進位制 十六進位制顯示的字串,顯示的也是,數值,不會被轉變。
console.log(Number('072')) // 72
// 如果是字串true ,false 也不會被轉變 列印NaN
console.log(Number('true'))  // NaN

// 。。。。。。

Number介紹點暫時就到這裡了,由於 Number 函式在轉換字串中比較複雜而且不夠合理,因此在處理函式的時候更常用的是 parseInt()函式。

  • paeseInt()函式
    • 在轉換字串時,更多的是看其值是否符合數值模式。
    • 它會忽略字串串前面的空格,直到找到第一個非空格字元。
    • 如果第一個字元不是數字字元,則返回NaN.
    • 如果第一個是數字字元,則繼續解析第二個字元,直到解析完所有後續字元或者遇到了一個非數字字元。
    • 它也能夠識別出各種整式格式,十進位制,八進位制,十六進位制等。

這個定義很重要!!!
這個定義很重要!!!
這個定義很重要!!!
重要的事情說三遍

很好,看不懂沒關係,看例項就懂了

console.log(parseInt("123456blue")); // 123456
console.log(parseInt(""));  // NaN
console.log(parseInt("0xB")); // 11 (十六進位制數轉換)
console.log(parseInt(22.5));  // 22 

console.log(parseInt('070')); // 56  八進位制數轉換來的
console.log(parseInt('70'));  // 十進位制
console.log(parseInt('0xf')); // 15  十六進位制數

// 這裡請注意!!!!!!!!!!!!!
console.log(parseInt('22.5')); // 22  .不是數值,所以取前面兩個,而不是。22.5取整。這裡要搞清楚
console.log(parseInt("af", 16)) // 175  表示 af 數字, 但是是16進位制的  列印出 175 整數
//  16的位置也可以設定成, 2,8,100, 16

開始吧,parseFloat
  • parseFloat()
    • 從第一個字元開始解析。
    • 一直解析到字串末尾,或者解析遇到一個無效的浮點數字字元(即第二個小數點。)
    • 它會始終都忽略前導的 0。
    • parseFloat()只解析十進位制值,沒有第二個引數的用法。
    • 如果,if, 字串包含的是一個可解析為整數的數(無小數點或者小數點後面都是0),會返回整數。
console.log(parseFloat('1234blue')); // 1234
console.log(parseFloat('0xA'));  // 0
console.log(parseFloat('22.5'));  // 22.5
console.log(parseFloat('22.34.5')); // 22.34
console.log(parseFloat('0908.5')); // 908.5 
console.log(parseFloat('3.125e7')); // 31250000 
console.log(parseFloat([]))  // NaN

誒,看到這裡,不知不覺,碼字到這裡好累啊,但是確實不知道寫了點什麼東西。算了,繼續吧。也許到最後就知道了呢。接下來字串

string

來到這裡的第一件事情自然是要了解下。字元字面量咯(別說了,我也記不住,好了寫個表格意思意思)

字面量含義
\n換行
\t製表
\b退格
\r回車
\f進紙(換頁)
\斜槓
單引號,再用單引號表示的字串中使用: 'he said, ’ hey ’ ’
"雙引號,意思同上
\xnn以十六進位制程式碼 nn 表示的一個字元。 如 , \x41 表示 ‘A’
\unnnn以十六進位制程式碼 nnnn 表示的一個 Unicode字元

感覺要記錄的也就前面幾個,最後兩個 emmm, 看個人需要吧。

轉換字串

轉換字串的方式有兩種

  • toString()方法
  • 轉型函式String()

首先我們看看toString()吧

var age = 10;
var agestring = age.toString();  // "10"
var found = true;
var foundString = found.toString() // "true"

這兩種應該是最常見的number boolean 轉換成字串型的程式碼了吧。
(擴充下: 數值,布林值,物件,字串值 都有 toString() 方法)

下面看看第二種toString的用法: 轉換進位制數

var num = 10;
alert(num.toString());  // "10"   預設。 10進位制
alert(num.toString(2));  // "110"  二進位制 
alert(num.toString(10)); // "10"    十進位制
alert(num.toString(8));   // "12"   八進位制
alert(num.toString(16));   // "a"   十六進位制

看上面的例子,toString裡面的數字就是要轉換的進位制。toString可以改變輸出的值。根據不同的進位制轉換為不同的數值格式。

下面看看第三種toString的用法。(請判斷能不能使用哦)
然後我又把String()的用法結合和toString的用法放在一起比對,判斷他們之間的異同

var a = null;
var b;
var c = [];
var c1 = [1, 2, 3];
var d = {};
var d1 = {name: 'sad', age: 321};

console.log(a.toString(null));  // TypeError報錯
console.log(String(null));  // null
console.log(b.toString());  // TypeError
console.log(String(b));  // undefined 
console.log(c.toString());  // 列印出的是空
console.log(String(c));  //  列印出的是空
console.log(c1.toString());  // 1,2,3
console.log(String(c1)); // 1,2,3
console.log(d.toString());  // [object Object]
console.log(String(d)); // [object Object]
console.log(d1.toString());  // [object Object]
console.log(String(d1)); // [object Object]

看完了這一條程式碼以後發現啊,再對null 和 undefined 轉變成字串的時候,兩者才存在區別。看例子後得出一個結論:null和undefined 是不存在 toString()方法的。 toString() 方法在將null 和 undefined 轉換成字串時候會報錯, 只能使用 String() 方法轉換。


接下來,還剩下兩個 null 和 Boolean 值,這兩個感覺要簡單一些,現在開始整理

首先是 Boolean 值,true 和 false 我就不多說了。懂得都懂。
但是這個布林值卻有很多很多地方可以用到,比如左右兩個值比是否相等,作為判斷使用。在該部落格主要研究值相等的情況 (沒辦法這一塊我太菜了, 必須要好好研究琢磨一番,好了,現在開始,程式碼也許會很亂,但是可以廣看,也許就有用了)
先簡單瞭解下 ===== 的區別:

  • == 在使用中會先轉變為相同的資料型別,再比對
  • === 資料型別和值都要相同才返回true
console.log(1 == '1');  // true
console.log(1 === '1'); // false

console.log([] == 0);  // true
console.log([] === 0);  // false

console.log([1] == 1);  //true
console.log([1] === 1); // false
console.log([2] == 1); // false
console.log([2] === 1); // false
console.log([] == true); // false
console.log([] == false); // true

console.log([] == {});  // false
console.log(!!undefined); // false
console.log(null == false); // false
console.log(!!undefined == null); // false
console.log(undefined == null); // true
console.log(!undefined == !null); // true

console.log('' == false); // true
console.log('' == null); //  false
console.log('' == undefined); // false
console.log('true' == true); // false
console.log('false' == false); // false

好吧,目前好像就想到這麼多,以後想到再補充吧。 有一種 Boolean() 轉換成布林值的方法,下面的表格展示哪些轉換為true, 哪些轉換為false/

資料型別轉換為true的轉換為false的
Booleantruefalse
String任何非空字串“” (空字串)
Number任何非零數字(包括無窮大)0 和NaN
Object任何物件null
Undefined不適用undefined

表格裡面寫的so 清除了,我覺得我應該不需要示例來展示了。


最後一種 Null型別

null 值表示一個空物件指標,而這也是正是 typeof 操作符檢測 null 值會返回 object的原因

var c = null;
console.log(typeof c); // "object"

如果定義的變數再將來用於儲存物件,那麼最好將值初始化為null而不是其他值。

if(c != null) {
   // 對c物件執行某些操作
}

null 在做運算時,可以當0表示

console.log(null + 1);  // 1
console.log(null + null);  // 0
console.log(null + true); // 1
console.log(null*true); // 0
console.log(null + []); // null
console.log(null + {}); // null[object Object]

好了,感覺不知道該怎麼總結了,不知道能不能看得懂。反正我總結了一遍我是懂了。不懂的就自己總結一遍了哈哈哈哈哈。希望你們能看到!!!!這篇菜鳥部落格。主要就是說明下,什麼型別在什麼時候,就變成了什麼型別,什麼時候會等價。準備再些下一篇,完善下引用資料型別的知識。

相關文章