JavaScript Chinese Reference Manual / 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ù)組對象預定義屬性和方法：

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

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

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

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

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

創(chuàng)建新方法

原型是JavaScript全局構造函數(shù)。它可以構建新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 Tutorial

JS function

JS HTML DOM

JS Advanced Tutorial

JS browser BOM

JS library

JS example

JS Reference Manual

JavaScript Array（數(shù)組）

在線實例

實例

什么是數(shù)組?

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

訪問數(shù)組

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

數(shù)組方法和屬性

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

創(chuàng)建新方法

實例

更多實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

實例

Tutorial Navigation