JavaScript引用類型Array實例分析

一、ECMAScript數組的特色

• ECMAScript數組的每一項能夠保存任何類型的數據。

• ECMAScript數組的大小是能夠動態調整的。

二、建立數組

（1）使用Array構造函數（new操做符可省略）

var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("teacher", 3, true);

（2）使用數組字面量表示法

var arr1 = [];
var arr2 = ["teacher", 3, true];

三、length屬性

ECMAScript數組的length屬性不是隻讀的，經過設置這個屬性能夠從數組末尾移除項或向數組中添加新項。

eg1：從數組末尾移除項

var arr = ["teacher", 3, true];
arr.length = 1;
alert(arr[2]);//undefined

eg2：若是將length設置爲大於當前數組長度的值，則新增的每一項都會取得undefined值

var arr = ["teacher", 3, true];
arr.length = 4;
alert(arr[3]);//undefined

eg3：向數組中添加新項

var arr = ["teacher", 3, true];
arr[arr.length] = "doctor";

eg4：當一個值放在超出當前數組大小的位置上時，數組會從新計算其長度值，等於最後一項的索引加一。

var arr = ["teacher", 3, true];
arr[9] = "doctor";
alert(arr.length);//10

四、檢測數組

（1）instanceof操做符

if (value instanceof Array) {
  ...
}

問題：若網頁中包含多個框架，則實際上存在兩個以上不一樣的全局執行環境，從而存在兩個以上不一樣版本的Array構造函數。若從一個框架向另外一個框架傳入一個數組，那麼傳入的數組在與第二個框架中原生建立的數組分別具備各自不一樣的構造函數。

（2）Array.isArray()方法

if (Array.isArray(value)) {
  ...
}

用途：肯定給定值是不是數組，不管它是在哪一個全局執行環境中建立的。

五、轉換方法

（1）toString()：返回每一項的字符串形式拼接而成的一個以逗號分隔的字符串，爲了取得每一項的值，調用的是每一項的toString()方法。

（2）valueOf()：返回的仍是數組

（3）toLocaleString()：爲了取得每一項的值，調用的是每一項的toLocaleString()方法，而不是toString()方法。

（4）join()：使用指定的分隔符來構建字符串

說明：alert()方法要接收字符串參數，因此它會在後臺調用toString()方法。

eg1：

var friends = ["Alice","Bruce","Cindy"];
alert(friends.toString());//Alice,Bruce,Cindy
alert(friends.valueOf());//Alice,Bruce,Cindy
alert(friends.toLocaleString());//Alice,Bruce,Cindy
alert(friends);//Alice,Bruce,Cindy
alert(friends.join());//Alice,Bruce,Cindy
alert(friends.join("|"));//Alice|Bruce|Cindy

eg2：

var person1 = {
  toLocaleString: function() {
    return "Alice";
  },
  toString: function() {
    return "Bruce";
  }//前端全棧開發交流圈：866109386
}//幫助1-3年前端人員，突破技術瓶頸，提高思惟能力
var person2 = {
  toLocaleString: function() {
    return "Cindy";
  },
  toString: function() {
    return "David";
  }
}
var person = [person1, person2];
alert(person);//Alice,Bruce
alert(person.toString());//Alice,Bruce
alert(person.toLocaleString());//Cindy,David

六、棧方法

（1）push()：接收任意數量的參數，逐個添加到末尾，返回修改後數組的長度。

（2）pop()：從數組末尾移除最後一項，數組的長度減一，返回移除的項。

var friends = new Array();
var len = friends.push("Alice","Bruce");
alert(len);//2
var friend = friends.pop();
alert(friend );//"Bruce"
alert(friends.length);//1

七、隊列方法

（1）shift()：移除數組的第一項，數組的長度減一，返回移除的項。

（2）unshift()：在數組前端添加任意數量的項，返回修改後數組的長度。

var friends = new Array();
var len = friends.unshift("Alice","Bruce");
alert(len);//2
var friend = friends.shift();
alert(friend );//"Alice"
alert(friends.length);//1

八、重排序方法

（1）reverse()：翻轉數組項的順序

（2）sort()：按升序排列數組項

sort()方法會調用每項的toString()方法，而後比較獲得的字符串。

var items=[0,1,3,15,18];
items.sort();
alert(items);//0,1,15,18,3

sort()方法能夠接收一個比較函數做爲參數：比較函數接收兩個參數，若第一個參數應該位於第二個參數以前則返回一個負數；若兩個參數相等則返回0；若第一個參數應該位於第二個參數以後則返回一個正數。

