引用類型與傳統面向對象程序設計中的類相似，但實現不同。

對象在 JavaScript 中被稱為引用類型的值，而且有一些內置的引用類型可以用來創建特定的對象。

Object

Object 是一個基礎類型，其他所有類型都從 Object 繼承了基礎行為。

var person = new Person();
person.name = "Bert";
person.age = 29;

var person = {
  name: "Bert",
  age: 29
}

兩種創建對象的方式是等價的。

var person = {
  name: "Bert",
  age: 29,
  5: true
}

這段代碼創建的對象：person 中含有三個屬性：name、age和5.這里的5會被自動轉換為字符串。

// 下面兩種訪問對象屬性的方法沒有任何區別
alert(person["name"]);  // Bert
alert(person.name); // Bert

// 使用括號語法的有點是可以通過變量來訪問屬性
var propertyName = "name";
alert(person[propertyName]);  // Bert

// 屬性名中包含特殊字符時無法使用 '.' 訪問，這時候可以使用 '[]' 來訪問或賦值
person["first name"] = "Bert"

Array

Array 類型是一組值的有序列表，同時還提供了操作和轉換這些值的功能。

// 創建一個數組，長度為0
var colors = new Array();
var colors = [];

// 創建一個數組，長度為2
var colors = new Array(2);
var colors = [, ,]; // 這種方式會有兼容問題

// 創建一個數組，內容為 ["red", "blue", "green"]
var colors = new Array("red", "blue", "green");
var colors = ["red", "blue", "green"];

length 使用小技巧

length 表示數組的長度，會始終返回0或更大的值。

數據的 length 屬性不是只讀的。因此，通過設置這個屬性，可以從數組的末尾移除或想數組末尾添加新項：

var colors = ["red", "blue", "green"];
colors.length = 2;
alert(colors[2]); // undefined

colors 數組一開始有三個值，將 length 的長度設為2會移除最后一項，再訪問 colors[2] 時，原本的 'green' 被移除了，輸出 undefined。

var colors = ["red", "blue", "green"];
colors.length = 4;
alert(colors[4]); // undefined

同理將數組的長度設置為4，超出的位置的值默認會設置為 undefined。

