JS基本引用類型

JS的語法簡單，如果你有 C++ 或者是 Java 等其他面嚮對象語言的基礎，那麼再來學習 Js 可以說是小菜一碟。

這篇文章主要講解的是 JS 的一些基礎引用類型(類似於 Java中的類的概念，但是 JS 中並沒有類這一說法，我們稱之爲引用類型).主要包含以下幾個方面：

• Object類型
• Array類型
• 包裝類型(主要有 String、Number、Boolean 類型)
• Function類型
• Date類型
• RegExp類型 （後面詳細介紹）

Object類型

一些基本的類型都是 Object 類型，比如我們創建的任一個基本的對象，都屬於 Object 型對象,一個數組對象也是一個 Object 對象，所以在使用 typeof 操作符的時候檢測是不是 Array 對象使用 typeof就不行了，例如：

var arr = [1, 2, 3, 4, 5];
console.log(typeof arr); //輸出是Object,不能檢測出具體的引用類型

所以就出現了另一個操作符： instanceof, 使用方法是 object instanceof constructor,其中 object 是某個實例對象，constructor 是某個構造函數。

var arr = [1, 2, 3, 4, 5];
console.log(arr instanceof Array); //輸出true

1.創建對象
創建對象有兩種方法： 構造函數(new操作符) 和 字面量表示

構造函數創建對象

var person = new Object();
person.name = "悟空";
person.age = "18";
console.log(person); //輸出：Object { name: "悟空", age: "18" }

使用字面量方法創建對象

var person {
    name: "悟空",
    age : 18 //主要這裏不加逗號
};
console.log(person); //輸出：Object { name: "悟空", age: "18" }

一般使用的是第二種方法：對象字面量的方法來創建對象，給人一種封裝的感覺。也是向函數傳遞大量可選參數的首選方式。

2.訪問對象屬性和方法
訪問對象的屬性時一般有兩種方法：點表示法 和 方括號加屬性名。

console.log(person.name); //點表示法
console.log(person.age);

console.log(person["name"]);//方括號法
console.log(person["age"]);

---

Array類型

數組類型。每一項都可以存儲任意類型的值。
Array類型封裝了大量的接口方法供用戶使用，比如有：棧方法、隊列方法、排序方法、操作方法、位置方法、迭代方法等。
1.創建數組對象

使用Array()構造函數創建對象：

var arr = new Array();//創建一個空數組對象
var arr = new Array(10);//創建一個10個項目的對象
var arr = new Array(1, 2, 3, 4, 5);//創建具有指定項的數組對象

使用字面量的方法創建對象

var arr = [];//創建的是空數組對象
var arr = [1, 2, 3, 4, 5];//創建指定的對象
var colors = ["red", "green", "blue"];

一般也是選用字面量的方法創建對象。

數組可以存放任意類型的值

var arr = [1, 2, "red", "green", "blue", true, false, [1, "color", true], {name: "悟空", age: 18}]
//該數組存放了數字、字符串、布爾值、數組和對象

2.訪問數組元素
訪問數組元素使用的是索引（和其他語言一樣）

var arr = [1, 2, "red", "green", "blue", true, false, [1, "color", true], {name: "悟空", age: 18}]

console.log(arr[0]); //輸出:1
console.log(arr[2]);//輸出:red
console.log(arr[7]);//輸出:數組[1, "color", true]
console.log(arr[8]);//輸出：對象{name: "悟空", age: 18}

3.棧方法

棧方法就是使用類似於數據結構中的棧來操作數組。
使用的方法是： push() 和 pop()。
push() : 在數組的末尾添加一個元素，返回數組中添加後的個數。
pop() : 彈出數組的末尾元素，返回彈出的元素。

var colors = ["red", "green", "blue"];
var len = colors.push("white");
console.log(len);//輸出：4
console.log(colors);//輸出： 數組對象["red", "green", "blue", "white"]
var e = colors.pop();
console.log(e);//輸出：white
console.log(colors);//輸出：數組對象["red", "green", "blue"]

4.隊列方法

