JavaScript 中数组实用浅析

本文适用于HTML、ASP 中的 JavaScript 脚本代码。代码以 HTML 中的 JS 为例，如果在 ASP 中，请将 document.write 改为 Response.Write 即可。

小贴士

编写 JS 最好的方式就是将代码存为.js的独立文件，并在 html 文档最后 </body> 标签之前放置 <script> 标签，并把它的 src 属性指向该文件。

数组 (array) 是一种可以存储一组信息的变量，即和对象一样是数值的集合，数组可以包含任何类型数据。

数组的创建

可以使用构造函数 Array() 来创建数组，一旦创建好数组，就可以轻松给数组的任何元素赋值，可以把任何值混合存储在数组中，如下代码：

//创建包含4个元素的数组myArray1
document.write("<h3>创建包含4个元素的数组 myArray1 </h3>");
var myArray1 = new Array(4); 
document.write("<h3>为 myArray1 进行赋值，没有赋值的显示 undefined</h3>");
myArray1[0] = 1.2;
myArray1[2] = "JavaScript";
myArray1[3] = true;
//遍历所有myArray1数组元素
for(var i=0; i<myArray1.length; i++) {
    document.write("myArray1[" + i + "] = " + myArray1[i] + "<br>");    
}
document.write("<hr>");

//创建一个空元素的数组
document.write("<h3>创建空元素的数组 myArray2 </h3>");
var myArray2 = new Array();
document.write("<h3>为 myArray2 进行赋值，没有赋值的显示 undefined</h3>");
myArray2[0] = {x:1, y:3};
myArray2[1] = "JS";
myArray2[2] = false;
//遍历所有myArray2数组元素
for(var j=0; j<myArray2.length; j++) {
    document.write("myArray2[" + j + "] = " + myArray2[j] + "<br>");    
}

在 firefox 浏览器中预览后显示如下：

数组直接量

JS 还定义了创建并初始化数组的直接量语法。数组直接量是一个封闭在方括号中的序列，序列中的元素由逗号分隔，括号内的值将被依次赋给数组元素，下标从 0 开始。

上面的数组的创建都以用以下代码实现：

//创建包含4个元素的数组myArray1
document.write("<h3>创建包含4个元素的数组 myArray1 </h3>");
document.write("<h3>为 myArray1 进行赋值，没有赋值的显示 undefined</h3>");
//其中下标为1的元素没有赋值
var myArray1 = [1.2, , "JavaScript", true];

//遍历所有myArray1数组元素
for(var i=0; i<myArray1.length; i++) {
    document.write("myArray1[" + i + "] = " + myArray1[i] + "<br>");    
}
document.write("<hr>");

//创建一个空元素的数组
document.write("<h3>创建空元素的数组 myArray2 </h3>");
document.write("<h3>为 myArray2 进行赋值，没有赋值的显示 undefined</h3>");
var myArray2 = [{x:1, y:3}, "JS", false];
//遍历所有myArray2数组元素
for(var j=0; j<myArray2.length; j++) {
    document.write("myArray2[" + j + "] = " + myArray2[j] + "<br>");    
}

数组直接量中的元素也可以是任意表达式。数组直接量也可被嵌套。

var myArray2 = [[1, 2, 3], [4, 5, 6]];
document.write(myArray2[1][1]); 
//myArray2[1][1] 值为 5

数组元素的添加、删除

数组拥有 length 属性，表示数组元素的个数，myArray[myArray.length – 1] 代表数组的最后一项，在数组末尾添加元素使用 myArray[myArray.length] 赋值，或者使用 myArray.push 方法。

在数组开头添加元素使用 myArray.unshift 方法。

从数组中删除元素使用 myArray.pop() 或者 myArray.shift() 方法。

具体的使用详见下面的代码范例中：

function Bianli(num) {
    for(var i=0; i<num.length; i++) {
        document.write("numbers[" + i + "] = " + num[i] + "<br>");
    }
    document.write("<hr>");    
}

document.write("<h3>数组元素的添加、删除应用示例</h3>");
var numbers = [2, 3];

//遍历数组numbers所有元素
Bianli(numbers);

document.write("numbers[numbers.length - 1] 的值为 " + numbers[numbers.length - 1]); 
//显示最后一个元素值为 6

document.write("<h4>数组末尾添加元素4, 5, 6</h4>");
numbers.push(4, 5);
numbers[numbers.length] = 6;

Bianli(numbers);

document.write("<h4>数组开头添加元素0, 1 </h4>");
numbers.unshift(0, 1);
Bianli(numbers);

document.write("<h4>从数组中删除第一个元素</h4>");
numbers.shift();
Bianli(numbers);

document.write("<h4>从数组中删除最后一个元素</h4>");
numbers.pop();
Bianli(numbers);

效果如下：

在数组中间添加元素使用 myArray.splice 方法。

function Bianli(num) {
    for(var i=0; i<num.length; i++) {
        document.write("numbers[" + i + "] = " + num[i] + "<br>");
    }
    document.write("<hr>");    
}

document.write("<h3>数组元素中间元素删除与添加</h3>");
var numbers = ["One", "Two", "Three", "Four", "Five"];

Bianli(numbers);

document.write("<h4>删除其中的Two, Three元素</h4>");
numbers.splice(1, 2);
Bianli(numbers);

document.write("<h4>在One 后添加 Two, Three元素</h4>");
numbers.splice(1, 0, "Two", "Three");
Bianli(numbers);

预览后效果如下：

以上就是本人一点总结，有问题欢迎大家指正。