引用類型是比較復雜的一種類型。在面向對象的編程中，會經常用到引用類型，可以說它是編程語言的核心。在JS中內置了幾種引用類型，下邊會進行一一的介紹。

內置引用類型

Object類型

1、聲明方式：直接使用new操作符（const Data = new Object（））和使用對象字面量（const Data = {}）兩種方式。使用對象字面量方式聲明的話，花括號內可以寫屬性和方法，也可以什麽都不寫。需要註意的是雖然什麽都不寫，但對象並不是空對象，它會包含一些默認的屬性和方法。

2、訪問值：可以使用對象名直接點屬性名訪問值（const Data = {name:123}; console.log(Data.name)

Array類型

JS的數組和其它編程語言數組有些不同，它的值可以是任何類型，字符串、數值、對象都可以，而且它的長度是動態的，會隨著值得增加而動態調整。聲明數組的方式也分兩種（數組最多包含4294967295個值），第一種使用構造函數（const a = new Array()），第二種使用字面量(const a = [])。使用構造函數的方式創建數組，可以傳參，也可以不傳參，不傳參的話，數組將是一個長度為零的數組，傳參的話，共支持兩種傳參方式，例：

 1 //構造函數創建方式
 2           let b = () =>{
 3               const a = new Array(); //不傳參，創建length為零的數組
 4 
 5               console.log(a)
 6           }
 7 
 8           b = () =>{
 9             const a = new Array(3); //創建長度為3的數組
10 
11             console.log(a[2]); //由於沒有值，所以為undefined
12           }
 
13 
14           b = () =>{
15               const a = new Array("blue","green","red"); //創建長度3並且含有3個值得數組
16 
17               console.log(a[2]); //由於有值，所以值為red
18           }

字面量創建方式例：

 1  //字面量創建方式
 2          b = () =>{
 3              let a = ["3","5","6"]; //創建一個數組
 4 
 5              a = [1,2,]; //創建兩個值得數組，ie創建三個值得數組
 6 
 7              a = [,,,,,,]; //由於沒有寫具體值，數組裏邊的值都是undefined
 8 
 9              a.length = 3; //修改長度會改變數組，所以可以通過修改長度來刪除值。
10 
11              a[7] = 5 //給數組新增一個值。長度變8，間隔之間的部分會被undefined代替。
12 
13              console.log(a[1]); //訪問數組的中第2個值
14          }

數組檢測

JS數組提供了兩種檢測數組的方式，第一種是用Instanceof操作符，來判斷變量是否是Array的實例。不過這種檢測方式存在一個問題，就是當時用多個框架的時候，另一個框架也擁有自己封裝的Array構造函數，這時候就會出現問題，你無法去確定變量是否是原生的Array。第二種使用ES5的新API，Array.isArray()方法。ES5之所以提出這個方法，就是為了解決第一種方法存在的問題。例：

1 const a = ()=>{
2               const b = [3,2,4,1];
3                  //instanceof操作符檢測
4               const c = b instanceof Array; //返回true
5 
6               //Array.isArray
7 
8               const d = Array.isArray(b); //返回true
9           }

轉換方法

數組的轉換方式有toString()、toLocalString()、valueOf()、join()幾種。toString()會把數組變為以逗號分隔的字符串，轉換時，後臺會調用每個值自己的toString()方法。toLocalStirng()轉換的結果和toString()的結果一般是相同的，也是一逗號分隔的字符串，不同的是，轉換時，後臺調用的是每個值得toLocalString()方法。valueOf()返回數組。join()接收一個參數，指定數組以什麽字符，作為連接符，來把數組連接成字符串。參數如果不傳或是undefined的話，會默認以逗號連接各項值。例：

 1 const ah = () =>{
 2               const b = [3,2,4,1];
 3 
 4               const c = {
 5                   toString:()=>{return "y"},
 6                   toLocaleString:()=>{ return "y" }
 7               },
 8               d = {
 9                   toString:() =>{return "x"},
10                   toLocaleString:()=>{ return "x"}
11               },
12               f = [c,d];
13 
14               b.toString() // "3,2,4,1"
15 
16               b.toLocaleString() //"3,2,4,1"
17 
18               b.valueOf() //3,2,4,1
19 
20               b.join("-")//"3-2-4-1"
21               //由於後臺會調用每個值得toString方法，所以值為"y,x"
22               f.toString() //"y,x" 
23 
24               f.toLocaleString() //"y,x"
25           }

棧方法（pop和push）