隊列方法就是使得數組的操作類似數據結構中的隊列操作。
使用的方法是： push() 和 shift()。
push() : 在數組的末尾添加一個元素，返回數組中添加後的個數。和棧方法中的 push() 方法一樣。
shift : 彈出數組的第一個元素，返回彈出的元素。

var colors = ["red", "green", "blue"];
var len = colors.push("white");
console.log(len);//輸出：4
console.log(colors);//輸出： 數組對象["red", "green", "blue", "white"]
var e = colors.shift();
console.log(e);//輸出： red
console.log(colors);//輸出：數組對象["green", "blue", "white"]

5.位置方法

位置方法用於查找某一元素在數組中的索引位置。
方法是： indexOf 和 lastIndexOf。
indexOf : 從前往後找，即返回第一次找到的位置；
lastIndexOf : 從後往前找，即返回最後一次找到的位置。

var arr = ["a", "b", "c", "d", "b"];
var index = arr.indexOf("a");
var index2 = arr.indexOf("b");
var lindex3 = arr.lastIndexOf("b");
console.log(index);//輸出：0
console.log(index2);//輸出：1
console.log(index3);//輸出：4

6.其他操作方法

其他操作方法指的是類似於字符串的常用操作，拼接數組操作和截取部分位置數組操作。
方法主要有：concat、slice 和 splice。

concat拼接數組

var arr1 = [1, 2, 3];
var arr2 = ["red", "green", "blue"];
var arr3 = arr1.concat(arr2);
console.log(arr3);//輸出:Array(6) [ 1, 2, 3, "red", "green", "blue" ]

或者也可以用於直接添加一個或多個元素，也相當於拼串：

var arr1 = [1, 2, 3];
var arr2 = arr1.concat("red", true);
console.log(arr2);//輸出:Array(5) [ 1, 2, 3, "red", true ]

slice截取數組
使用 slice 方法可以用來截取數組。
該方法可以接受一個或兩個參數：

• 若爲一個參數，表示截取從該參數開始到整個數組結束；
• 若爲兩個參數，表示截取的是從第一個參數的元素開始到第二個參數之前的元素之間的所有元素。返回值都是截取後的數組。

splice刪除元素或者添加元素
splice 是數組中功能最強大方法。可用來刪除元素也可用來添加元素。

• 如果有兩個參數，則代表刪除元素，意味着保留的開始及要保留的元素個數；
• 如果第二個參數等於0，表示刪除0個元素，如果後邊有其他值，則代表的是添加元素，第一個位置代表的是在指定的位置添加。

注意:該方法的返回值是被刪除的元素的新組成的數組

使用 slice 刪除元素：

var colors = ["red", "green", "blue"];
var c1 = colors.splice(1, 2);
console.log(colors);//輸出: Array [ "green", "blue" ]
console.log(c1);//輸出: [ "green", "blue" ]

使用 slice 在指定的位置添加元素：

var colors = ["red", "green", "blue"];
colors.splice(1, 0, "white", "black");
console.log(cols);//輸出:Array(4) [ "red", "white", "black", "blue" ]

7.排序算法

JS 封裝了對數組進行排序的API。
使用的方法有： reverse() 和 sort()。

• reverse() : 數組逆序排列；
• sort() : 默認是按照從小到大進行排序，但是對字符串數組有點需要注意的地方。對字符串是按照字符編碼逐個字符進行比較。
• “200” < “3”, 因爲是字符串比較，所以是逐個字符比，‘2’ < ‘3’,所以 “200” < “3”，所以一般我們傳入一個函數，叫做比值函數。

reverse()方法

var colors = ["red", "green", "blue"];
var nums = [1, 2, 3, 4, 5];
colors.reverse();
nums.reverse();
console.log(colors);//輸出： Array(3) [ "blue", "green", "red" ]
console.log(nums);//輸出： Array(5) [ 5, 4, 3, 2, 1 ]

默認的sort()方法

var colors = ["red", "green", "blue"];
var numStr = ["100", "2", "3", "250", "99"];
colors.sort();
numStr.sort();
console.log(colors);//輸出 ： Array(3) [ "blue", "green", "red" ]
console.log(numStr);//輸出 ： Array(5) [ "100", "2", "250", "3", "99" ]
//很明顯是對於數值型的字符串，排序並不正確

