JavaScript學習之資料型別(1)

weixin_34378969發表於2019-01-12

1.簡介

JavaScript 的資料型別有6種

  • 數值(number):整數和小數(比如1和3.14)
  • 字串(string): 文字(比如Hello World)。
  • 布林值(boolean): 即* true(真)和false(假)
  • undefined: 表示“未定義”或不存在
  • null: 表示空值,即此處的值為空。
  • 物件(object): 各種值組成的集合。

1.數值,字串,布林值這三種型別,全稱為原始型別(primitive type)的值,不可再細分
2.物件則稱為合成型別(complex type)的值,
3.undefinednull,特殊值

JavaScript 有三種方法,可以確定一個值到底是什麼型別。分別是typeof運算子,instanceof運算子,Object.prototype.toString方法

typeof 123 //"number"
typeof abc //"undefined" 因為abc沒有未定義
typeof 'abc' //"string"
typeof false //"boolean"
typeof null //"object"

2.null 和 undefined

1.型別不一樣:
console.log(typeOf undefined);//undefined
console.log(typeOf null);//object

2.轉化為值時不一樣:undefined為NaN ,null為0
console.log(Number(undefined));//NaN
console.log(Number(10+undefined));//NaN
console.log(Number(null));//0
console.log(Number(10+null));//10

3.比較
undefined === null;//false
undefined == null;//true

3.布林值(boolean)

真用true表示,假用false表示
false,undefined,null,0,NaN,""''(空字串) 這幾個值都會被轉換為false
空陣列([])和空物件({})對應的布林值,都是true

4.數值(number)

JavaScript內部所有的數字都是以64位浮點數形式儲存,因此

1 === 1.0 //true

JavaScript 浮點數在計算中要注意精度問題

0.1 + 0.2 == 0.3 // false
0.3 / 0.1 //2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1) //false

4.1數值的精度

JavaScript 浮點數的64個二進位制位,從最左邊開始

  • 第1位:符號位,0表示正數,1表示負數
  • 第2位到第12位(共11位):指數部分
  • 第13位到第64位(共52位):小數部分(即有效數字)

