03-JavaScript基礎—資料型別
文章配套視訊
資料
資料是指所有能輸入到計算機並被計算機程式處理的符號的介質的總稱，是具有一定意義的數字、字母、符號和模擬量等的通稱。
資料型別
為什麼會有資料型別？
var a = 10;
var b = '10';
思考：變數名a 和 變數名b 儲存的資料是否一樣？
JS中常用的資料型別
程式在執行過程中會產生各種各樣的臨時資料,
為了方便資料的運算和操作, JavaScript對這些資料進行了分類,
提供了豐富的資料型別；
在JavaScript中一共有六種資料型別：
JS中如何檢視資料型別?
typeof 操作符
會將檢查的結果以字串的形式返回給我們
console.log(typeof 100); // number var name = "旋之華"; console.log(typeof name ); // string
數字型別（Number）
1: 最基本的資料型別
2: 不區分整型數值和浮點型數值
3: 能表示的最大值是±1.7976931348623157乘以10的308次方
能表示的最小值是±5 乘以10的-324次方
4：包含十六進位制資料，以 0x開頭 0到9之間的數字，a(A)-f(F)之間字母構成。 a-f對應的數字是10-15
5： 八進位制直接以數字0開始，有0-7之間的數字組成。
在JS中所有的數值都是Number型別(整數和小數) var num1= 123; var num2= 3.14; console.log(typeof num1); // number console.log(typeof num2); // number 由於記憶體的限制，ECMAScript 並不能儲存世界上所有的數值 // 最大值：Number.MAX_VALUE console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 // 最小值：Number.MIN_VALUE console.log(Number.MIN_VALUE); // 5e-324 // 無窮大：Infinity, 如果超過了最大值就會返回該值 console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity // 無窮小：-Infinity, 如果超過了最小值就會返回該值 console.log(typeof Infinity); // number console.log(typeof -Infinity); // number
NaN 非法數字（Not A Number）
JS中當對數值進行計算時沒有結果返回，則返回NaN
var str = NaN;
console.log(typeof str ); // number
Number型別注意點
// JS中整數的運算可以保證精確的結果
var counter = 120 + 20;
console.log(counter ); // 140
// 在JS中浮點數的運算可能得到一個不精確的結果
var counter = 100.1 + 20.1;
console.log(counter ); // 120.200000000000003
字串型別（string）
字串由單引號或雙引號括起
例如單獨一個字母也被稱為字串（例如：‘a’）
" ’
使用字串注意事項
// 正常的情況
var str1 = "hello";
var str2 = `world`;
console.log(typeof str1 ); // string
console.log(typeof str2); // string
// 不能一單一雙，必須成對出現
var str3 = `hello world"; // 錯誤
// 相同引號不能巢狀，不同引號可以巢狀
var str3 = "hello "world""; // 錯誤
var str4 = `hello `world``; // 錯誤
var str5 = "hello 'world'"; // 正確
var str6 = `hello "world"`; // 正確
布林型別（Boolean）
布林型也被稱為邏輯值型別或者真假值型別
布林型只能夠取真（true）和假（false）兩種數值, 也代表1和0，實際運算中true=1,false=0
var bool1 = true;
var bool2 = false;
console.log(typeof bool1); // boolean
console.log(typeof bool2); // boolean
雖然Boolean 型別的字面值只有兩個，但 ECMAScript 中所有型別的值都有與這兩個 Boolean 值等價的值
任何非零數值都是true, 包括正負無窮大, 只有0和NaN是false
任何非空字串都是true, 只有空字串是false
任何物件都是true, 只有null和undefined是false
var bool = Boolean(0);
console.log(bool ); // false
var bool = Boolean(1);
console.log(bool ); // true
var bool = Boolean(-1);
console.log(bool ); // true
var bool = Boolean("hello");
console.log(bool); // true
var bool = Boolean("");
console.log(bool ); // false
var bool = Boolean(undefined);
console.log(bool ); // false
var bool = Boolean(null);
console.log(bool8); // bool
Null和Undefined
Undefined這是一種比較特殊的型別，表示變數未賦值，這種型別只有一種值就是undefined
var num;
console.log(num); //結果是undefined
undefined是Undefined型別的字面量
前者undefined和10, "abc"一樣是一個常量
後者Undefined和Number,Boolean一樣是一個數據型別
需要注意的是typeof對沒有初始化和沒有宣告的變數都會返回undefined。
var str1 = undefined;
console.log(typeof str1 ); //結果是undefined
var str2;
console.log(typeof str2); //結果是undefined
Null 型別是第二個只有一個值的資料型別，這個特殊的值是 null
從語義上看null表示的是一個空的物件。所以使用typeof檢查null會返回一個Object
var test1= null; console.log(typeof test1);
undefined值實際上是由null值衍生出來的，所以如果比較undefined和null是否相等，會返回true
var str1 = null; var str2 = undefined; console.log(str1 == str12); console.log(str1=== str2);
資料型別轉換
什麼是資料型別轉換
將一個數據型別轉換為其他的資料型別, 比如: 將String型別轉換為Number型別, 將Number型別轉換為Boolean型別… …
toString()
將其它型別的資料轉換為字串型別
var num = 12306;
var str= num .toString();
console.log(str); // 12306
console.log(typeof str); // string
var num1 = true;
var str1 = num1.toString();
console.log(str1 ); // true
console.log(typeof str1 ); // string
注意:null和undefined沒有toString()方法，如果強行呼叫,則會報錯
var num2 = undefined;
var str2 = num2.toString(); // 報錯
console.log(str2 );
var num3 = null;
var str3= num3.toString(); // 報錯
console.log(res4);
var num4 = NaN;
var str4 = num4.toString();
console.log(str4); // NaN
console.log(typeof str4); // String
toString()不會影響到原變數，它會將轉換的結果返回
var num5 = 10;
var str5 = str5.toString();
console.log(typeof num5 ); // number
console.log(typeof str5 ); // string
String()函式
有的時候, 某些值並沒有toString()方法，這個時候可以使用String()。比如：undefined和null
Number和Boolean的資料就是呼叫的toString()方法
對於null和undefined，就不會呼叫toString()方法, 因為沒有這個方法, 會在內部生成一個新的字串
+
任何資料和 + 連線到一起都會轉換為字串,
其內部實現原理和String()函式一樣
var num1 = 100;
var res1 = num1 + "";
console.log(res1); // 100
console.log(typeof res1); // string
var num2 = true;
var res2 = num2 + "";
console.log(res2); // true
console.log(typeof res2); // string
var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string
var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string
Number()函式
字串 轉 數字
如果是純數字的字串，則直接將其轉換為數字
var str1 = "666";
var res1 = Number(str1);
console.log(res1); // 666
console.log(typeof res1); // number
符串中有非數字的內容，則轉換為NaN
var str2 = "itlike123";
var res2 = Number(str2);
console.log(res2); // NaN
如果字串是一個空串或者是一個全是空格的字串，則轉換為0
var str3 = "";
var res3 = Number(str3);
console.log(res3); // 0
var str4 = " ";
var res4 = Number(str4);
console.log(res4); // 0
```
undefined 轉 數字
var str6 = undefined;
var res8 = Number(str6);
console.log(res8); // NaN
null 轉 數字
var str5 = null;
var res7 = Number(str5);
console.log(res7); // 0
布林 轉 數字
true 轉成 1, false 轉成 0
var bool1 = true;
var res5 = Number(bool1);
console.log(res5); // 1
var bool2 = false;
var res6 = Number(bool2);
console.log(res6); // 0
parseInt()函式和parseFloat()函式
Number()函式中無論混合字串是否存在有效整數都會返回NaN, 利用parseInt()/parseFloat()可以提取字串中的有效整數
parseInt()和parseFloat()的區別是前者只能提取整數,後者可以提取小數
parseInt()提取字串中的整數
從第一位有效數字開始, 直到遇到無效數字
如果第一位不是有效數字, 什麼都提取不到, 會返回NaN
- 第一個引數是要轉換的字串，第二個引數是要轉換的進位制
var str7 = "300px";
var res9 = parseInt(str7);
console.log(res9); // 300
var str8 = "300px250";
var res10 = parseInt(str8);
console.log(res10); // 300
console.log(parseInt("abc123")); //返回NaN，如果第一個字元不是數字或者符號就返回NaN
console.log(parseInt("")); //空字串返回NaN，Number("")返回0
parseFloat提取字串中的小數
//會解析第一個. 遇到第二個.或者非數字結束
// 如果第一位不是有效數字, 什麼都提取不到
//不支援第二個引數，只能解析10進位制數
//如果解析的內容裡只有整數，解析成整數
var str9 = "20.5px";
var res11 = parseInt(str9);
console.log(res11); // 20
var str10 = "20.5.5.5px";
var res12 = parseFloat(str10);
console.log(res12); // 20.5
對非String使用parseInt()或parseFloat(),
會先將其轉換為String然後在操作
var str11 = true;
var res13 = parseInt(str11); // 這裡相當於parseInt("true");
console.log(res13); // NaN
var res14 = Number(str11);
console.log(res14); // 1