在sort()中自定義比值函數
比值函數的目的是定義另一種排序順序。

比值函數應該返回一個負，零或正值，這取決於參數：

function(a, b) { return a - b; }

當 sort() 函數比較兩個值時，會將值發送到比較函數，並根據所返回的值（負、零或正值）對這些值進行排序。

Date類型

ECMAScript 中的 Date 類型是在早期的 Java.util.Date 類的基礎上構建的。

1.創建對象

• 不加任何參數創建對象，表示的是當前時間對象。

var date = new Date();
console.log(date);//輸出：Date Fri Mar 27 2020 21:33:13 GMT+0800 (中國標準時間)，這是我寫博客的時間。

• 傳入參數，根據參數創建響應的日期時間對象。
  接受一個字符串參數，該字符串有多種寫法：

//字符串的第一種寫法
var date = new Date("03/27 2020 21:38:00");
console.log(date);//輸出：Date Fri Mar 27 2020 21:38:00 GMT+0800 (中國標準時間)
//字符串的第二種寫法
//"英文星期幾 英文月名 日 年 時：分：秒 時區"
var date2 = new Date(Friday March 27 2020 21:42:0 GMT+0800);
console.log(date2);
//輸出：Date Fri Mar 27 2020 21:42:00 GMT+0800 (中國標準時間)

2.常用的方法

• getDate() : 返回一個月的某一天(1~31)
• getDay() : 返回一個星期的某一天(0~6)，0是週日，6是週六
• getMonth() : 返回月份，注意是(0~11)
• getFullYear() : 返回年份
• getHours : 返回小時
• getMinutes : 返回分鐘
• getSeconds : 返回秒數
• getTime() : 返回時間戳，自從1970年1月1日至今的毫秒數

var date = new Date("03/27 2020 21:52:00");
console.log(date.getDate());//輸出：27
console.log(date.getDay());//輸出：5
console.log(date.getMonth());//輸出：2
console.log(date.getFullYear());//輸出：2020
console.log(date.getHours());//輸出：21
console.log(date.getMinutes());//輸出：52
console.log(date.getSeconds());//輸出：0
console.log(date.getTime());//輸出：1585317120000

Date類型掌握這些基本的方法就可以了，這不是重點。

Function類型

JS 中萬物皆是對象，基本的變量是對象，Date類型的實例是對象。所以函數也可以看做是對象。
1.創建對象

既然函數可以看做是對象，所以就可以使用 new 操作符來創建 Function 對象。

var fun = new Function("console.log('HelloWorld！')");
fun(); //輸出：HelloWorld！

一般不使用 new ,而是使用一下兩種方法：

function fun(paremeter...) {
   
} 

或者是創建一個匿名函數然後賦值給一個變量：

var fun = function(paremeter...) {

}

最後一種方法最常用。

2.函數的參數
在函數的內部有兩個特殊的對象： arguments 和 this。

其中 arguments 是一個類數組對象，但並不是數組，它包含着傳入函數中的所有參數。

既然是對象，就會有相應的屬性和方法。

• 類數組的屬性：
• length : 返回實際傳入的實參的數量；
• callee : 該屬性返回的是當前函數對象。
• 可以使用索引獲得相應的參數。

var fun = function(a, b) {
   console.log(arguments.length);
}
fun(1, 2，3);//輸出：2
fun(1);//輸出：1
fun(1, 2, 3);//輸出：3
//雖然函數定義的是需要兩個參數，但是可以傳多個實參或者更少實參

var fun = function(a, b) {
   console.log(arguments.callee == fun);
}
fun(1,2); //輸出：true。
//也就是說，aruguments.callee就是fun對象。

3.函數的屬性和方法
既然函數是對象，所以函數也有屬性和方法。

屬性有兩個：length 和 prototype。

• length : 該屬性表示函數希望接收的參數的個數（也就是形參的個數，與上述的 arguments 對象並不一樣）。如下面的粒子所示：

function sayName(name) {
   console.log(name);
}

function sum(num1, num2) {
   return num1 + num2;
}

function sayHi() {
   console.log("Hi");
}

