引用類型(數組常用方法)

引用類型的值(對象)是引用類型的一個實例。在ECMAScript中,引用類型是一種數據結構,用於把數據和功能組織在一起。Javascript中的數組與其他語言的數組都是數據的有序列表,但是又與其他語言的數組有着很大的區別,舉個例子Java中數組裏面只能存儲相同的數據類型,而在ECMAScript中,數組可以存儲不同類型的數據。數組的大小也可以動態的調整。隨着數據的增加自動增長以容納新數據。

創建數組的基本方式有兩種:

(1)使用Array構造函數

         var array=new Array();//一個空數組

如果預先知道要保存的項目數量,也可以給構造函數傳遞該數量,該數量會自動變成length屬性的值。例如:

       var arrays=new Array(10);//創建一個長度爲10的數組,每個元素的值是undefined

當向構造函數中傳遞多個數值參數時:(和傳遞多個字符串的效果一樣,參數變成數組中包含的項)

var a=new Array(10,20);

也可以向數組的構造函數中傳遞數組中包含的項

      var colors=new Array("red","green","white",2);


 另外還可以去掉new,和有new的效果一樣。

(2)第二種方式:(數組字面量的方式)由一對包含數組項的方括號表示,數組項之間可以用逗號分隔如下;

var colors=["green","red","white"]//創建一個包含三個字符串的數組

var names=[];//創建一個空數組

var values=[1,2,]//不建議,創建一個包含2項或3項的數組,在IE8版本之前會創建三項(1,2,undefined),其他瀏覽器會創建一個包含2項的數組,值爲(1,2)。

var opotions=[,,,,,,]//不建議,創建一個包含6項或7項的數組, 瀏覽器支持如上。

讀取和設置數組值時,要使用方括號對提供相應值的基於0的數字索引,如下:

  var colors=new Array("red","green","white");

console.log(colors[0]);//red

console.log(colors[1]);//green

console.log(colors[2]);//white

console.log(colors[3]);//undefined

設置也可以使用colors[索引]=‘值’的形式:

colors[3]='';

console.log(colors);

console.log(colors);

數組的項數保存在其length屬性中,length始終會返回0或者更大的值,length很有特點,不是隻讀的,因此可以設置這個屬性從數組的末尾移除項,或者向數組中添加新項。(注意數組的最後一個元素的索引是length-1)。

數組最多可以包含4294967295個項,幾乎可以滿足任何編程需求了,超出這個上限會發生異常,而創建一個初始大小與這個上限接近的數組,則可能會導致運行時間超長的腳本錯誤。

接下來我們看下數組的常用方法:

(1)檢測數組:instanceof操作符,檢測某個對象是不是XXX的實例(如下檢查colors對象是不是Array的實例,是返回true,不是返回false)

var colors=["green","red","white"]

console.log(colors instanceof Array);//true

console.log(colors instanceof Object);//true

instanceof操作符存在的問題在於假定只有一個全局執行環境,如果網頁中包含多個框架,那麼實際上就存在兩個以上的不同的執行環境,也就存在兩個以上不同版本的Array構造函數,如果你從一個框架向另外一個框架傳入一個數組,那麼傳入的數組與第二個框架中原生創建的數組分別具有各自不同的構造函數。爲了解決這個問題ECMAScript5新增加了Array.isArray()方法,這個方法的最終目的是確定某個值到底是不是數組,而不管在那個全局環境中創建的。

if(Array.isArray(colors )){

//要執行的操作

}

Array.isArray()

Array.isArray() 用於確定傳遞的值是否是一個 Array

(2)轉換方法

所有對象都具有toLocaleString() toString() valueOf()方法。

valueOf()返回數組的原始值,也就是數組本身。

toString()把數組轉換成字符串並返回結果。比如我們alert(colors)的時候就默認的調用了數組的toString();

console.log(colors.toString())

如果數組的元素是對象:

toLocaleString()

 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串,這些字符串將使用一個特定語言環境的字符串(例如一個逗號 ",")隔開。

toString()和toLocaleString()區別:

 

使用join()方法可以重現上述的方法的輸出,join()接下來細講。

如果數組中有一項是undefined或者是null,該值在join(),toString(),toLocaleString(),valueOf()方法返回的結果都是空字符串。

(3)棧方法 

ECMAScript5提供了push()和pop()方法,以便實現類似棧的行爲。棧是一種後進先出的數據結構。(操作的是數組的末尾)

push()方法將一個或多個元素添加到數組的末尾(也可是對象或數組形式),並返回該數組的新長度。修改的是原數組。

pop()方法從數組中刪除最後一個元素,並返回該元素的值。此方法更改數組的長度,

元素如果是對象就返回對象

(4) 隊列(通道)

隊列訪問的數據結構是先進先出,(也就是操作的數組的開頭)

shift()刪除並返回數組的第一個元素,改變的是原數組

和push結合使用可以像使用對列一樣使用數組。

unshift()向數組的開頭添加一個或更多元素,並返回新的長度 ,改變原數組。

使用unshift()和pop()也可以從相反方向實現對列。

(5)重排序方法

數組中的sort()和reverse()是只可以用來重排序的方法。

reverse()方法顛倒數組中元素的位置,並返回該數組的引用。操作的是原數組如下:

