JavaScript基本資料型別

JavaScript基本資料型別

資料型別分類

　　Js中分為兩種資料型別，一種是基本資料型別，一種是object引用資料型別。

　　當需要去使用object引用資料型別的時候會在棧記憶體（連續儲存）中去呼叫堆記憶體（連結串列儲存）中的object引用資料型別物件，這是一個引用過程。

 

　　值型別(基本型別)：number、boolean、null、undefined、string(在賦值傳遞中會以引用型別的方式來處理)。

　　引用型別：物件、陣列、函式。

 

　　基本型別值：按值訪問，操作的是他們實際儲存的值；

　　引用型別值：按引用訪問，當查詢時，我們需要先從棧中讀取記憶體地址，然後再順藤摸瓜地找到儲存在堆記憶體中的值；

 

 

　　只有物件才有方法使用，但在Js中也可以使用值型別呼叫方法，因為它會在執行時將值型別轉為引用型別，即跑到堆記憶體中找方法。

 

型別檢測

　　Js中提供了豐富的資料型別，在實際開發工作中。要根據不同的資料型別做出不同的處理方案，那麼型別檢測就顯得尤為重要。

 

typeof

---

　　typeof 用於返回以下原始型別

 

　　number

　　string

　　boolean

　　function

　　object

　　undefined

 

　　可以使用typeof用於判斷資料的型別

<script>
​
        "use strict";
​
        let num = 100;
        let num_string = "100";
        let bool_true = true;
        let bool_false = false;
​
        function test(){};
​
        let undef;  // 未定義
​
        let dic = {"1":"一","2":"二"};
​
        console.log(typeof num);  // number
        console.log(typeof num_string);  // string
        console.log(typeof bool_true);  // boolean
        console.log(typeof bool_false);  // boolean
        console.log(typeof test);  // function
        console.log(typeof undef);  // undefined
        console.log(typeof dic);  // object
​
​
</script>

 

instanceof

---

　　instanceof 運算子用於檢測建構函式的 prototype 屬性是否出現在某個例項物件的原型鏈上。

　　也可以理解為是否為某個物件的例項，typeof不能區分陣列，但instanceof則可以。

 

<script>
​
        "use strict";
​
        let num = 100;
        let num_string = "100";
        let bool_true = true;
        let bool_false = false;
​
        function test(){};
​
​
        let dic = {"1":"一","2":"二"};
​
        console.log(num instanceof Number);  // false
        console.log(num_string instanceof String);  // false
        console.log(bool_true instanceof Boolean);  // false
        console.log(bool_false instanceof Boolean);  // false
        console.log(test instanceof Function);  // true
        console.log(dic instanceof Object);  // true
​
</script>

 

　　如果我們用簡寫的形式生成基本型別，使用instanceof進行判斷時會全部變成false。

　　但是用完整的例項化物件方式生成基本型別則會變成true。

<script>
​
        "use strict";
​
        let num = new Number(100);
        let num_string = new String("100"); 
        let bool_true = new Boolean(true);
        let bool_false = new Boolean(false);
​
        function test(){};
​
​
        let dic = {"1":"一","2":"二"};
​
        console.log(num instanceof Number);  // true
        console.log(num_string instanceof String);  // true
        console.log(bool_true instanceof Boolean);  // true
        console.log(bool_false instanceof Boolean);  // true
        console.log(test instanceof Function);  // true
        console.log(dic instanceof Object);  // true
​
</script>

 

String

　　字串型別是使用非常多的資料型別，也是相對簡單的資料型別。

 

宣告定義

---

　　使用物件形式建立字串

<script>
​
        "use strict";
​
        let object_string = new String("hello,world");
        console.log(typeof object_string);  // object
​
</script>

 

　　簡便建立字串，即使用字面量來建立。

<script>
​
        "use strict";
​
        let value_string = "hello,world";
        console.log(typeof value_string);  // string
​
</script>

 

轉義字元

---

　　有些字元有雙層含義，需要使用 \ 轉義符號進行含義轉換。

　　下例中引號為字串邊界符，如果輸出引號時需要使用轉義符號。

 

<script>
​
        "use strict";
​
        console.log("JavaScript是一門非常\'嚴格\'的語言。");
        // JavaScript是一門非常'嚴格'的語言。
​
</script>

 

　　常用轉義符號列表如下

符號	說明
\t	製表符
\n	換行
\	斜槓符號
\'	單引號
\"	雙引號R

 

連線運算子