console.log(sayName.length);//輸出：1
console.log(sum.length);//輸出：2
console.log(sayHi.length);//輸出：0

• prototype : 該屬性是保存它們實例方法的真正所在。換句話說，實際上， toString() 和 valueOf() 等方法實際上都保存在 prototype 名下。

每個函數對象都包含兩個非繼承而來的方法：call() 和 apply()。這兩個方法的用途都是在特定的作用域內調用函數，實際上等於設置函數體內的 this 值。

• 兩個函數的區別
  首先這兩個函數的作用相同，都是用來改變函數的作用域。只看不過是形參不同。

• apply() ： 該方法接受兩個參數，一個參數是指定運行的作用域，另一是參數數組。其中第二個參數可以是 Array 的實例，也可以是 arguments 對象。例如：

  function sum(num1, num2) {
   return num1 + num2;
  }
  function callSum1(num1, num2) {
     return sum.apply(this, arguments);
  }
  function callSum2(num1, num2) {
     return sum.apply(this, [num1, num2]);
  }
  

• call() 方法和 apply() 的不同之處在於沒有第二個參數，只需要指定函數的作用域(也就是第一個參數)。

• 兩個函數的真正用武之地在於擴充函數的作用域。例如：

  windows.color = "red";
  var obj = {
     color: "blue"
  };
  function sayColor() {
     console.log(this.color);
  }
  sayColor.call(this);//輸出：red
  sayColor.call(window);//輸出：red.因爲this == window
  sayColor.call(obj); //輸出：blue
  

基本的包裝類型

首先要明白基本的包裝類型的作用。
在JS中有五種基本的數據類型，分別是 null、undefined、Number、String 和 Boolean 類型；

既然是基本類型，爲什麼字符串會有屬性和方法呢？比如 length 屬性，比如 index() 方法。

其實這就是包裝類，每當讀取一個基本的數據類型的時候就會創建一個對應的基本包裝類型的對象。又稱爲臨時對象(類似於Java中的裝箱和拆箱，也就是說，Number、String 和 Boolean 這三個類型的變量都可以看做是對象進行操作，所以具有了屬性和方法)。

var str = "Hello World!" //這是一個String類型變量
//中間的過程中實際上解析器把它包裝成了一個String類型的對象。
console.log(str.length);//所以具有屬性和方法,但是使用方法結束後，就又變成了一個string變量
console.log(typeof str);//輸出：string

而使用 new 操作符創建一個對象的時候:

//真正的創建一個String對象，該對象在環境中始終存在
var str = new String("Hello World!");
console.log(str.length); //跟上面的一樣使用
console.log(typeof str); //輸出：Object

所以一般我們不適用包裝類創建對象，因爲即使是一個變量，解析器在適當的時候回自動的會我們進行包裝( Java 中叫裝箱 )， 我們就可以使用屬性和方法了。使用完成後就會立即拆掉包裝( Java 中叫拆箱 )。

String類型

基本的包裝類有三個 Boolean、Number 和 String，使用最多的就是 String 類型了。因爲我們經常使用其屬性和方法。
1.字符方法
可以獲取字符串在指定位置處的字符或字符編碼。

方法是：charAt 和 charCodeAt。

• charAt ：以單字符字符串的形式返回指定位置的字符。注：返回的仍然是字符串，因爲JS中沒有字符類型；
• charCodeAt ： 該方法返回的就不是字符了，而是字符的編碼。

這兩個方法我們一般不使用，因爲和數組一樣，我們可以使用索引的方法進行訪問。形如： str[index]。

var strValue = "Hello World!"
console.log(strValue.charAt(1));//輸出： "e"
console.log(strValue.charCodeAt(1));//輸出： "101",是e的編碼
//直接使用索引訪問
console.log(strValue[1]);//輸出： "e"，類似於數組

2.位置方法
類似於( 就是 )數組中的 index()、lastIndexOf()。返回某一個字符在字符串中的索引位置。

var str2 = "hello world!";
console.log(str2.index("o"));//輸出： 5
console.log(str2.lastIndexOf("o"));//輸出： 7

和數組的索引不同的是，字符串中可以指定第二個參數，也就是開始查找的位置。例如：

