JavaScript Array類型

JavaScript中,Array是最常用到的數據類型之一,屬於引用類型中的一種。由於數組類型實在太常用而我記性又不是很好,就寫一篇博文做個筆記。


數組特性:


可以通過以下方式來創建數組:

var students = new Array();    // 創建一個空數組
var students = new Array(5);   // 創建一個長度爲5的數組
var students = new Array('paper', 'crane');  // 創建一個長度爲2、初始值爲paper,crane的數組
var students = Array(5);       // 創建一個長度爲5的數組,也可省略初始長度
var students = Array('paper', 'crane');   // 創建一個長度爲2、初始值爲paper,crane的數組
// 使用數組字面量創建數組
var students = [];     // 創建空數組
var students = ['paper', 'crane'];   // 創建一個長度爲2、初始值爲paper、crane的數組

並且使用方括號來訪問數組元素,而且,方括號裏面的索引值不會有溢出的危險,當索引值實際大於數組長度,數組會自動新增,並將超出的數組元素的值設爲undefined。同時,如果給一個超出數組範圍的元素賦值,也不會報錯,而是數組會擴展到相應的長度:

var arr = [0, 1, 2, 3];
alert(arr[0]);       // 0,通過方括號加索引值訪問數組元素
alert(arr[5]);       // undefined,索引值超出數組長度範圍
alert(arr.length);   // 4
arr[5] = 6;
alert(arr[5]);       // 6
alert(arr[4]);       // undefined
alert(arr.length);   // 6

至於檢測數組的方法點擊這裏查看

轉換方法


所有的對象都具有toLocaleString()、toString()、valueOf()方法,不僅僅是數組對象。toString()方法返回一個由數組中的每個值拼接而成並且由逗號分隔的字符串,valueOf()返回的是一個數組,toLocaleString()返回的是由數組中每個元素的toLocaleString()方法返回的值拼接而成的並且由逗號分隔的字符串。join()方法接收一個參數,並以此參數作爲分隔符來拼接數組元素的值,返回一個字符串,如果不傳參數或參數爲undefined,則以逗號分隔。

var colors = ['red', 'blue', 'green'];
alert(colors.toString());           // red,blue,green
alert(colors.toLocaleString());     // red,blue,green
alert(colors.valueOf());            // red,blue,green
alert(colors);                      // red,blue,green
alert(colors.join(','));            // red,blue,green
alert(colors.join('||'));           // red||blue||green
alert(colors.join());               // red,blue,green

排序方法


數組自帶的排序方法爲sort();可以接收一個比較函數作爲參數,如果省略參數,那麼就會按照每個元素的toString()的返回值進行比較,所以結果總是不準確的。爲了解決此問題,一般都會傳入一個比較函數作爲參數,但是在使用sort()方法的時候一定要確保調用的對象是數組,否則會報錯。同時,數組還有一個reverse()方法,反轉數組項順序。

function compare(param1, param2) {
  // 若爲正值,則返回真,此時需要交換兩個數值的位置
  return param1 - param2;
}
var arr = [0, 7, 3, 9, 2, 8];
arr.sort(compare);
alert(arr);
arr.reverse();
alert(arr);

棧方法


push(param);往隊尾添加param,該方法可接收0個或1至多個參數,返回數組的長度;

pop();此方法從隊尾刪除一項,返回被刪除的項:

var arr = [0, 1];
arr.push(2, 3);
arr.push(5);
var temp = arr.push();
alert(temp);          // 5;
alert(arr)            // 0,1,2,3,5
temp = arr.pop();
alert(temp);          // 5
alert(arr);           // 0,1,2,3

隊列方法


unshift(param); 此方法在數組前端推入參數param,可接收0至多個參數;

shift(); 此方法從數組前端刪除一項,返回此項;

var arr = [0, 1];
arr.unshift(-2, -1);
arr.unshift(-3);
var temp = arr.unshift();
alert(temp);      // 5;
alert(arr);       // -3,-2,-1,0,1
temp = arr.shift();
alert(temp);      // -3
alert(arr);       // -2,-1,0,1

操作方法


concat(); 次方法可以基於當前數組中的所有項創建一個新的數組。具體來說,這個方法會先創建當前數組的一個副本,然後將接收到的參數添加到這個副本的末尾,最後返回這個新構建的數組。此方法不影響原數組。

slice(); 此方法可以接收一或兩個參數,即要返回項的起始和結束位置。在只有一個參數的情況下,slice()方法返回從該參數指定位置開始到當前數組末尾的所有項。如果有兩個參數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。此方法不影響原數組。

splice();此方法可以接收0至多個參數。0個參數時,無操作;接收1個參數時,將索引爲參數至數組末尾的項刪除,若該參數爲負數,則將其加上數組長度,加上數組長度依然負數時,將默認爲0,若參數大於等於數組長度時,則無操作;接收兩個參數時,第一個參數爲開始刪除的項,第二個參數(number類型)爲需要刪除的項的數目;接收多於兩個參數的時(如果第二個參數是number類型,會執行第二步操作的同時),會將第三個參數及之後的參數插入第一個參數指定的位置。此方法會影響當前數組。

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

alert(colors);      // red,green,blue
alert(colors2);     // red,green,blue,yellow,black,brown

var colors3 = colors.slice(1);
var colors4 = colors.slice(1, 2);

alert(colors3);     // green,blue
alert(colors4);     // green

var removed = colors.splice(0, 1);
alert(colors);      // green,blue
alert(removed);     // red

removed = colors.splice(1, 0, 'yellow', 'orange');
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(param);此方法從數組的開頭(位置0開始向後查找param,也可傳入第二個參數,作爲指定開始向後查詢的位置);

lastIndexOf();此方法從數組的末尾開始向前查找。

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: 'paper_crane'};
var people = [{name: 'paper_crane'}];

var morePeople = [person];

alert(people.indexOf(person));        // -1
alert(morePeople.indexOf(person));    // 0

迭代方法


every(); 對數組中的每一項運行給定的函數,如果該函數對每一項讀返回true,則返回true。

filter(); 對數組中的每一項運行給定的函數,返回該函數會返回true的項組成的數組。

forEach(); 對數組中的每一項運行給定的函數,此方法沒有返回值。

map(); 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。

some(); 對數組中的每一項運行給定的函數,如果該函數對任何一項返回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

var mapArr = numbers.map(function(item, index, array) {
  return index;
});

alert(mapArr);                 // 0,1,2,3,4,5,6,7,8

var filterArr = numbers.filter(function(item, index, array) {
  if (item > 2) {
    return item;
  }
});

alert(filterArr);              // 3,4,5,4,3

numbers.forEach(function(item, index, array) {
  item += 1;                   // 對原元素沒有影響
  array[index] += 1;           // 數組中的每一元素加1
});

alert(numbers);                // 2,3,4,5,6,5,4,3,2

歸併方法


reduce(); 此方法會迭代數組的所有項,然後構建一個最終返回的值,此方法是從數組的第一項開始逐步遍歷到最後;
reduceRight(); 次方法和reduce()方法一樣,但是是從末尾迭代到第一項。

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

var sum1 = numbers.reduce(function(prev, cur, index, array) {
  return prev + cur;
});

alert(sum1);           // 15

var sum2 = numbers.reduceRight(function(prev, cur, index, array) {
  return prev + cur;
});

alert(sum2);

發佈了32 篇原創文章 · 獲贊 11 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章