---

　　使用 + 可以連線多個內容組合成字串，經常用於組合輸出內容使用。

<script>
​
        "use strict";
​
        console.log("JavaScript"+"是一門"+"非常優秀的語言。");
        // JavaScript是一門非常優秀的語言。
​
</script>

 

模板字面量

---

　　在JavaScript中沒有format格式化字串，但是有模板字面量。

　　你可以使用`${變數\函式\表示式}`來達到格式化字串的目的。

　　注意，不是單引號。而是`號。

<script>
​
        "use strict";
​
        let username = prompt("請輸入您的姓名:").trim();
        document.write(`歡迎您:${username}，很高興您回家..`);
​
</script>

 

　　使用函式或表示式。

<script>

        "use strict";

        function show() {

                return "雲崖先生";

        };
        
        document.write(`歡迎您:${show()}，很高興您回家..`);

</script>

 

　　另外，換行操作不會產生錯誤。會保留原樣進行輸出。

<script>

        "use strict";

        console.log(`經過周密的計算，最後結果是:
        ${1 + 2}，對這個結果滿意嗎？`);

        // 經過周密的計算，最後結果是:
        // 3，對這個結果滿意嗎？

        // 會保留原樣式

</script>

 

標籤模板

---

　　標籤模板是提取出普通字串與變數，交由標籤函式處理。

<script>

        "use strict";

        let username = "雲崖先生";
        let age = 18;

        func`使用者名稱是${username}，年齡是${age}，看的出來是個小帥哥`;

        // ... 是一種語法，可以讓形參接收多個引數。用array進行接收。和arguments有點相似,但是要定義形參名稱。
        
        function func(s, ...f) {
                console.log(s); // (3) ["使用者名稱是", "，年齡是", "，看的出來是個小帥哥", raw: Array(3)]
                console.log(f); // (2) ["雲崖先生", 18]
        };

</script>

 

獲取長度

---

　　使用length屬性可以獲取字串長度

<script>

        "use strict";

        console.log("hello,world".length); // 11

</script>

 

大小寫轉換

---

　　大寫轉換:toUpperCase()

　　小寫轉換：toLowerCase()

<script>

        "use strict";

        console.log("hello,world".toUpperCase());  // HELLO,WORLD

        console.log("HELLO,WORLD".toLowerCase());  // hello,world

</script>

 

移除空白

---

　　使用trim()可移除兩側空白。

　　使用trimLeft()刪除左邊空白。

　　使用trimRight()刪除右邊空白。

<script>

        "use strict";

        console.log("  不移除空白  ");
        console.log("  兩側空白  ".trim()); 
        console.log("  左側空白".trimLeft());
        console.log("右側空白  ".trimRight());

</script>

 

獲取單字元

---

　　索引從0開始，往後數。

　　可以使用charAt()。

　　也可使用[]。

　　使用length-1即可獲取最後一位元素，以此類推。

<script>

        "use strict";

        let str = "ABCDEFGHIJKLMN";
        // 取出C
        console.log(str[2]);
        // 取出D
        console.log(str.charAt(3));
        // 取出N
        console.log(str[str.length - 1]);
        // 取出L
        console.log(str.charAt(str.length - 3));

</script>

 

擷取子字串

---

 

方法	說明
slice()	引數1：開始索引值 引數2：結束索引值 特點：取頭不取尾
substring()	引數1：開始索引值 引數2：結束索引值 特點：取頭不取尾
substr()	引數1：開始索引值 引數2：指定獲取長度 特點：從開始索引值往後數引數2的數值-1即可

 

<script>

        "use strict";

        let str = "0123456789";
        // 取出0 1 2 3 4 取頭不取尾
        console.log(str.slice(0, 5));

        // 從2開始取，往後數五個 2 3 4 5 6 7 減去一個 2 3 4 5 6
        console.log(str.substr(2, 5));

        //  取出0 1 2 3 4  取頭不取尾
        console.log(str.substring(2, 5));


</script>

 

查詢字串

---

　　查詢字串的索引位置或給出一個布林值。

 

方法	說明
indexOf()	從開始獲取字串位置，檢測不到時返回 -1，第2個引數為從哪個位置開始查詢
lastIndexOf()	從結尾來搜尋字串位置，檢測不到時返回 -1，第2個引數為從哪個位置開始查詢
search()	用於檢索字串中指定的子字串，也可以使用正規表示式搜尋。檢測不到時返回 -1
includes()	字串中是否包含指定的值，第二個引數指查詢開始位置，返回的是一個布林值
startsWith()	是否已特定子串開頭。 引數2為查詢的位置。返回的是一個布林值
endsWith()	是否已特定子串結束。引數2為查詢的位置。返回的是一個布林值

 

<script>

        "use strict";

        let str = "01234567890123456789abcdef";

        // 從下標0的位置開始向後找
        console.log(str.indexOf("0123"));  // 0
        // 從下標3的位置開始向後找
        console.log(str.indexOf("ef", 3));  // 24
        // 找不到返回 -1
        console.log(str.indexOf("z"));  // -1

        // 從最後一位下標開始往前找
        console.log(str.lastIndexOf("9abc"));  // 19
        // 指定下標位，從下標7的位置向前找
        console.log(str.lastIndexOf("123", 7));  //  1
        // 找不到返回 -1
        console.log(str.lastIndexOf("z"));  // -1


        // 必須以f結尾
        console.log(str.search("f$"));  // 25
        // 必須以a開頭
        console.log(str.search("^a")); // -1
        // 必須以89開頭結尾是英文
        console.log(str.search("89[a-z]"));  // 18


        // 是否包含abc
        console.log(str.includes("abc")); // true
        // 是否包含zzz,從索引2向後檢索
        console.log(str.includes("zzz", 2)); // false

        // 索引2是否234開始
        console.log(str.startsWith("234", 2)); // true

        // 當前字串是否已cdef結束
        console.log(str.endsWith("cdef")); // true

</script>

 

替換字串

---

　　replace() 方法用於字串的替換操作。

　　引數1：查詢的子串

　　引數2：替換的子串

 

　　注意，預設只替換一次。

<script>

        "use strict";

        let str = "hello,world";

        let new_str = str.replace("world","Js");

        console.log(new_str); // hello，Js
  

</script>

 

重複生成

---

　　使用repeat()方法可進行重複生成。

<script>

        "use strict";

        // 生成20個星號
        console.log("*".repeat(20));

        // ********************
  
</script>

 

　　將電話號碼中間四位隱藏。

<script>

        "use strict";

        let phone = "13811112457";
        let new_phone = phone.replace(phone.slice(3, 7), "*".repeat(4));
        console.log(new_phone);

        // 138****2457

</script>

 

拆分字串

---

　　使用split()方法可將字串進行拆分，拆分結果為array型別。

<script>

        "use strict";

        let str = "hello,world";
        console.log(str.split(",")); // ["hello", "world"]

</script>

 

　　split()方法的第二個引數可以指定要拿幾次拆分，預設是都拿。

<script>

        "use strict";

        let str = "hello,wor,ld";
        // 代表拆分出來只拿前兩個，而不是都拿
        console.log(str.split(",", 2));  //["hello", "wor"]

</script>

 

合併字串

---

　　使用concat()方法可將多個字串合併為一個新的字串。

<script>

        "use strict";

        let s1 = "hello",s2 = "world";

        //      指定拼接符號    指定要拼接的字串      指定新新增的內容
        let s3 = s1.concat(",",s2,"新新增的內容");
        console.log(s3);

        // hello,world新新增的內容
        
</script>

 

型別轉換

---

　　如果想讓一個物件變為字串，可以使用Strint()將它包裹。

<script>

        "use strict";

        let num = 123321;
        let num_string = String(num);
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = String(arr);
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

　　此外，我們也可以直接物件+""完成型別轉換,，這是屬於隱式轉換。

<script>

        "use strict";

        let num = 123321;
        let num_string = num+"";
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = arr+"";
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

　　我們也可以呼叫物件下的toString()方法，來將物件轉換為string型別。

<script>

        "use strict";

        let num = 123321;
        let num_string = num.toString();
        console.log(num_string);   // 123321
        console.log(typeof num_string);  // string
        
        let arr = ["a",1,23];
        let arr_string = arr.toString();
        console.log(arr_string);   // a,1,23
        console.log(typeof arr_string);  // string

</script>

 

常用方法大全

---

 

方法	說明
length	獲取長度
大小寫轉換
toUpperCase()	大寫轉換
toLowerCase()	小寫轉換
移除空白
trim()	移除兩側空白
trimLeft()	移除左側空白
trimeRight()	移除右側空白
獲取單字元
charAt()	獲取單字元，與[]使用方法相同
擷取字串
slice()	引數1：開始索引值 引數2：結束索引值 特點：取頭不取尾
substring()	引數1：開始索引值 引數2：結束索引值 特點：取頭不取尾
substr()	引數1：開始索引值 引數2：指定獲取長度 特點：從開始索引值往後數引數2的數值-1即可
查詢字串
indexOf()	從開始獲取字串位置，檢測不到時返回 -1，第2個引數為從哪個位置開始查詢
lastIndexOf()	從結尾來搜尋字串位置，檢測不到時返回 -1，第2個引數為從哪個位置開始查詢
search()	用於檢索字串中指定的子字串，也可以使用正規表示式搜尋。檢測不到時返回 -1
includes()	字串中是否包含指定的值，第二個引數指查詢開始位置，返回的是一個布林值
startsWith()	是否已特定子串開頭。 引數2為查詢的位置。返回的是一個布林值
endsWith()	是否已特定子串結束。引數2為查詢的位置。返回的是一個布林值
替換與重複生成
replace()	用於字串的替換操作。引數1：查詢的子串 引數2：替換的子串
repeat()	重複生成的次數
合併與拆分
split()	拆分字串，拆分結果為陣列型別
concat()	合併字串，產生一個新的字串

 

方法	說明
charCodeAt()	通過index下標取出元素的Unicode編碼
anchor( )	為字串新增上a標籤
italics( )	為字串新增上i標籤
bold( )	為字串新增上b標籤

 

Boolean

　　布林型別包括 true 與 false 兩個值，是開發中使用較多的資料型別。

 

宣告定義

---

　　使用物件形式建立布林型別

<script>

        "use strict";
        console.log(new Boolean(true));  // true
        console.log(new Boolean(false));  // false
        
</script>

 

　　但建議使用字面量建立布林型別

<script>

        "use strict";
        let  status = true;
        
</script>

 

隱式轉換

---

　　基本上所有型別都可以隱式轉換為 Boolean型別。

 

資料型別	true	false
String	非空字串	空字串
Number	非0的數值	0 、NaN
Array	陣列不參與比較時	參與比較的空陣列
Object	所有物件
undefined	無	undefined
null	無	null
NaN	無	NaN

 

　　當與Boolean型別比較時，會將兩邊型別統一為數字1或0。

　　如果使用Boolean與數值比較時，會進行隱式型別轉換 true轉為1，false轉為0。

<script>
    
    "use strict";

    console.log(3 == true); //false
    console.log(0 == false); //true

</script> 

 

　　當String型別與Boolean型別做比較時，會都轉換為Number型別進行比較。

<script>

        "use strict";

        console.log(true == "1");  // true
        console.log(true > "0"); // true

</script>

 

　　陣列的表現與字串原理一樣，會先轉換為數值。

<script>

        "use strict";

        console.log(Number([]));  // 0
        console.log(Number([3]));  // 3
        console.log(Number([1, 2, 3]));  // NaN

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

</script>

 

　　引用型別的Boolean值為真，如鍵值對物件和陣列。

<script>

        "use strict";

        if ([]) { console.log("true") } else { console.log("false"); };  // true
        if ({}) { console.log("true") } else { console.log("false"); };  // true

</script>

 

 

顯式轉換

---

　　使用 !! 轉換布林型別。

 

　　首先!代表非，取反的意思。

　　如果是true則取false，如果是false則去true。這會得到一個相反的布林值。

　　再來一個!，將之前的布林值再去反。

 

<script>

        "use strict";

        console.log(!![]);  // true
        console.log(!!{});  // true
        console.log(!!"");  // false
        console.log(!!"0");  // true
        console.log(!!"1");  // true
        console.log(!!0);  // false
        console.log(!!1);  // true

</script>

 

　　使用 Boolean() 函式可以顯式轉換為布林型別

<script>

        "use strict";

        console.log(Boolean([]));  // true
        console.log(Boolean({}));  // true
        console.log(Boolean(""));  // false
        console.log(Boolean("0"));  // true
        console.log(Boolean("1"));  // true
        console.log(Boolean(0));  // false
        console.log(Boolean(1));  // true

</script>

 

Number

　　在JavaScript中，Number包含整數與小數。

 

宣告定義

---

　　使用物件方式宣告

<script>

        "use strict";

        let num_obj = new Number(100);

        console.log(typeof num_obj);  // object
        console.log(num_obj);  // Number {100}

</script>

 

　　簡便的字面量形式宣告

<script>

        "use strict";

        let num_value = 100;

        console.log(typeof num_value);  // number
        console.log(num_value);  // 100

</script>

 

型別判斷

---

　　使用isInteger()方法可判斷是否為整數。

　　返回一個布林值。

<script>

        "use strict";

        console.log(Number.isInteger(39.5));  // false

</script>

 

　　使用isNaN()方法可判斷是否為NaN。

　　返回一個布林值。

<script>

        "use strict";

        console.log(Number.isNaN(39.5));  // false

</script>

 

NaN

---

　　NaN表示無效的數值，並且不能使用 == 比較。

　　除了可以使用isNaN()方法外，也可以使用Object物件的is方法進行判定。

<script>

        "use strict";

        // NaN代表無效的數值
        let res = "兩百" / 2;
        console.log(res);
        // 使用isNaN()
        console.log(Number.isNaN(res));  // true
        // 使用Object.is()
        console.log(Object.is(res,NaN)); // true

</script>

 

浮點舍入

---

　　使用toFixed()方法對數值進行四捨五入操作，可指定保留小數點後的位數。

<script>

        "use strict";

        let float_num = 123.456;
        
        // 四捨五入，保留小數點後兩位。
        console.log(float_num.toFixed(2)); // 123.46

</script>

 

浮點精度

---

　　大部分程式語言在浮點數計算時都會有精度誤差問題，Js也不例外。

<script>

        "use strict";

        console.log(0.1+0.2); // 0.30000000000000004

</script>

 

　　這是因為計算機以二進位制處理數值型別，上面的0.1與0.2轉為二進位制後是無窮的。

<script>

        "use strict";

        console.log((0.1).toString(2)) //0.0001100110011001100110011001100110011001100110011001101
        console.log((0.2).toString(2)) //0.001100110011001100110011001100110011001100110011001101

</script>

 

　　一種方式使用toFixed()方法進行小數擷取

<script>

        "use strict";

        // 保留小數點後兩位
        console.log((0.1 + 0.2).toFixed(2));  // 0.30

</script>

 

　　也可通過一些第三方庫進行操作，下面演示decimal.js庫來進行處理。

<script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>
<script>

        "use strict";

        // 保留小數點後兩位
        console.log(Decimal.add(0.1, 0.2).valueOf()) // 0.3

</script>

 

普通轉換

---

　　使用Number()函式包裹住需要轉換的物件。

　　基本上所有的資料型別都能轉換為Number型別，區別是有的會轉換為有效數值，有的會轉換為NaN即無效數值。

<script>

        "use strict";

        console.log(Number('hello')); //NaN
        console.log(Number(true));    //1
        console.log(Number(false));    //0
        console.log(Number('99'));    //99
        console.log(Number([]));    //0
        console.log(Number([51]));    //51
        console.log(Number([5, 2]));    //NaN
        console.log(Number({}));    //NaN

</script>

 

　　我們也可以使用算術運算子進行隱式轉換。

<script>

        "use strict";

        let str = "123";
        let res = str * 1;
        console.log(res); // 123
        console.log(typeof res); // number

</script>

 

強制轉換

---

　　如果一個String即包含數字又包含其他字元，可使用強制轉換。

 

方法	說明
parseInt()	提取字串開始去除空白後的數字轉為整數。
parseFloat()	轉換字串為浮點數，忽略字串前面空白字元。

 

<script>

        "use strict";

        let str = " 123.4這是一個字串"
        // 強制轉換為整數
        console.log(parseInt(str));  // 123
        // 強制轉換為小數
        console.log(parseFloat(str));  // 123.4

</script>

 

undefined

　　undefined更多代表的是未定義。

 

　　第一種情況：定義好變數 但是未進行賦值

<script>

        "use strict";

        let num;
        console.log(num);  // undefined

</script>

 

　　第二種情況：函式無返回值

<script>

        "use strict";

        function test() {
                console.log("執行了...");
        };

        let res = test();
        console.log(res);  // undefined

</script>

 

null

　　表示未存在的物件。如果函式或方法要返回的是物件，那麼找不到該物件時，返回的通常是 null。    

<script>

        "use strict";

        let n = null;  // null代表未引用任何物件,也就是為被例項化。此時它所屬object物件
        let a = [];  // 雖然是一個空陣列，但是它是Array的例項物件

        console.log(n);  // null
        console.log(a);  // []

        console.log(typeof n);  // object
        console.log(typeof a);  // object

</script>

 

　　在ECMA中，認為null與undefined是相等的。

　　並且值undefined是值null派生出的。