var str2 = "hello world!";
console.log(str2.indexOf("o", 6)); //輸出： 7

3.大小寫轉換方法
將字符串中的所有字符全部變換成大寫或者是小寫都是可以通過方法實現。
轉換爲大寫： toUpperCase();
轉換爲小寫： toLowerCase()。

var str2 = "Hello World!";
console.log(str2.toUpperCase());//輸出： "HELLO WORLD!"
console.log(str2.toLowerCase());//輸出： "hello world!"
console.log(str2);//輸出： "Hello World!"，說明該方法不影響原字符串。

4.拼串和截串
操作方法主要有：concat()、slice()、substr() 和 substring().

1.concat()方法
concat方法用於連接字符串。

和數組的 concat() 方法一致。

該方法不常使用，因爲拼串直接使用 “+” 即可。
2.slice()方法
slice() 方法用於截取子串。可以接受一個或者是兩個參數。返回的截取的子串。

和數組的 slice 方法一樣。

var str = "hello world!";
console.log(str.slice(6));//輸出：world！
console.log(str.slice(0, 5);//輸出：hello

3.substr()方法
substr() 和 slice() 方法都是用來截取子串，還有後面的那個 substring() 方法。

substr() 方法的參數和 slice() 方法的第二個參數不同，除此之外都一樣。第二個參數不是位置，而是需要截取的字符串的長度。

var str = "hello world!";
console.log(str.substr(6));//輸出：world！
console.log(str.substr(0, 3);//輸出：hel

Number類型

Number 類型是與數字值對應的引用類型

要創建 Number 對象，需要使用 Number 構造函數。

var numberObject = new Number(10);
console.log(numberObject);//輸出：Number { 10 }

但是一般不這樣使用。
因爲解析器會自動進行包裝成數值對象。因此就可以使用屬性和方法。

數值對象方法
數值包裝成對象後就具有了一些操作方法。
常用的方法有： toString() 、toFixed() 、toExponential() 和 toPrecesion()。基本上都是對數字的格式化( 精度 ) 的方法。
1.totring()方法
見名知意，幾乎所有的對象都有這個方法，將數值轉換成字符串。

var num = new Number(12);//一般不這樣創建對象，因爲解析器的自動裝包功能
var num2 = 12;//這樣創建一個數值變量，可以當做對象使用
console.log(num2.toString());//輸出： 12

2.toFixed()方法
toFixed 方法的參數有一個。
參數代表的是數值後面顯示幾位小數。

var num2 = 12;//這樣創建一個數值變量，可以當做對象使用
console.log(num2.toFixed(2));//輸出：12.00
var num3 = 3.14159;
console.log(num3.toFixed(3));//輸出：3.142，會自動的四捨五入

3.totoExponential()方法
toExponential() 方法返回指數表示法。

接受一個參數，也是用來指定小數位數。

var num4 = 100;
console.log(num4.toExponential(1));//輸出：1.0e2;

4.toPrecision()方法
上面的 toExponential()方法會將100返回1.0e2,但是在一般情況下，這麼小的數字我們不需要使用指數表示法。

而 toPrecision() 方法是可以自己選取最合適的表示的方法。該方法可能會返回固定大小，也可能會返回指數形式，具體規則看哪種格式合適。

該方法接受一個參數，即表示數值的所有數字的位數( 不包括指數部分 )。

var num = 99;
console.log(num.toPrecision(1));//輸出:1e2
console.log(num.toPrecision(2));//輸出：99
console.log(num.toPrecision(3));//輸出：99.0

Boolean類型

Boolean 類型是基本的包裝類之一。所以也可以看做是對象。
使用 new 操作符創建的對象 或者是聲明的 Boolean 類型的基本的變量也可以包裝成對象。

但是一般更不會使用。因爲根本就沒有什麼方法屬性可以使用。只用來當做變量即可。

但要記得可以把三種基本數據類型（Number、String 和 Boolean ）的變量看作對象(臨時對象)，這是包裝類的基本特性。

至此，整個JS中的引用類型總結的差不多了。但是還有正則表達式沒有寫。
後面會繼續說明。