function compare(item1, item2) {
  if (item1 < item2)
    return -1;
  else if (item1 > item2)
    return 1;
  else
    return 0;//前端全棧學習交流圈：866109386
}//幫助1-3年前端人員，突破技術瓶頸，提高思惟能力。
var items=[0,1,3,15,18];
items.sort(compare);
alert(items);//0,1,3,15,18

對於數值類型或其valueOf()方法會返回數值類型的對象類型，能夠簡寫比較函數。

function compare(item1, item2) {
  return item1 - item2;
}

九、操做方法

（1）concat()：基於當前數組中的全部項建立一個新數組。先建立當前數組的一個副本，而後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。若沒有給concat()傳遞參數，則只是複製當前數組並返回副本；若傳遞給concat()的是一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組；若傳遞給concat()的不是數組，則這些值都簡單地添加到結果數組的末尾。

var friends = ["Alice", "Bruce"];
var newFriends = friends.concat("Cindy", ["David", "Emy"]);
alert(newFriends);//Alice,Bruce,Cindy,David,Emy

（2）slice()：基於當前數組的一或多項建立一個新數組。接收一或兩個參數，即要返回項的開始和結束位置（不包括結束位置）。slice()方法不會影響原始數組。若參數中有負數，則用數組長度加上該負數來肯定相應的位置。若結束位置小於開始位置，則返回空數組。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.slice(1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 2);
alert(friends2);//Bruce

splice()：主要用途是向數組的中部插入項，返回一個包含從原始數組中刪除的項的數組，若沒有刪除任何項，則返回空數組。使用方式有3種：

1）刪除：能夠刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的項數。

2）插入：能夠向指定位置插入任意數量的項，只需指定3個參數：起始位置、要刪除的項數和要插入任意數量的項。

3）替換：能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定3個參數：起始位置、要刪除的項數和要插入任意數量的項。插入的項數沒必要和刪除的項數相等。

var friends = ["Alice", "Bruce", "Cindy"];
var friends1 = friends.splice(0, 1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 0, "David", "Emy");
alert(friends2);//Bruce,David,Emy,Cindy
var friends3 = friends.slice(1, 1, "Fancy", "Gary");
alert(friends3);//Bruce,Fancy,Gary,Emy,Cindy

十、位置方法

（1）indexOf()：接收兩個參數——要查找的項和可選的查找起點位置的索引，從開頭開始查找，沒找到則返回-1。

（2）lastIndexOf()：接收兩個參數——要查找的項和可選的查找起點位置的索引，從末尾開始查找，沒找到則返回-1。

在比較第一個參數與數組中的每一項時，會使用全等操做符，也就是要求查找的項必須嚴格相等。

var person = {name : "Alice"};
var people1 = [{name : "Alice"}, person];
alert(people1.indexOf(person));//1，不是0

十一、迭代方法

ECMAScript數組有5個迭代方法。每一個方法接收兩個參數——要在每一項上運行的函數和可選的運行該函數的做用域對象（影響this的值）。傳入的函數接收三個參數——數組項的值、該項在數組中的位置和數組對象自己。

（1）every()：對數組中的每一項運行給定函數，若該函數對每一項都返回true，則返回true。

（2）some()：對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。

（3）filter()：對數組中的每一項運行給定函數，若該函數對每一項都返回true，則返回true。

（4）foreach()：對數組中的每一項運行給定函數，無返回值。

（5）`map()``：對數組中的每一項運行給定函數，若該函數對每一項都返回true，則返回true。

var nums = [1,2,3,4,1,2,3];
var every = nums.every(function(item, index, array) {
  return (item > 2);  //  前端全棧學習交流圈：866109386
});//幫助1-3年經驗前端人員，突破技術瓶頸，提高思惟能力
alert(every);//false
var some = nums.some(function(item, index, array) {
  return (item > 2);
});
alert(some);//true
var filter = nums.filter(function(item, index, array) {
  return (item > 2);
});
alert(filter);//[3,4,3]
var map = nums.map(function(item, index, array) {
  return (item * 2);
});
alert(map);//[2,4,6,8,2,4,6]
nums.foreach(function(item, index, array) {
  ...
});

十二、歸併方法

迭代數組的全部項，而後構建一個最終返回的值。接收兩個參數——一個在每一項上調用的函數和可選的做爲歸併基礎的值。傳入的函數接收四個參數——前一個值、當前值、項的索引和數組對象。函數返回的任何值都會做爲第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，所以第一個參數是數組的第一項，第二個參數是數組的第二項。

（1）reduce()：從數組的第一項開始，逐個遍歷到最後。

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

（2）reduceRight()：接收兩個參數——一個在每一項上調用的函數和可選的做爲歸併基礎的值。從數組的最後一項開始，向前遍歷到第一項。

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