符號位決定了一個數的正負,指數部分決定了數值的大小,小數部分決定了數值的精度,指數位有11個二進位制位,因此通過Math.pow(2,11)可算出範圍是0~2047, IEEE 754 規定,如果指數部分的值在0~2047之間(不含兩個端點,那麼有效數字的第一位預設總是1,也就是說,有效數字這時總是1.xx...xx的形式,其中xx..xx的部分儲存在64位浮點數之中,最長可能為52位。因此,JavaScript 提供的有效數字最長為53個二進位制位。

公式
(-1)^符號位 * 1.xx...xx * 2^指數部分

因此JavaScrip能夠表示的數的精度範圍是-2^53 到2^53

Math.pow(2, 53) // 9007199254740992 
Math.pow(2, 53) + 1 // 9007199254740992 精度不準
Math.pow(-2, 53) //-9007199254740992 
Math.pow(-2, 53) - 1 //-9007199254740992 精度不準

4.2 數值範圍

64位浮點數的指數部分的值最大為2047,正負數各佔一半,因此JavaScript 能夠表示的數值範圍為2^1024 ~ 2^-1023(開區間),如果一個數大於等於2的1024次方,就會發生“正向溢位”,返回值為Infinity

Math.pow(2, 1024) // Infinity

如果一個數小於等於2的-1024次方,就會發生“逆向溢位”,返回值為0

Math.pow(2, -1075) // 0
Number.MAX_VALUE //1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

4.3數值的表示法

當以下兩種情況時,JavaScript會自動轉化為科學計數法

  • 小數點前的數字多餘21個
1234567890123456789012   //輸出 1.2345678901234568e+21

123456789012345678901   //輸出 123456789012345680000
  • 小數點後的零多於5個
0.0000001 // 1e-7
0.000001 //0.000001

4.4數值的進位制

  • 十進位制:我們平時正常用的數字
  • 二進位制:字首0b0B
  • 八進位制:字首0O0o 或者只用了前導0,且只用了0~7的八個阿拉伯數字
  • 十六進位制:字首0x0X

4.5特殊數值

4.5.1 正零和負零

除了正零和負零做分母的時候值不同,其他時候正零和負零是一樣的

(1 / +0) === (1 / -0) // false

是因為除以正零得到+Infinity,除以負零得到-Infinity,這兩者是不相等的

4.5.2 NaN

NaN是特殊值,表示"非數字"(Not a Number)

5 - 'x' // NaN

0除以0也會得到NaN

0 / 0 // NaN

NaN不等於任何值,包括它本身。

NaN === NaN // false

NaN在布林值中是false
NaN在與任何數(包括他自己)運算時都顯示的是NaN

4.5.3 Infinity

Infinity有正負之分,Infinity表示正的無窮,-Infinity表示負的無窮
Infinitynull計算時,null會轉成0,等同於與0的計算。
Infinityundefined計算,返回的都是NaN。

Math.pow(2, 1024) // Infinity
0 / 0 // NaN
1 / 0 // Infinity
Infinity === -Infinity // false
1 / -0 // -Infinity
-1 / -0 // Infinity

4.6.與數值相關的全域性方法

4.6.1 parseInt()

將字串轉為整數。

parseInt('123') // 123

如果字串頭部有空格,空格會被自動去除。

parseInt('   123') // 123

如果parseInt的引數不是字串,則會先轉為字串再轉換。

parseInt(1.23) // 1
// 等同於
parseInt('1.23') // 1

字串轉為整數的時候,是一個個字元依次轉換,如果遇到不能轉為數字的字元,就不再進行下去,返回已經轉好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

如果字串的第一個字元不能轉化為數字(後面跟著數字的正負號除外),返回NaN

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以,parseInt的返回值只有兩種可能,要麼是一個十進位制整數,要麼是NaN

parseInt方法還可以接受第二個引數(2 ~ 36)之間的整數,表示被解析的值的進位制,返回該值對應的十進位制數,如果超出這個範圍,則返回NaN。如果第二個引數是0undefinednull,則直接忽略。

parseInt('100') // 100
// 等同於
parseInt('100', 10) // 100

parseInt('100', 2) // 4  二進位制數100轉化成十進位制數 結果為4
parseInt('100', 6) //36
parseInt('100', 8) // 64

如果字串包含對於指定進位制無意義的字元,則從最高位開始,只返回可以轉換的數值。如果最高位無法轉換,則直接返回NaN。

parseInt('1234', 2) // 1 
parseInt('234', 2) // NaN

4.6.2 parseFloat()

將字串轉為浮點數

parseFloat('3.14') // 3.14
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字串包含不能轉為浮點數的字元,則不再進行往後轉換,返回已經轉好的部分。

parseFloat('8.88lalala') // 8.88
parseFloat('\t\v\r12.34\n ') // 12.34

如果引數不是字串,或者字串的第一個字元不能轉化為浮點數,則返回NaN。

4.6.3 isNaN()

判斷一個值是否為NaN
isNaN只對數值有效,如果傳入其他值,會被先轉成數值

isNaN(NaN) // true 
isNaN(123) // false

isNaNtrue的值,有可能不是NaN,而是一個字串

isNaN('Hello') // true
// 相當於
isNaN(Number('Hello')) // true

對於物件和元素為字元的陣列,isNaN也返回true

isNaN({}) // true
// 等同於
isNaN(Number({})) // true

isNaN(['xzy']) // true
// 等同於
isNaN(Number(['xzy'])) // true

對於空陣列和只有一個數值成員的陣列,isNaN返回false,因為這些陣列能被Number函式轉成數值

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

判斷NaN的方法

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

//更可靠
function myIsNaN(value) {
  return value !== value;
}

4.6.4 isFinite()

表示某個值是否為正常的數值,返回一個布林值.

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaNundefined這幾個值會返回falseisFinite對於其他的數值都會返回true

5 字串

字串就是零個或多個排在一起的字元,放在單引號或雙引號之中

'I like China'
'It's a sunny day'
'key = "value"' //key = "value"

單引號中用單引號,要使用'\'轉義,雙引號同理

'she is so \'sad\''     //she is so 'sad'
"she is so \"sad\""    //she is so "sad"

字串預設只能寫在一行內 分成多行將會報錯

' a
b
' //Uncaught SyntaxError: Invalid or unexpected token

如果要換行寫,則可以在每一行的尾部使用反斜槓
'a \
b \
c \ ';  //a b c

連線運算子(+)可以連線多個單行字串

console.log('a' + 'b' + 'c')  //abc

如果想輸出多行字串,有一種利用多行註釋的變通方法

(function () { /*
a
b
c
*/}).toString().split('\n').slice(1, -1).join('\n')
//"a
//b
//c"

字串可以被視為字元陣列

var a = 'hello'
a[1]  // e

如果方括號中的數字超過字串的長度,或者方括號中根本不是數字,則返回undefined

a[10]  //undefined  
a['x'] //undefined

length屬性

a.length //5

Base64 轉碼

JavaScript 原生提供兩個 Base64 相關的方法。這兩個方法不適合非 ASCII 碼的字元,會報錯
btoa():任意值轉為Base64編碼
atob()Base64 編碼轉為原來的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

btoa('你好') // 報錯

要將非 ASCII 碼字元轉為Base64 編碼,必須中間插入一個轉碼環節,再使用這兩個方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

參考連結:https://wangdoc.com/javascript/types/index.html

相關文章