javascript之Array類型-讀書筆記

Array類型

1. ECMAscrip與其餘多數語言中數組的共同點：
   都是數據的有序列表

2. 不一樣點：數組的每一項能夠保存任何類型的數據，數組的大小是能夠動態調整的，及隨着數據的添加自動增加，以容納新增的數據

1 建立數組

1.1 同Object同樣，建立數組的方式有兩種

Arrey構造函數

1. var colors = new Array();

2. 向Array構造函數中傳遞數組中應該包含的項，
   var colors = new Array('red','green','blue');

3. 給構造函數傳遞一個數值，表示數組的長度(項數)，
   var colors = new Array(3);

4. 也可省略new操做符，
   var colors = Ayyay(3); var colors = Array('red');

數組字面量表示法

1. 數組字面量表示法由一對包含數組項的方括號表示，
   var color = ['red','green','blue'];

1.2 讀取和設置數組的值

要使用方括號並提供相應的值是基於0的數字索引。

var colors = ['red','blue','green'];
alert (colors[0]);
colors[2] = 'black'; //修改第三項
colors[3] = 'brown';//新增第四項

數組中的length屬性頗有特色：不是隻讀的。經過設置這個屬性。能夠從數組的末尾移除項，或向數組中新增項。

1. 移除一項

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

2. 新增一項

   var colors['red','bule','green'];
   colors.length = 4;
   alert(coloes[3]);//undefined

3. 利用length屬性在末尾新增項

   var colors = ['red','blue','green'];
   colors[colors.length] = 'black';
   colors[colors.length] = 'brown';
   alert(colors[4]);//brown
   因爲數組的最後一項索引始終時length-1,因此下一項的位置就是length。每當在末尾添加一項後，其length都會自動更新以反應這一變化。

檢測數組

