JavaScript Array（陣列）

陣列物件的作用是：使用單獨的變數名稱來儲存一系列的值。

線上實例

建立陣列, 為其賦值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

頁面底部你可以找到更多的實例。

什麼是陣列?

陣列物件是使用單獨的變數名稱來儲存一系列的值。

如果你有一組資料（例如：車名），存在單獨變數如下所示：

var car1="Saab";

var car2="Volvo";

var car3="BMW";

然而，如果你想從中找出某一輛車？並且不是3輛，而是300輛呢？這將不是一件容易的事！

最好的方法就是用陣列。

陣列可以用一個變數名稱儲存所有的值，並且可以用變數名稱存取任何一個值。

陣列中的每個元素都有自己的ID，以便它可以很容易地被存取。

建立一個陣列

建立一個數組，有三種方法。

下面的程式碼定義了一個名為 myCars的陣列物件：

1: 常規方式:

var myCars=new Array();

myCars[0]="Saab";

myCars[1]="Volvo";

myCars[2]="BMW";

2: 簡潔方式:

var myCars=new Array("Saab","Volvo","BMW") ;

3: 字面上:

var myCars=["Saab","Volvo","BMW"];

#存取陣列

透過指定陣列名稱以及索引號碼，你可以存取某個特定的元素。以下實例可以存取myCars數組的第一個值：以下實例修改了陣列myCars 的第一個元素:

var name=myCars[0];

myCars[0]="Opel";##### ##########################[0] 是陣列的第一個元素。 [1] 是數組的第二個元素。 ############

在陣列中你可以有不同的物件

所有的JavaScript變數都是物件。數組元素是對象。函數是物件。

因此，你可以在陣列中有不同的變數類型。

你可以在一個陣列中包含物件元素、函數、陣列：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

陣列方法和屬性

使用陣列物件預先定義屬性和方法：

var x=myCars.length // myCars 中元素的數量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值

完整的陣列物件參考手冊

你可以參考本站關於陣列的所有屬性和方法的完整參考手冊。

參考手冊包含了所有屬性和方法的描述（和更多的例子）。

完整陣列物件參考手冊

建立新方法

原型是JavaScript全域建構子。它可以建構新Javascript物件的屬性和方法。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

上面的範例建立了新的陣列方法用於將陣列小寫字元轉為大寫字元。

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
	
</body>
</html>

運行實例»##點擊"運行實例" 按鈕查看在線實例

合併三個數組- concat()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

</body>
</html>

運行實例»#點擊"運行實例" 按鈕查看線上實例

使用陣列的元素組成字串- join()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

執行實例»點擊"執行實例"按鈕查看線上實例

刪除陣列的最後一個元素- pop()

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

##運行實例»
點擊"運行實例" 按鈕查看線上實例

數組的末尾添加新的元素- push()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

執行實例»

點擊"執行實例" 按鈕查看線上實例

#將一個陣列中的元素的順序反轉排序- reverse()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

刪除數組的第一個元素- shift()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

從一個陣列中選擇元素- slice()

##實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

#運行實例»點擊"運行實例" 按鈕查看線上實例

數組排序（按字母順序升序）- sort()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

##數字排序（按數字順序升序)- sort()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

#運行實例»
##點擊"運行實例"按鈕查看線上實例

數字排序（以數字順序降序）- sort()

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

在陣列的第2位置新增一個元素- splice()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

執行實例»

點擊"執行實例" 按鈕查看線上實例

轉換陣列到字串-toString()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

在陣列的開頭新增元素- unshift()

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em>undefined</em>。</p>

</body>
</html>

運行實例»

##點擊"運行實例" 按鈕查看線上實例

← JavaScript Date（日期）

JavaScript Boolean（布林） →

JavaScript Array（陣列）

線上實例

var car1="Saab";

2: 簡潔方式:

在陣列中你可以有不同的物件

陣列方法和屬性

完整的陣列物件參考手冊

建立新方法

實例

更多實例

實例

實例

實例

PHP中文網