var colors = ["red", "blue", "green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";
alert(colors); // ["red", "blue", "green", "black", "brown"]

數組的最后一項的下標為 length-1 ，因此對 length 下標賦值數組會在最后一個位置新增對應值。

Array 的常用方法

• toLocaleString()： 默認情況下會以逗號分隔的字符串的形式返回數組項，需要特別處理數組表現形式時使用。

• toString()： 默認情況下會以逗號分隔的字符串的形式返回數組項，使用輸出語句時會默認調用 toString 方法。

• valueOf()： 默認情況下會以逗號分隔的字符串的形式返回數組項，使用判斷語句時會默認調用 valueOf 方法。

• join(Str)：不傳參數或傳入 undefined 會默認使用逗號作為分隔符輸出，傳入參數則以參數作為分隔符輸出。

  var colors = ["red", "black"];
  alert(colors.join()); // red,black
  alert(colors.join("-")); // red-black
  

• push()：接受任意數量的參數，把他們逐個添加到數組末尾，并返回修改后的數組的長度。

  var colors = new Array();
  var count = colors.push("red", "black");
  alert(count); // 2
  

• pop()：從數組末尾移除最后一項，并返回移除的項。

  var colors = ["red", "black", "blue"];
  var item = colors.pop();
  alert(item); // "blue"
  alert(colors.length); // 2
  

• shift()：移除數組中的第一項并返回該項。

  var colors = ["red", "black", "blue"];
  var item = colors.shift();
  alert(item); // "red"
  alert(colors.length); // 2
  

• unshift()：在數組前端添加任意個項并返回新數組的長度。

  var colors = new Array("red", "black");
  var count = colors.unshift("blue", "green");
  alert(count); // 4
  

• reverse()：反轉數組項的順序。

  var values = [1, 2, 3, 4, 5];
  values.reverse();
  alert(values); // 5,4,3,2,1
  

• sort()：默認按字符串升序排列，該方法可以接收一個比較函數作為參數，以便我們指定哪個值位于哪個值的前面。

  • 比較函數接收兩個參數。

    • 如果第一個參數應該位于第二個之前則返回一個負數。
    • 如果兩個參數相等則返回0。
    • 如果第一個參數應該位于第二個之后則返回一個正數。

  var values = [0, 1, 5, 10, 15];
  values.sort()
  alert(values); // 0,1,10,15,5
  

  sort 方法默認是已字符串進行比較

  function compare(value1, value2) {
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  }
  
  var values = [0, 1, 5, 10, 15];
  values.sort(compare);
  alert(values); // 0,1,5,10,15
  

• concat()：可以基于當前數組中的所有項創建一個新數組，這個方法會先創建一個副本，然后將接受到的參數添加到這個副本的末尾，最后返回新構建的數組。

  • 參數是一個或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中。
  • 如果傳遞的值不是數組，這些值就會被簡單的添加到結果數組的末尾。

  var colors = ["red", "blue", "green"];
  var colors2 = colors.concat("yellow", ["black"], "brown")
  alert(colors); // red,blue,green
  alert(colors2); // red,blue,green,yellow,black,brown
  

• slice()：基于當前數組中的一或多個項創建一個新數組（不會影響到原數組）。

  • 該方法可以接受一個或兩個參數，即要返回項的起始和結束為止。

    • 在只有一個參數的情況下，slice()方法返回從該參數指定為止開始到當前數組末尾的所有項。
    • 如果有兩個參數，該方法返回起始和結束位置之間的項 ---- 但不包括結束位置的項。

  var color = ["red", "green", "blue", "yellow", "purple"];
  var color2 = colors.slice(1);
  var color3 = colors.slice(1, 4);
  alert(colors2); // green,blue,yellow,purple
  alert(colors3); // green,blue,yellow
  

  如果 slice() 方法的參數中有一個負數，則用數組長度加上該數來確定相應的位置。例如，在一個包含5項的數組上調用 slice(-2, -1) 與調用 slice(3, 4) 的到的結果相同。如果結束位置小于起始位置，則返回空數組。

• splice()：數組中最牛逼的方法，他的主要用途是向數組的中部插入項。

  • 刪除：可以刪除任意數量的項，只需要指定兩個參數：需要刪除的第一項的位置和要刪除的項數。例如：splice(0, 2)會刪除數組中的前兩個項。

  • 插入：可以向制定位置插入任意數量的項，只需要提供3個參數：起始位置、0（要刪除的項數）和要插入的項。如果要插入多個項，可以再傳入第四、第五，以至任意多個項。

    • 例如：splice(2, 0, "red", "green") 會從當前數組的位置2開始插入字符串 "red" 和 "green"。

  • 替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需要指定3個參數：其實位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。

    • 例如：splice(2, 1, "red", "green")會刪除單簽數組位置2的項，然后再從位置2開始插入字符串"red"， "green"。

  • splice() 方法始終會返回一個數組，該數組中包含從原始數組中刪除的項（如果沒有刪除任何項，則返回一個空數組）。

  var color = ["red", "green", "blue"];
  
  // 刪除第一項
  var removed = colors.splice(0, 1);
  alert(colors); // green, blue
  alert(removed); // red, 返回的數組中只包含一項
  
  removed = colors.splice(1, 0, "yellow", "orange"); // 從位置1開始插入兩項
  alert(colors); // green, yellow, orange, blue
  alert(removed); // []
  
  removed = colors.splice((1, 1, "red", "purple"))
  alert(colors); // green, red, purple, orange, blue
  alert(removed); // yellow
  

• indexOf()：從頭開始向末尾查找，接受兩個參數：要查找的項和（可選的）表示查找啟動位置的索引。

  • 沒有找到返回 -1。
  • 找到返回數組的下標。
  • 查找的項必須嚴格相等（===）。

• lastIndexOf()：從末尾開始向前查找，接受兩個參數：要查找的項和（可選的）表示查找啟動位置的索引。

  • 沒有找到返回 -1。
  • 找到返回數組的下標。
  • 查找的項必須嚴格相等（===）。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// 傳入一個參數，表示查找的項
alert(numbers.indexOf(4)) // 3
alert(numbers.lastIndexOf(4)) // 5

// 傳入兩個參數
alert(numbers.indexOf(4, 4)) // 5
alert(numbers.lastIndexOf(4, 4)) // 3

// 查詢對象
var person = {name: "Bert"};
var people = [{name: "Bert"}];
var morePeople = [person];
alert(people.indexOf(person)) // -1
alert(morePeople.indexOf(person)) // 0

• every()：遍歷數組，如果傳入的函數每一項都返回 true 該方法會返回true，如果有一項返回false，則該方法返回 false（數組每項的 && 的關系）。

• some()：遍歷數組，如果傳入的函數每一項都返回 false 該方法會返回 false，如果有一項返回 true，則該方法返回 true （數組每項的 || 的關系）。

  var numbers = [1,2,3,4,5,4,3,2,1];
  var everyResult = numbers.every(function(item. index, array) {
    return (item > 2);
  })
  alert(everyResult) // false
  
  var someResult = numbers.some(function(item, index, array) {
    return (item > 2);
  })
  alert(someResult); // true
  

• filter()：遍歷數組，將傳入的函數的返回 true 的項值重新生成新數組，過濾返回 false 的項（數組的過濾器，用于搜索）。

  var numbers = [1,2,3,4,5,4,3,2,1];
  var filterResult = numbers.filter(function(item, index, array) {
    return (item > 2);
  })
  alert(filterResult); // [3,4,5,4,3]
  

• forEach()：針對數組的每一項運算傳入的函數，沒有返回值。

• map()：遍歷數組，將傳入的函數的返回值作為新的數組的值。

  var numbers = [1,2,3,4,5,4,3,2,1];
  var mapResult = numbers.map(function(item, index, array) {
    return item * 2;
  })
  
  alert(mapResult); // [2,4,6,8,10,8,6,4,2]
  

• reducer()：方法可以執行求數組中所有值之和的操作，會將前一次返回的結果作為下一次運算的第一個參數（數組的遞歸運算）。

  var values = [1,2,3,4,5];
  var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
  })
  alert(sum); //15
  

• reducerRight()：與 reducer 作用類似，只不過方向相反（數組的反向遞歸）。

  var values = [1,2,3,4,5];
  var sum = values.reduceRight(function(prev, cur, index, array) {
    return prev + cur;
  })
  alert(sum); //15