JavaScript學習筆記（一）——資料型別

雖然JavaScript是一種“弱型別”的指令碼語言，但資料本身仍屬於某種資料型別，本文對JavaScript中的資料型別作了簡要介紹。

0x01 JavaScript中的資料型別

1. ES6^[1]之前的資料型別有6種

   • Undefinrd
   • Number
   • String
   • Boolean
   • Null
   • Object

2. ES6之後添加了1種

   • Symbol

0x02 JavaScript中的typeof運算子

typeof可以在程式執行過程中動態獲取資料的資料型別。

• typeof語法格式：

  typeof 變數名

• typeof運算子的運算結果是以下6個字串之一（字母全小寫）

  “undefined”, "number", "object", "string", "fuction", "boolean"

示例：

function sum(a, b) {
    if (typeof a == "number" && typeof b == "number") {
        return a + b;
    }
}

呼叫函式：

alert(sum(1, 2));

此時瀏覽器會彈窗，結果為3

注意下面程式碼的執行結果：

var i;
alert(typeof i);//結果為undefined
var j = 10;
alert(typeof i);//結果為number
var s = "abc";
alert(typeof s);//結果為string
var k = false;
alert(typeof i);//結果為boolean
var n = null;
alert(typeof n);//結果為object!!!!!!
var obj = new Object();
alert(typeof obj);//結果為object
//對於上述定義的函式sum
alert(typeof sum);//結果為function
 

0x03 Undefined型別

Undefined型別只有一個值：undefined

當一個變數沒有賦值時，系統預設是undefined

var i;
var j = undefined;
var k = "undefined";
alert(i == j);//true
alert(i == k);//false

0x04 Number型別

Number型別包含的值：負數、整數、不是數字（Not a Number）、無窮大

例：-1,0,1,2.2，NaN Infinity

var i = -1;
var j = 0;
var k = 1;
var m = 2.2;
var n = NaN;
var q = Infinity;
alert(typeof i);//number
alert(typeof j);//number
alert(typeof k);//number
alert(typeof m);//number
alert(typeof n);//number
alert(typeof q);//number
 

什麼時候運算結果是NaN?
運算結果本來應該是一個數字，但運算結束後結果不是一個數字時結果為NaN.
例如：

var a = 10;
var b = "hello";
alert(a / b);//NaN

但是下面的程式碼結果不是NaN!

alert(a + b);

結果為10hello，這裡的+作字串拼接，而不作加法運算。

當除數為0是，運算結果為Infinity.

var a = 10;
var b = 0;
alert(a / b);//Infinity

isNaN(a)函式：

• a不是數字時運算結果為true；
• a是數字時結果為false

示例：

function sum(a, b) {
    if (isNaN(a) || isNaN(b)) {
        alert("參與運算的必須是數字！");
    }
    return a + b;
}
//呼叫
sum(10, "12");//參與運算的必須是數字！
sum(10, 12);//22

0x05 Booleanl型別

JavaScript中的Boolean型別只有兩個值：true和false

Bolean()函式：將非Boolean型別的資料轉換為Boolean型別（一般程式會自動呼叫，無需手寫）。

例如：

var username = "";
if (username) { //此處會自動呼叫Boolean()函式，轉換結果為false
    alert("Hello " + username)
} else {
    alert("使用者名稱不能為空！");//此句程式碼被執行
}

常用的Boolean()函式結果：

alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("abc"));//true
alert(Boolean(NaN));//false
alert(Boolean(null));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true

0x06 Null型別

Null型別只有一個值：null

但是，typeof null執行的結果是Object

0x07 String型別

在JavaScript中，建立字串的方式：

• 第一種：

var s = "abc";

• 第二種：

 var s = new String("abc";)

注意：String是一個內建的類，其父類是Object。

示例：

//小string（屬於原始型別String）
var s1 = "abc";
alert(typeof s1);//string
//大String（屬於Object）
var s2 = new String("abc");
alert(typeof s2);//object

小string和大String的屬性和函式通用。

• 常用的String型別的常用屬性和函式：
  1. length：返回字串的長度
  2. charAt()：返回指定位置（下標）的字元
  3. indexOf()：返回給定的字串在此字串中第一次出現處的索引
  4. lastIndexOf()：返回給定的字串在此字串中最後一次出現處的索引
  5. replace()：替換
  6. split()：拆分字串
  7. toLowerCase()：將字串字母全部轉換為小寫
  8. toUpperCase()：將字串字母全部轉換為大寫
  9. substr()：擷取指定長度的子字串
  10. substring()：擷取指定位置（左開右閉）的子字串

示例：

var s = "http://www.baidu.com";
alert(s.indexOf("http"));//0
alert(s.indexOf("https"));//-1
alert(s.charAt(3));//p
alert(s.replace("http", "https"));//https://www.baidu.com,只替換一次
alert(s.substr(2, 4));//tp:/ 表示從2開始取4個字元
alert(s.substring(2, 4));//tp 表示取位置為[2,4)的字元，不包含4

0x08 Object型別

• Object型別是所有型別的超類，自定義的任何型別，預設繼承Object.

• Object型別常用的屬性：

• prototype（最常用）：給類動態的擴充套件屬性和函式。

• constructor

• Object類包含的函式

• toString()

• valueOf()

• toLocalString()

在JavaScript中定義類的方法（和定義函式相同）：

• 第一種方法：

  function 類名(形參) {
      
  }
  

• 第二種方法：

  類名 = function(形參) {
      
  }
  

判斷一段程式碼是類還是函式具體要看怎麼使用。
例如：

function sayHello() {

}
//把sayHello當做函式
sayHello();
//把sayHello當做類
var obj = new sayHello();

在JavaScript中定義類的同時又是一個建構函式的定義

function Student(name, age) {
    this.name = name;
    this.age = age;
}

代表Student類中有兩個屬性name和age。

//建立物件
var stu = new Student("Eric", 25);
//訪問屬性
alert(stu.age);//25
alert(stu.name);//Eric
//訪問屬性的另一種語法
alert(stu["age"]);//25
alert(stu["name"]);//Eric

在類中定義函式：

Product = function(pno, pname, price) {
    //屬性
    this.pno = pno;
    this.pname = pname;
    this.price = price;
    //方法
    this.getPrice = function() {
        return this.price;
    }
}
var pro = new Product(1, "Apple", 6.0);
var pri = pro.getPrice();
alert(pri);//6.0

此外還可以通過prototype屬性給類動態擴充套件屬性和方法：

//動態擴充套件一個getName()函式
Product.prototype.getName = function() {
    return this.pname;
}
//呼叫動態擴充套件的函式
var pna = pro.getName();
alert(pna);//Apple

0x09 區分null、NaN和undefined

• 資料型別不一致

  alert(typeof null);//object
  alert(typeof NaN);//number
  alert(typeof undefined);//undefined
  

• null和undefined可以等同

  alert(null == undefined);//true
  alert(null == NaN);//false
  alert(NaN == undefined);//false
  

0x0A 區分==和===

==：等同運算子 => 只判斷值是否相等。

===：全等運算子 => 既判斷值是否相等，又判斷資料型別是否相同。

alert(null === undefined);//false
alert(null === NaN);//false
alert(NaN === undefined);//false
alert(1 == true);//true
alert(1 === true);//false

by xiaoxin_zh
2022.4.18