1. 程式人生 > >JavaScript之引用類型(Array類型)

JavaScript之引用類型(Array類型)

找到 ... 檢測 str 默認 顯示調用 自動 了解 fff

除了Object類型,Array是ECMAScript中最常用的類型了。
與其他語言不同的是,ECMAScript數組的每一項可以保存任何類型的數據。
而且,ECMAScript數組的大小是可以動態調整的,可以隨著數據的添加,數組的長度自動增長。

創建數組的方式

1.使用Array構造函數

var colors1 = new Array();
var colors2 = new  Array(20);
var colors3 = new Array("ggr",11,"grr");

2.使用數組字面量表示法

var colors = ["red","gren"];
var values = [1,2,];//強烈建議不要這樣使用,因為在不同瀏覽器下,實現方式不同
//在IE中,第三個值為undefined,在其他瀏覽器中,只會創建包含1和2的數組。

數組的length屬性

這個屬性不是只讀的,可以設置這個屬性,可以從數組的末尾移除項或向數組中添加新項。

var colors = ["res","rer","gege"];
colors.length = 2;
alert(colors[2]);//undefined

檢測數組

1.在一個網頁或者全局作用域中,使用instanceof就能搞定。

value instanceof Array

2.如果網頁中出現多個框架,實際上就存在兩個以上不同的全局執行環境。為了解決這個問題,提供了Array.isArray(value)的方法。支持Array.isArray()的方法瀏覽器有IE9+,Firefox4+。

下面總結一下數組的這些方法

根據我自己的情況,比較熟的方法,就列舉一下,就不詳細說明了。
1.轉換方法
所有對象都具有toLocaleString(),toString(),valueOf()方法,其中tostring()方法會返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。
而調用valueOf方法返回的還是數組。如果沒有顯示調用toString()方法,還是會在後臺調用toString()方法。這三種方法在默認情況下都會以逗號分隔的字符串的形式返回數組項,如果使用join()方法,則可以使用不同的分隔符。數組的join方法只接受一個參數,即用作分隔符的字符串。
2.類似棧的方法:pop和push,棧的添加和刪除都在棧頂進行操作,所以是一個後進先出的數據結構。
push(推入):可以接受任意數量的參數,然後返回修改後的數組的長度。
pop(彈出):可以從數組末尾移除最後一項,減少數組的長度,返回刪除的項。
3.當然除了類似棧的方法,還有類似隊列的方法:shift和push。隊列是先進先出,添加是在隊尾,移除是在隊首。
shift:移除數組中的第一項,並返回該項。
push:是在數組的末尾逐個添加。
結合使用shift和push可以像隊列一樣使用數組。
unshift:在數組前端添加任意個元素,並返回數組的長度。
pop:在數組末尾刪除一項,返回刪除的項。
結合使用unshift和pop可以反向模擬隊列。
4.重排序方法:reverse和sort,這兩個返回的是排序過後的數組。
reverse:顧名思義,就是將數組的順序進行反轉。
sort方法:在默認情況下,sort方法進行排序是按升序排列數組項,會調用每個數組項的toString()方法,然後比較得到的字符串,以確定如何排序。即使數組中的每一項都是數值,sort方法比較的也是字符串。
所以在進行數字排序的時候會出現一些問題,可以接受一個函數。

5.操作方法
concat():會基於當前數組中的所有項創建一個新數組,最開始,先創建這個數組的一個副本,然後將接受到的參數添加到這個副本中,最後返回一個新構建的數組。

var colors = ["ff","ffff"];
var colo = colors.concat();
console.log(colors);
console.log(colo);
console.log(colors === colo);

slice():切片,接受一個或兩個參數。
如果只有一個參數,就返回這個參數指定位置到數組末尾的所有項。
如果有兩個參數,就是起始位置和結束位置,返回起始位置到結束位置的所有項,但是不包括結束位置那一項。
slice也不會改變 原數組。

var colors = ["ff","ffff"];
var colo = colors.slice(0,1);
console.log(colors);
console.log(colo);

如果參數是個負數,那麽就用數組長度加上每個參數,再進行返回。
如果第一個參數大於第二個參數,那麽就返回空數組。

splice()方法:這個方法是最強大的方法了。主要用途是向數組的中部插入項。
(1)刪除:兩個參數:刪除的起始位置,刪除項數。
(2)插入:可以向指定位置插入任意數量的項。三個參數,起始位置,0(要刪除的項數),要插入的項。如果插入多個項,可以傳入第四,第五歌參數。

colors.splice(2,0,"geet","grrg")

(3)替換:可以向指定位置插入任意數量的項,且會刪除任意數量的項。三個參數:起始位置,要刪除的項數,要插入的任意數量的項。
要插入的項和刪除的項數不一定相等。
總的來說,這三個方法的參數含義大概相同,可以找個比較好的方法來記憶。第一個是起始位置(刪除或者添加),刪除的項數,插入的項數。
這個方法對數組的改變,會直接影響到原數組。splice返回的是刪除的項,如果沒有就返回一個空數組。

6.位置方法:indexOf(),lastIndexOf().
既然是位置方法,當然返回的是元素在數組中的位置。這兩個方法都接受兩個參數,要查找的項,(可選的)要開始查找的起始位置的索引。
indexOf是從數組開頭進行查找,lastIndexOf是從數組末尾開始向前進行查找。最後返回項在數組中的索引。如果沒有找到,就返回-1.
支持這兩個方法的常用瀏覽器有:IE9+,Firefox2+,chrome。

7.叠代方法
一共有5個叠代的方法。
every(),
filter(),
forEach(),
map(),
some(),
都接受這樣一個函數參數:

function(item,index,array){
    ...//
}

支持這些叠代方法的常用瀏覽器有IE9+,Firefox2+,chrome。

8.歸並方法
reduce(),reduceRight().這兩個方法的區別在於reduce從數組前面進行叠代,一直到最後。reduceRight()是從數組後面進行叠代,到數組的開頭。
下面通過這個例子來說明

var values = [1,5,4,7];
var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
});
console.log(sum);//17

支持這兩個歸並方法的常用瀏覽器有:IE9+,Firefox3+,chrome。

JavaScript之引用類型(Array類型)