當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS引用类型（2）——Array类型

發布時間：2025/4/9 javascript 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS引用类型（2）——Array类型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

【2】Array類型
ECMAScript數組的每一項可以保存任何類型的數據，并且大小是可以動態調整的，即可以隨著數據的添加自動增長以容納新增數據。

（1）創建數組

1》使用Array構造函數

var colors = new Array(); var colors = new Array(20); var colors = new Array("red","blue","green"); var colors = Array(3); var colors = Array("Greg");

2》使用數組字面量

var colors = ["red","blue","green"]; var colors = []; var colors = [1,2,];//不推薦使用，會創建一個包含2或3項的數組 var colors = [,,,,,];//不推薦使用，會創建一個包含5或6項的數組

與對象一樣，使用數組字面量表示法時，也不會調用Array構造函數。

（2）數組length屬性

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

var colors = ["red","blue","green"]; colors.length = 2; //移除最后一項 alert(colors[2]); //undefinedvar colors = ["red","blue","green"]; colors.length = 4; //數組不存在位置3 alert(colors[4]); //undefinedvar colors = ["red","blue","green"]; colors[colors.length] = "black"; //在位置3添加一種顏色 colors[colors.length] = "brown"; //在位置4添加一種顏色

（3）檢測數組

1》instanceof操作符：確定某個對象是不是數組

if(value instanceof Array){ //對數組執行某些操作 }

2》Array.isArray()方法：確定某個值到底是不是數組

if(Array.isArray(value)){ //對數組執行某些操作 }

IE 9+和其他瀏覽器支持此方法。

（4）轉換方法

1》前文講到Object對象都有toLocalString()、toString()、valueOf()方法

toLocaleString()方法：返回對象的字符串表示，該字符串與執行環境的地區對應。
toString()方法：返回對象的字符串表示。
valueOf()方法：返回對象的原始值，可能是字符串、數值或布爾值等。通常與toString()方法的返回值相同。

對數組而言：

toString()方法：返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。
valueOf()方法：返回對象的原始值。

var colors = ["red","blue","green"]; console.log(colors.toString()); //red,blue,green console.log(colors.toLocalString()); //red,blue,green console.log(colors.valueOf()); //["red","blue","green"] console.log(colors); //["red","blue","green"] alert(colors.toString()); //red,blue,green alert(colors.toLocalString()); //red,blue,green alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green

alert()要接受字符串參數，所以會在后臺調用toString()方法。
2》join()方法：使用不同分隔符來構建包含所有數組項的字符串

var colors = ["red","blue","green"]; alert(colors.join(",")); //red,blue,green alert(colors.join("||")); //red||blue||green

如果不給join方法傳入任何值，或者給它傳入undefined,則使用逗號作為分隔符。
如果數組中某一項的值是null或undefined，那么該值在join()、toLocalString()、toString()、valueOf()方法返回的結果中以空字符串表示。

（5）棧方法：LIFO后進先出；在棧的頂部插入，移除

1》push()方法：可以接受任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。
2》pop()方法：從數組末尾移除最后一項，減少數組的length值，然后返回移除的項。

var colors = new Array(); var count = colors.push("red","green"); alert(count); //2 count = colors.push("blue"); alert(count); //3var item = colors.pop(); alert(item); //"blue" alert(colors.length); //2

（6）隊列方法：FIFO先進先出；隊列在列表的末端添加項，從列表的前端移除項

1》push()方法：可以接受任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。
2》shift()方法：移除數組中的第一項并返回該項，同時將數組長度減1。

var colors = new Array(); var count = colors.push("red","green"); alert(count); //2 count = colors.push("blue"); alert(count); //3var item = colors.shift(); alert(item); //"red" alert(colors.length); //2

3》unshift()方法：在數組前端添加任意個項并返回新數組的長度。

使用unshift()和pop()方法，可以從相反方向來模擬隊列，即在數組的前端添加項，從數組末端移除項。

var colors = new Array(); var count = colors.unshift("red","green"); alert(count); //2 count = colors.unshift("blue"); alert(count); //3 console.log(colors); //["blue","red","green"]var item = colors.pop(); alert(item); //"green" alert(colors.length); //2

（7）重排序方法

1》reverse()方法：反轉數組項順序。

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

2》sort()方法：按升序排列數組項。

var values = [0,1,5,10,15,6,25]; values.sort(); //[0,1,10,15,25,5,6] 進行字符串比較

sort()方法可以接受一個比較函數作為參數。

（8）操作方法

1》concat()方法：基于當前數組中的所有項創建一個新數組。不會影響原始數組。

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

2》slice()方法：基于當前數組中的一或多個項創建一個新數組。不會影響原始數組。
可以接受一或兩個參數，即要返回項的起始和結束位置。

var colors = ["red","green","black"，"yellow","blue","brown"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4);alert(colors); //red,green,black,yellow,blue,brown alert(colors2); //green,black,yellow,blue,brown alert(colors3); //green,black,yellow

如果slice()方法的參數中有一個負數，則用數組長度加上該數來確定相應的位置。如果結束位置小于起始位置，則返回空數組。
3》splice()方法。
刪除：可以刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置和要刪除的項數。
插入：可以向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的項數）、要插入的項。如果要插入多個項，可以再傳入第四、第五，以至任意多個項。
替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需提供3個參數：起始位置、要刪除的項數、要插入的任意數量的項。插入的項數不必與刪除的項數相等。
splice()方法始終都會返回一個數組，該數組包含從原始數組中刪除的項（如果沒有刪除任何項，則返回一個空數組）。

var colors = ["red","green","blue"]; 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

（9）位置方法

indexOf()和lastIndexOf()兩個方法。都接收兩個參數：要查找的項和表示查找起點位置的索引（可選的）。其中indexOf()方法從數組的開頭開始向后查找，lastIndexOf()方法從數組的末尾開始向前查找。
這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回-1。在比較第一個參數與數組中的每一項時，會使用全等操作符，也就是說，要求查找的項必須嚴格相等。

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)); //3var person = {name:"Nicholas"}; var people = [{name:"Nicholas"}];var morePeople = [person];alert(people.indexOf(person)); //-1 alert(morePeople.indexOf(person)); //0

（10）迭代方法

ECMAScript5為數組定義了5個迭代方法。
每個方法都接受兩個參數：要在每一項上運行的函數和（可選的）運行該函數的作用域對象——影響this的值。
傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象本身。

every()：對數組中的每一項運行給定函數，如果該函數對每一項都返回true，則返回true。
some()：對數組中的每一項運行給定函數，如果該函數對任一項返回true，則返回true。
filter()：對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。
forEach()：對數組中的每一項運行給定函數，這個方法沒有返回值。
map()：對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

以上方法都不會修改數組中的包含的值。

IE 9+和其他瀏覽器支持

（11）歸并方法

reduce()和reduceRight()方法迭代數組所有項，然后構建一個最終返回的值。
其中，reduce()從數組的第一項開始，逐個遍歷到最后。reduceRight()方法則相反。
這兩個方法都接受兩個參數：一個在每一項上調用的函數和（可選的）作為歸并基礎的初始值。
傳入這些方法中的函數會接收四個參數：前一個值，當前值，項的索引和數組對象。

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