数组对象的作用是:使用单独的变量名来存储一系列的值。
在线实例
创建数组, 为其赋值:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>芝麻教程(web3.xin)</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数组的第一个值:
var name=myCars[0];以下实例修改了数组 myCars 的第一个元素:
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>芝麻教程(web3.xin)</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>上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。
更多实例
合并两个数组 - concat()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>芝麻教程(web3.xin)</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>