JavaScript Array（數(shù)組）
數(shù)組對(duì)象的作用是：使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值。
在線實(shí)例
創(chuàng)建數(shù)組, 為其賦值：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
頁(yè)面底部你可以找到更多的實(shí)例。
什么是數(shù)組?
數(shù)組對(duì)象是使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值。
如果你有一組數(shù)據(jù)（例如：車(chē)名字），存在單獨(dú)變量如下所示：
var car2="Volvo";
var car3="BMW";
然而，如果你想從中找出某一輛車(chē)？并且不是3輛，而是300輛呢？這將不是一件容易的事！
最好的方法就是用數(shù)組。
數(shù)組可以用一個(gè)變量名存儲(chǔ)所有的值，并且可以用變量名訪問(wèn)任何一個(gè)值。
數(shù)組中的每個(gè)元素都有自己的的ID，以便它可以很容易地被訪問(wèn)到。
創(chuàng)建一個(gè)數(shù)組
創(chuàng)建一個(gè)數(shù)組，有三種方法。
下面的代碼定義了一個(gè)名為 myCars的數(shù)組對(duì)象：
1: 常規(guī)方式:
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 簡(jiǎn)潔方式:
3: 字面:
訪問(wèn)數(shù)組
通過(guò)指定數(shù)組名以及索引號(hào)碼，你可以訪問(wèn)某個(gè)特定的元素。
以下實(shí)例可以訪問(wèn)myCars數(shù)組的第一個(gè)值：
以下實(shí)例修改了數(shù)組 myCars 的第一個(gè)元素:
 | [0] 是數(shù)組的第一個(gè)元素。[1] 是數(shù)組的第二個(gè)元素。 |
|---|
在一個(gè)數(shù)組中你可以有不同的對(duì)象
所有的JavaScript變量都是對(duì)象。數(shù)組元素是對(duì)象。函數(shù)是對(duì)象。
因此，你可以在數(shù)組中有不同的變量類(lèi)型。
你可以在一個(gè)數(shù)組中包含對(duì)象元素、函數(shù)、數(shù)組：
myArray[1]=myFunction;
myArray[2]=myCars;
數(shù)組方法和屬性
使用數(shù)組對(duì)象預(yù)定義屬性和方法：
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
完整的數(shù)組對(duì)象參考手冊(cè)
你可以參考本站關(guān)于數(shù)組的所有屬性和方法的完整參考手冊(cè)。
參考手冊(cè)包含了所有屬性和方法的描述（和更多的例子）。
完整數(shù)組對(duì)象參考手冊(cè)
創(chuàng)建新方法
原型是JavaScript全局構(gòu)造函數(shù)。它可以構(gòu)建新Javascript對(duì)象的屬性和方法。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕創(chuàng)建一個(gè)數(shù)組,調(diào)用ucase（）方法, 并顯示結(jié)果。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
上面的例子創(chuàng)建了新的數(shù)組方法用于將數(shù)組小寫(xiě)字符轉(zhuǎn)為大寫(xiě)字符。
更多實(shí)例
合并兩個(gè)數(shù)組 - concat()
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
合并三個(gè)數(shù)組 - concat()
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
用數(shù)組的元素組成字符串 - join()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕將數(shù)組作為字符串輸出。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
刪除數(shù)組的最后一個(gè)元素 - pop()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕刪除數(shù)組的最后一個(gè)元素。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.pop();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
數(shù)組的末尾添加新的元素 - push()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕給數(shù)組添加新的元素。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
將一個(gè)數(shù)組中的元素的順序反轉(zhuǎn)排序 - reverse()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕將數(shù)組反轉(zhuǎn)排序。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
刪除數(shù)組的第一個(gè)元素 - shift()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕刪除數(shù)組的第一個(gè)元素。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.shift();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
從一個(gè)數(shù)組中選擇元素 - slice()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕截取數(shù)組下標(biāo) 1 到 2 的元素。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
數(shù)組排序（按字母順序升序）- sort()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕升序排列數(shù)組。</p>
<button onclick="myFunction()">點(diǎn)我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
數(shù)字排序（按數(shù)字順序升序）- sort()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕升序排列數(shù)組。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
數(shù)字排序（按數(shù)字順序降序）- sort()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕降序排列數(shù)組。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在數(shù)組的第2位置添加一個(gè)元素 - splice()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕向數(shù)組添加元素。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
轉(zhuǎn)換數(shù)組到字符串 -toString()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕將數(shù)組轉(zhuǎn)為字符串并返回。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在數(shù)組的開(kāi)頭添加新元素 - unshift()
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">單擊按鈕在數(shù)組中插入元素。</p>
<button onclick="myFunction()">點(diǎn)我</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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例