JavaScript Array

The function of an array object is to store a series of values using separate variable names.

Online Example

Create an array and assign a value to it:

Instance

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

Run Instance »

Click the "Run Instance" button to view online instances

You can find more instances at the bottom of the page.

What is an array?

An array object uses separate variable names to store a series of values.

If you have a set of data (for example: car name), there is a separate variable as follows:

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

However, what if you want to find a certain car? And not 3 cars, but 300 cars? This will not be an easy task!

The best way is to use an array.

Arrays can store all values using a variable name, and any value can be accessed using the variable name.

Each element in the array has its own ID so that it can be easily accessed.

Create an array

There are three ways to create an array.

The following code defines an array object named myCars:

1: Conventional method:

var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: Concise way:

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

3: Literal:

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

Accessing Array

You can access a specific element by specifying the array name and index number.

The following instance can access the first value of the myCars array:

var name=myCars[0];

The following example modifies the first element of the array myCars:

myCars[0]="Opel";

	[0] is the first element of the array. [1] is the second element of the array.

You can have different objects in an array

All JavaScript variables are objects. Array elements are objects. Functions are objects.

So, you can have different variable types in the array.

You can include object elements, functions, and arrays in an array:

##myArray[0]=Date.now;

myArray[1]=myFunction;
myArray[2]=myCars;

Array methods and properties

Use predefined properties and methods of array objects:

var x=myCars.length //The number of elements in myCars

var y=myCars.indexOf("Volvo") //The index value of the "Volvo" value

Complete array object reference Manual

You can refer to this site for a complete reference manual on all properties and methods of arrays.

The reference manual contains descriptions of all properties and methods (and more examples).

Complete Array Object Reference Manual

Creating new methods

The prototype is the JavaScript global constructor. It can construct properties and methods of new Javascript objects.

Instance

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

Run Instance»Click the "Run Instance" button to view the online instance

The above example creates a new array method for converting array lowercase characters to uppercase characters.

More examples

Combining two arrays - concat()

Examples

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

Run Example»Click the "Run Example" button to view the online example

Merge three arrays - concat()

Instance

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

Run instance»Click the "Run instance" button to view the online instance

Use The elements of the array form a string - join()

Instance

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

Run instance»Click "Run instance" Button to view online examples

Delete the last element of the array - pop()

Example

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

Run Example»Click the "Run Example" button to view the online example

Add a new element at the end of the array - push()

Example

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

Run Example»

Click the "Run Example" button to view the online example

Reverse the order of the elements in an array - reverse()

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Delete the first element of the array - shift()

Instance

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

Run instance»

Click "Run" Example" button to view online examples

Select elements from an array - slice()

Example

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

Run Example»

Click the "Run Example" button to view the online example

Array sorting (in ascending alphabetical order) - sort()

Example

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

Run Instance»

Click the "Run Instance" button to view the online instance

Sort numerically (in ascending numerical order )-sort()

Instance

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

Run instance»

Click the "Run instance" button to view the online instance

Numerical sorting (descending numerical order) - sort()

Example

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

Running example»

Click the "Run Example" button to view the online example

Add an element at the 2nd position of the array - splice()

Example

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

Run Example»

Click the "Run Example" button to view the online example

Convert array to string-toString()

Instance

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

Run Instance»

Click the "Run Instance" button to view the online instance

Add new elements at the beginning of the array - unshift()

Example

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

Run Example»

Click "Run" Example" button to view online examples

← JavaScript Date

JavaScript Boolean (Boolean) →