JS中一定要了解的數據類型和數據轉換

一、數據類型

前言

Js中的類型只有6種，其中基本數據類型有5種分別爲string,number,boolen,null,undefined，引用類型有一種，就是object，object是一個大的綜合體，在JS中除了那5個基本數據類型以外，其他的一切皆對象。以下是最近自學js整理的一些筆記，希望能讓更多初學者瞭解到數據類型的基本概念。

正文

1.獲取變量類型

typeof

var age = 18;
console.log(typeof age);  // 'number'

2.基本數據類型

字符串(String),數值型(number),布爾型(boolean)

<script>
    //a.字符串
    var a = "laowangba"; 
    //document.write(typeof(a));
    
    //數值
    var b = 123;
    var b1 = 123.1;---> 同樣是number類型,不要判斷兩個浮點數是否相等.
    
    //布爾型
    var c = ture;
    var d = false;
</script>

• Boolean字面量： true和false，區分大小寫
• 計算機內部存儲：true爲1，false爲0

3.複合數據類型

對象(object),數組(array object)

<script>
    //對象
    var e = {'name':'niu','age':18}; ---> 等價於PHP中class a()
   
</script>

4.其他數據類型

函數,null,undefined

<script>
    //函數類型
    var j = function(){};
    //document.write(j); ---> 這裏可能會有爭議,但typeof打印出來的確就有funcion類型
    
    //null類型
    var h = null;
    //document.write(h); ---> 空對象,對象類型中的一個分支,沒有此對象的時候會顯示null.
    //alert(document.getElementById('notExistElement')); --->顯示爲null,找不到此對象
    
    //undefined類型
    var g;
    //document.write(i); ---> 打印一個不存在的變量,定義爲undefined,未定義或者定義了,但未初始化
    
    
    //alert(null == undefined);---> 顯示結果是true
    //alert(null === undefined);---> 顯示結果是false
</script>

二、數據類的轉換

2.1 隱式轉換

隱式轉換常用於if判斷等需要直接結果的地方.

<script>
    undefined == null;  // true   
    1 == true;  // true  
    2 == true;  // false  
    0 == false;  // true
    0 == '';  // true
    NaN == NaN;  // false ---> NaN 注意:這是JS中一個特殊的表示,NaN表示不等於任何值.這個數值表示本來要返回數值的操作數未返回數值的情況（這樣就不會拋出錯誤了）。任何數值除以0都會導致錯誤而終止程序執行。一般使用isNaN()來判斷是否爲NaN類型.
    [] == false;  // true  
    [] == ![];  // true
    '6' - '3'  // 3
    1234 + 'abcd' // "1234abcd"
</script>

1. undefined與null相等,但不恆等（===）
2. 一個是number一個是string時,會嘗試將string轉換爲number
3. 隱式轉換將boolean轉換爲number,0或1
4. 隱式轉換將Object轉換成number或string,取決於另外一個對比量的類型
5. 對於0、空字符串的判斷,建議使用 “===”
6. “==”會對不同類型值進行類型轉換再判斷,“===”則不會.它會先判斷兩邊的值類型,類型不匹配時直接爲false

2.2顯示轉換

Number:

var a = Number('1');
var b = Number(1);
var c = Number('c');
var d = Number(null);
var e = Number(undefined);

console.log(a,b,c,d,e); // 1 1 NaN 0 NaN

// Number()可以把任意值轉換成數值，如果要轉換的字符串中有一個不是數值的字符，返回NaN

String:

String(1234);  // "1234"
String('abcd');  // "abcd"
String(true);  // "true"
String(undefined); // "undefined"
String(null);  // "null"

Boolean:

var a = Boolean('0');
var b = Boolean(0);
var c = Boolean('1');
var d = Boolean(null);
var e = Boolean(undefined);
var f = Boolean(NaN);

console.log(a,b,c,d,e,f); //true false true false false false

// 0、''(空字符串) 、null、 undefined 、NaN 會轉換成false  其它都會轉換成true

parseFloat:

var a = parseFloat('1.2df'); //1.2
var b = parseFloat('1.3.4'); //1.3
var c = parseFloat('c12'); //NaN
var d = parseFloat(null); //NaN
var e = parseFloat(undefined); //NaN

console.log(a,b,c,d,e); 

// parseFloat() 把字符串轉換成浮點數
// parseFloat()和parseInt非常相似，
// 不同之處在與parseFloat會解析第一個 . 遇到第二個.或者非數字結束
// 如果解析的內容裏只有整數，解析成整數

parseInt()

var a = parseInt('1.2df'); //
var b = parseInt(1);
var c = parseInt('c12');
var d = parseInt(null);
var e = parseInt(undefined);

console.log(a,b,c,d,e); //1 1 NaN NaN NaN

// 如果第一個字符是數字會解析,直到遇到非數字結束
// 如果第一個字符不是數字或者符號就返回NaN

2.3 字符串特別說明

1. 單引號和雙引號均可解析轉義字符

2. 單引號和雙引號均不能解析變量

3. 變量與字符串,變量與變量要使用+來拼接,區分開PHP

4. 單引號和雙引號可以互相嵌套,如果單引號中藥嵌套單引號,需要將單引號轉義,同理,雙引號相同

<script>
    //單引號和雙引號爲啥不能解析說明
    var a = 10;
    alert('a'); ---> 此處懵逼,到底是要輸出變量還是字符串?它不像PHP,有個$直接可以區分開變量和字符串
    alert('a'+ a);
    
    //+連接說明
    alert('hello' + 3 + 'world'); //hello3world
    alert(3 + 2 + 'hello' + 5 + 'world'); //5hello5world
    alert(4 + 4 + 'hello' + 4 + 5 + 'world'); //8hello45world  ---> 左往右連接,兩個數字會理解爲加號,直到碰見不爲數值則理解爲拼接.
</script>

如何打印一下字符串：

var s = '我很喜歡   \"雷鋒  \'的精神\'  \"';
console.log(s);

• 字符串長度

length屬性用來獲取字符串的長度

var str = 'Hello World';
console.log(str.length);