1. 對於單一的全局做用域，也就是對於有一個網頁或者一個全局做用域而言，使用instanceof操做符
   if (value instanceof Array){//對數組執行某些操做}

2. 對於兩個以上不一樣的執行環境，也就是若是網頁中包含多個模板。從而存在兩個以上不一樣版本的Array構造函數。若是你從一個框架向另外一個框架傳入一個數組，那麼傳入的數組與在第二個框架中原生建立的數組分別具備各自不一樣的構造函數。爲解決這個問題ECMAScript5新增了Array.isArray()方法。這個方法無論數組是在哪一個全局執行環境中建立的，均可以肯定某個值是否是數組。
   if(Array.isArray(value)){//對數組執行某些操做}；

支持Array.isArray()的方法瀏覽器有IE9+、Firefox4+、Safari5+、Opera 10.五、和Chrome。

var colors = ['red','blue','green']; 
if(Array.isArray(colors)){
  colors[0] = 'balck';
  alert(colors[0]);
}

轉換方法

全部對象都具備toLocaleString()、toString()和valueOf()方法

• 調用數組的toString()方法：返回由數組中 '每一個值的字符串' 形式 '拼接' 而成的一個以逗號分割的 '字符串' 。

• 調用數組的valueOf()方法：返回的仍是數組。

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["廣州", 50],
  ["成都", 90],
  ["西安", 100]
];
alert(aqiData.toString());
alert(aqiData.valueOf());
alert(aqiData);
console.log(aqiData.toString());
console.log(aqiData.valueOf());
console.log(aqiData);

上面第九、10行代碼先顯式調用了toString()方法和valueOf()方法。第11行直接將數組傳遞給alert()。而alert()要接收字符串參數，因此它會在後臺調用數組每一項的toString()方法。由此獲得與直接調用toString()方法相同的結果。

• 調用數組的 toLocaleString()方法時，它也會建立一個由數組中 '每一個值的字符串' 形式 '拼接' 而成的一個以逗號分割的 '字符串' ，與前面兩個方法惟一不一樣之處在於取數組每一項的值調用的方法不同，這裏取數組每一項值調用的是每一項的toLocaleString()方法，而不是toString()方法，前面講的是調用每一項的toString()方法。

var person1 = {
  toLocaleString : function(){
    return  'chenglong';
  },
  toString : function(){
    return  'lixiaolong';
  }
};
var person2 = {
  toLocaleString : function(){
    return  'lilianjie';
  },
  toString : function(){
    return  'chenzhen';
  }
};
var people = [person1,person2];
alert(people.toString());
alert(people);
alert(people.toLocaleString());
console.log(people.toString());
console.log(people);
console.log(people.toLocaleString());

• join()指定分割符鏈接數組元素。只接受一個參數，即用做分割符的字符串，返回包含全部數組項的字符串。若是不給join()傳入任何值或傳入undefined,則使用逗號做爲分割符.而IE7或更早的版本會錯誤的使用undefined做爲分割符。

• 若是數組中的某一項值是null或undefined，那麼該值在join(),toString(),valueOf()和toLocaleString()方法返回的結果中以空字符串表示。

棧方法

ECMAScript也提供了一種讓數組的行爲相似於其餘數據結構的方法，具體說來，數組能夠表現的就像棧同樣。棧是一種LIFO(後進先出)的數據結構。棧中項的插入和移除只發生在一個位置——棧的頂部。ECMAScript爲數組提供了push()和pop()方法實現相似棧的行爲。

1. push()方法，能夠接收任意數量的參數，把他們逐個添加到數組的末尾，並返回修改後數組的長度

2. pop()方法，從數組的末尾移除最後一項，減小數組的length值，返回移除的項。

var colors = [];
var count = colors.push('red','green');
alert(count);//2
var item = colors.pop();
alert(item);//green
alert(colors.length);//1

隊列方法

棧數據結構的訪問規則是LIFO(後進先出)，而另外一種數據結構——隊列數據結構，訪問規則是FIFO(先進先出)。隊列在列表的末端添加項，從列表的前端移除項。末端添加項依舊使用push()方法，shift()方法能夠移除數組的第一項，並返回該項，同時將數組長度減1.

• 結合push()方法和shift()方法能夠像使用隊列同樣使用數組。

var colors = [];
var count = colors.push('red','green');
alert(count);//2
var item = colors.shift();
alert(item);//red
alert(colors.length);//1

ECMAScript還爲數組提供了unshift()方法，unshift()與shift()做用相反，unshift()是在數組的前端添加任意多個項並返回新數組的長度。所以，同時使用unshitf()和pop()方法，能夠從相反的方向模擬隊列。

var colors = [];
var count = colors.unshift('red','green');
alert(count);//2
count = colors.unshift('black');
var item = colors.pop();
alert(item);//green
alert(colors.length);//2

注：IE7及更早版本unshift()會返回undefined而不是數組的心長度。IE8只在非兼容模式下返回正確的長度。

重排序方法

數組中有兩個能夠排序的方法，reverse()和sort()。

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

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

• 默認狀況下sort()會按升序排列數組項，但此升序非彼升序

爲了實現排序，sort()會調用每一個數組項的toString()轉換方法，而後比較獲得的字符串，以肯定如何排序。

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

sort()方法比較的是字符串，字符串比較，"10"位與"5"前面。sort()方法還能夠接收一個比較函數做爲參數，可實現咱們指望的排序。

比較函數接收兩個參數，若是第一個參數應該位於第二個參數以前則返回負數，若是兩個參數相等則返回零，若是第一個參數應該位於第二個參數以後則返回正數。如下就是一個比較函數。

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

reverse()和sort()返回的是排序後的數組

操做方法

• concat()方法，能夠基於當前數組中的全部項建立一個新數組。具體說，這個方法會先建立當前數組的一個副本，而後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。1， 在沒有給concat()方法添加參數的狀況下，他只是複製當前數組並返回副本。2， 若是傳遞給concat()方法的是一個多個數組，則該方法會將這些數組中的每一項添加到結果數組中。3， 若是給concat()方法傳遞的不是數組，這些值會被簡單的添加到結果數組的末尾。原來的數組colors()，保持不變

var colors = ['red','blue'];
  var newColors = colors.concat('black',['yellow','brown'],['green']);
  alert(colors);//red,blue
  alert(newColors);//red,blue,black,yellow,brown，green

• slice()方法，基於當前數組的一個或多個項建立一個新數組。slice()方法接收一個或兩個參數，同concal()方法同樣，原來的數組不會被影響。注意，若是slice()參數中有一個是負數，則用數組長度加上該數來肯定相應位置。例一個包含5項的數組，slice(-2,-1)即slice(3,4)。若是結束位置小於起始位置，則返回空數組。

• splice()方法，這個方法算是最強大的數組方法了。splice()方法的主要用途是向數組的中部插入項。使用的方式有以下3種。

1， 刪除，能夠刪除任意數量的項，只需指定2個參數，要刪除的第一項的位置和要刪除的項數。
2， 插入，能夠向指定的位置插入任意數量的項，只需提供3個參數，起始位置，0(要刪除的項數)，和要插入的項。若是要插入多項，能夠插入任意多個項。例，splice(1,0,'red','yellow');
3, 替換，能夠向指定的位置插入任意數量的項，插入的項數沒必要與刪除的項數相等，例，splice(2,1,'red','blue');
splice()方法始終都會返回一個數組，該數組包含從原始數組中刪除的項(若是沒有刪除任何項，就會返回一個空數組)。splice()會改變原始數組。

var colors = ['red','blue','green'];
var colors2 = colors.splice(1,2);
alert(colors2);//blue,green
var colors3 = colors.splice(0,0,'black',['brown']);
alert(colors3);//[]
alert(colors);//black,brown,red
console.log(colors3);
var colors4 = colors.splice(1,1,'yellow','purple');
alert(colors4);//brown
alert(colors);//black,yellow,purple,red

位置方法

indexOf()和lastIndexOf()方法。都接收兩個參數，要查找的項和查找起點位置的索引(可選)。indexOf()從數組的0位置開始向後查，lastIndexOf()從數組的末尾開始向前查找。都返回要查找的項在數組中的位置。沒有找到的狀況下返回-1，在比較第一個參數與數組中的項時，使用全等操做符(必須嚴格相等)。支持這兩種方法的瀏覽器有IE9+,fireFox2+,Safari3+,Opera9.5+,Chrome。

var person = {name:'Nicholas'};
  var people = [{name:'Nicholas'}];
  var morePeople  = [person];
  alert(people.indexOf(person));//-1
  alert(morePeople.indexOf(person));//0
  alert(morePeople.indexOf({name:'Nicholas'}));//-1
  console.log(morePeople);//[Object]

迭代方法

ECMAScript爲數組定義了5個迭代方法。每一個方法都接收兩個參數，要在每一項上運行的函數和運行該函數的做用域對象——影響this的值(可選)。傳入這些方法的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象自己。根據使用的方法不一樣，這個函數執行後的返回值可能會也可能不會影響訪問的返回值。

1. every():對數組中的每一項運行給定的函數，若是該函數對每一項都返回true，則返回 true.

2. filter():對數組的每一項都運行給定數組，返回 該函數會返回true的項 組成的數組。

3. forEach():對數組的每一項運行給定的函數，這個方法沒有返回值。

4. map():對數組每一項運行給定函數，返回 每次函數調用的結果 組成的數組。

5. some():對數組中的每一項運行給定的數組，若是該函數對任一項返回true，則返回true.

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

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["廣州", 50],
  ["成都", 90],
  ["西安", 100]
];
  var filterResult = aqiData.filter(function(item,index,array){
    //console.log(item[1]);
    return item[1] > 60;
  });
  alert(filterResult);

var numbers = [1,2,3,4,5,4,3,2,1];
  numbers.forEach(function(item,index,array){
    if (item>3) {
      alert(item);
    }
  });

支持這些迭代方法的瀏覽器有IE9+、FireFox2+、Safari3+、Opera9.5+、Chrome

縮小方法

ECNAScript還增長了兩個縮小方法,reduce()和reduceRight().這兩個方法都會迭代數組的全部項，而後構建一個最終返回的值。其中reduce()從數組的第一項開始，逐個遍歷到最後，而reduceRight()從數組的最後一項開始，向前遍歷到第一項。

• 這兩個方法都接收兩個參數：一個在每一項上調用的函數和最爲縮小基礎的初始值(可選)，傳遞給他們的函數接收4個參數：前一個值，當前值，項的索引和當前對象。

• 這個函數返回的任何值都會最爲第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，所以第一參數就是數組的第一項，第二個參數就是數組的第二項。
  //執行數組中全部值之和的操做

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

第一次訪問函數，prev是1，cur是2；第二次，prev是3(1+2結果)，cur是3(數組第三項)
支持這些迭代方法的瀏覽器有IE9+、FireFox3+、Safari4+、Opera10.5+、Chrome

參考：JS高級程序設計