棧是一種後進先出的數據結構，而pop和push實現了它的這種特點。例：

1 //棧方法
2             const strack = ()=>{
3                     let a = [1,2];
4 
5                     a.push(3) //後進，在數組的尾部添加元素，並返回新長度
6 
7                     a.pop() //先出，在數組的尾部刪除一個元素，並返回被刪除的項
8             }

隊列方法(shift)

隊列是一種先進先出的數據結構，JS中通過push和shift模擬隊列，通過unshift和pop實現反向隊列。下邊請看具體例子：

 1 //隊列方法
 2 
 3             const queque = () =>{
 4                 let a = [3,4];
 5 
 6                 //正向隊列
 7                 a.push(5); //向數組尾部添加元素
 8                 a.shift(); //在數組頭部刪除元素，並返回刪除的項
 9 
10                 //反向隊列
11                 a.unshift(3) //在數組的頭部添加元素，並返回新長度
12                 a.pop() //從尾部刪除元素，並返回被刪除的項
13             }

排序方法（reverse 和 sort）

 1 //排序方法
 2             const sort = ()=>{
 3                  let a = [4,3,5];
 4 
 5                  //reverse 和 sort都換把排完序的新數組返回出來
 6                  a.reverse() //翻轉數組順序
 7 
 8                  a.sort() //會把每個項的值轉成字符串進行比較，因此排序結果不盡如意，通常是傳入回調函數來實現排序。
 9 
10                 a.sort((val1,val2)=>val1>val2); //3,4,5
11             }

操作方法（concat 、slice和splice）

 1  //操作方法
 2             const dos = ()=>{
 3                 let b = [3,5,3];
 4                 //把傳入的數組貨值，連接生成一個新的數組並返回
 5                 let d = b.concat() //由於沒有傳參數，返回的是原數組的一個副本
 6                 d = b.concat("5",["9","10"]) //返回值[3,5,3,5,9,10]
 7                 //在數組指定位置開始截取，返回截取後生成的新數組。 兩個參數start and end，
 8                 //只傳start，會一直截取到末尾。 參數支持負值。參數為負值的話，會通過數組長度加上
 9                 //參數值，來確定位置
10                 b.slice(1) //[5,3]
11                 b.slice(1,2) //[5]
12                 b.slice(-1) //[3]
13                 b.slice(-3,-1)//[3,5]
14                 b.slice(-1,-2) //起始位置大於結束位置，返回空數組
15                 //會根據其傳入的參數，來確定是刪除、插入和替換操作.第一個參數為起始位置
16                 //第二個參數為刪除幾個。第三個參數為要插入的新值
17                 //splice會改變原數組
18                 b.splice(0,1) //刪除操作 返回[3]
19                 b.splice(0,0,4) //插入操作 [4,3,5,3]
20                 b.splice(0,1,4)//替換操作 [4,5,3】
21               
22             }

位置方法（indexOf 和 lastIndexOf）

1 const position = () =>{
2                 const pos = [4,3,2];
3                 //查找數組內是否存在該元素，存在返回元素位置，不存在返回-1.查找規則，按===比較。
4                 pos.indexOf(3) // 返回1 
5 
6                 //與indexOf相似，不同之處，lastIndexOf在數組的末尾開始查找。
7                 pos.lastIndexOf(3) //返回1
8             }

叠代方法

 1 //叠代方法
 2             const fors = () =>{
 3                 const d = [3,4,5,6];
 4                 //判斷結果都為true是返回true。參數為回調函數，回調函數有三個參數，1當前項。2索引。3數組對象
 5                 d.every(e=>e>5);
 6                 //判斷結果有一個為true，返回true。使用方式與every相同
 7                 d.some(e=>e>5)
 8                 //返回符合條件的值，並生成一個新數組
 9                 d.filter(e=>e>5)
10                 //返回運算後的值，並生成一個新數組
11                 d.map(e=>e-1)
12                 //單純執行叠代操作
13                 d.forEach(e=>console.log(e))
14             }

1 const c = ()=>{
2                 const f = [3,4,5,6];
3                 //對數組進行累加（減、乘、除）操作，並返回其結果。回調函數有兩個參數，第一個為上一次元素的結果，第二個為當前項
4                 f.reduce((sum,val)=>sum + val);
5                 //與reduce相同，但是從末尾到開始進行循環
6                 f.reduceRight((sum,val)=>sum + val);
7             }

JavaScript高級程序設計之引用類型（上）