JavaScript中文參考手冊 / JavaScript Array（數(shù)組）

JavaScript Array（數(shù)組）

數(shù)組對象的作用是：使用單獨的變量名來存儲一系列的值。

在線實例

創(chuàng)建數(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>

運行實例 ?

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

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

什么是數(shù)組?

數(shù)組對象是使用單獨的變量名來存儲一系列的值。

如果你有一組數(shù)據(jù)（例如：車名字），存在單獨變量如下所示：

var car1="Saab";
var car2="Volvo";
var car3="BMW";

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

最好的方法就是用數(shù)組。

數(shù)組可以用一個變量名存儲所有的值，并且可以用變量名訪問任何一個值。

數(shù)組中的每個元素都有自己的的ID，以便它可以很容易地被訪問到。

創(chuàng)建一個數(shù)組

創(chuàng)建一個數(shù)組，有三種方法。

下面的代碼定義了一個名為 myCars的數(shù)組對象：

1: 常規(guī)方式:

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"];

訪問數(shù)組

通過指定數(shù)組名以及索引號碼，你可以訪問某個特定的元素。

以下實例可以訪問myCars數(shù)組的第一個值：

var name=myCars[0];

以下實例修改了數(shù)組 myCars 的第一個元素:

myCars[0]="Opel";

	[0] 是數(shù)組的第一個元素。[1] 是數(shù)組的第二個元素。

在一個數(shù)組中你可以有不同的對象

所有的JavaScript變量都是對象。數(shù)組元素是對象。函數(shù)是對象。

因此，你可以在數(shù)組中有不同的變量類型。

你可以在一個數(shù)組中包含對象元素、函數(shù)、數(shù)組：

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

數(shù)組方法和屬性

使用數(shù)組對象預(yù)定義屬性和方法：

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

完整的數(shù)組對象參考手冊

你可以參考本站關(guān)于數(shù)組的所有屬性和方法的完整參考手冊。

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

完整數(shù)組對象參考手冊

創(chuàng)建新方法

原型是JavaScript全局構(gòu)造函數(shù)。它可以構(gòu)建新Javascript對象的屬性和方法。

實例

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

<p id="demo">單擊按鈕創(chuàng)建一個數(shù)組,調(diào)用ucase（）方法, 并顯示結(jié)果。</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>

運行實例 ?

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

上面的例子創(chuàng)建了新的數(shù)組方法用于將數(shù)組小寫字符轉(zhuǎn)為大寫字符。

實例

<!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>

運行實例 ?

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

合并三個數(shù)組 - concat()

實例

<!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>

運行實例 ?

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

用數(shù)組的元素組成字符串 - join()

實例

<!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()">點我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

運行實例 ?

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

刪除數(shù)組的最后一個元素 - pop()

實例

<!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()">點我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例 ?

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

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

實例

<!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()">點我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例 ?

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

將一個數(shù)組中的元素的順序反轉(zhuǎn)排序 - reverse()

實例

<!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()">點我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例 ?

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

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

實例

<!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()">點我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例 ?

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

從一個數(shù)組中選擇元素 - slice()

實例

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

<p id="demo">點擊按鈕截取數(shù)組下標 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>

運行實例 ?

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

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

實例

<!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()">點我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

運行實例 ?

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

數(shù)字排序（按數(shù)字順序升序）- sort()

實例

<!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()">點我</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>

運行實例 ?

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

數(shù)字排序（按數(shù)字順序降序）- sort()

實例

<!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()">點我</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>

運行實例 ?

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

在數(shù)組的第2位置添加一個元素 - splice()

實例

<!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()">點我</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>

運行實例 ?

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

轉(zhuǎn)換數(shù)組到字符串 -toString()

實例

<!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()">點我</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>

運行實例 ?

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

在數(shù)組的開頭添加新元素 - unshift()

實例

<!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()">點我</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（布爾） →

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Javascript 教程

JS 函數(shù)

JS HTML 文檔對象模型

JS 高級教程

JS 瀏覽器BOM

JS 庫

JS 實例

JS 參考手冊

JavaScript Array（數(shù)組）

在線實例

實例

什么是數(shù)組?

創(chuàng)建一個數(shù)組

訪問數(shù)組

在一個數(shù)組中你可以有不同的對象

數(shù)組方法和屬性

完整的數(shù)組對象參考手冊

創(chuàng)建新方法

實例

更多實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

教程導(dǎo)航