var array1=[1,2,"red",8,6,9];
array1.reverse();
console.log(array1);

sort() 方法對數組的元素進行排序,操作的是原數組,是按照元素字符串順序排列如下:

var arrrr1=[1,2,20,10];
arrrr1.sort();
arrrr1

因此sort()方法可以傳入一個比較器函數,這個函數有兩個參數如下:

function compare(value1,value2){

if(value1<value2){

return -1;

}else if(value1<value2)){

return 1;

}else{

return 0;

}

},

如果其中一個元素時對象,寫比較器函數的時候按對象的某個屬性排序即可如:

function compare(value1,alue2){

return value1.age - value2.age

}

(6)操作方法

concat()連接兩個或更多的數組,並返回新數組。不改變原數組

 slice()從某個已有的數組返回選定的元素,可以接受兩個參數,既要返回項的起始和結束位置。只有一個參數的情況下,返回從該參數指定的位置到數組末尾的所有項。如果有兩個參數,返回起始位置和結束位置之間的項,不包括結束位置的項(含頭不含尾),不影響原數組,返回新的數組是數組截取的方法。如下:

var colors=['red',"green","white","purper","pink"];
var b=colors.slice(2);
console.log(colors);

console.log(b)

兩個參數時:

 var colors=['red',"green","white","purper","pink"];
var b=colors.slice(2,4);
console.log(colors);

console.log(b);

splice() 數組中功能強大的方法。splice()方法改變原數組。

刪除:兩個參數,開始位置和要刪除的項數

var colors=["red","green","bule"];

var removeEle=colors.splice(1,2);
console.log(colors);

console.log(removeEle);

插入:三個參數,起始位置,0(要刪除的項數),要插入的項.注意從1的索引位置開始,原來1索引位置的元素向後移。

var colors=["red","green","bule"];

var add=colors.splice(1,0,"yellow","lightGreen");
console.log(colors);

console.log(add);

替換:三個參數,起始位置,要刪除的項數,要插入的項

var colors=["red","green","bule"];

var remove=colors.splice(1,3,"yellow","lightGreen");

console.log(colors);

console.log(remove);

join()數組拼接,把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。不改變原數組,如果元素時對象,就是

[Object Object]

var array=["red","green","bule"];

array.join("||");
console.log(array);

使用join()把數組變成字符串"redgreenbule"

var array1=["red","green","bule"];
var c =array1.join("");
console.log(c);

(7)位置方法

indexOf()和lastIndexOf()這兩個方法都接收兩個參數,要查找的項和查找起點位置的索引(可選),indexOf()從數組的開頭查找,lastIndexOf()從數組的結尾向前開始查找。都會返回查找想在數組中的位置,沒找到的情況返回-1,在比較都一個參數與數組的每一項會使用全等操作符,也就是說查找的項必須嚴格相等(使用===)。

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

console.log(numbers.indexOf(4));//3

console.log(numbers.lastIndexOf(4));//5

console.log(numbers.lastIndexOf(4,4));//3

find() 和findIndex()

 find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

includes()方法用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。

(8)迭代方法

every(),filter(),forEach(),some(),map()

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

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

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

map() 方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。

some()對數組運行的每一項給定函數,如果該函數對任意一項返回true就會返回true。

方法測試是否至少有一個元素可以通過被提供的函數方法。該方法返回一個Boolean類型的值

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

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));

every()和some()都是用於查詢數組中的項是否滿足某個條件,對every()來說,傳入的函數必須不許對每一項都返回true,這個方法才返回true,否則他就返回false,而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)

})

console.log(everyresult);//false

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

var everyresult=numbers.some(function(item,index,array){

return (item>2)

})

console.log(everyresult);//true

filter()函數,他利用指定的函數確定是否在返回的數組中包含某一項,例如要返回所有數組都大於2的數組

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

var everyresult=numbers.filter(function(item,index,array){

return (item>2)

})

console.log(everyresult);

map()函數也返回一個數組,而這個數組的每一項都在原數組中的對應項上運行傳入函數的結果,例如要給數組的每一項乘以二,返回這些乘積組成的數組。

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

var everyresult=numbers.map(function(item,index,array){

return item*2

})

console.log(everyresult);

forEach()對數組的每一項運行傳入的函數,返回值是undefinde。

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

numbers.forEach(function(item,index,array){

alert(item+2);

})

(9)歸併方法

reduce(),reduceRight()這兩個方法都會迭代數組的所有項,然後構建一個最終返回的值,reduce()從數組的第一項開始,逐個遍歷到最後,reduceRight()是從數組的最後一項開始,向前遍歷到第一項。這兩個方法都接收兩個參數:一個在每一項上調用的函數,和(可選)作爲歸併基礎的初始值。傳給reduce(),reduceRight()的函數接收四個參數:前一個值,當前值,項的索引和數組對象這個函數返回的任何值都會作爲第一個參數傳遞給下一項。第一次迭代發生在數組的第二項上,因此第一個參數時數組的第一項,第二個參數是數組的第二項。

一般用這個方法可以做數組所有元素求和:

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

var everyresult=numbers.reduce(function(pre,curr,index,array){

return pre+curr;

})

console.log(everyresult);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章