JavaScript 数组方法：创建与示例

作者： James Hartman James Hartman
小时 - 权威教程 更新于

什么是数组？

数组是一个可以存储“项目集合”的对象。当您需要存储大量相同类型的数据时，数组会变得非常有用。假设您想存储 500 名员工的详细信息。如果您使用变量，您将不得不创建 500 个变量，而您可以用一个数组完成同样的事情。您可以通过引用其“索引号”来访问数组中的项目，数组的第一个元素的索引是零。

JavaScript 创建数组

您可以像下面这样在“JavaScript”中创建一个数组。

var students = ["John", "Ann", "Kevin"];

在这里，您在创建数组时就用“John”、“Ann”和“Kevin”的值对其进行了初始化。 “John”、“Ann”和“Kevin”的索引分别是 0、1 和 2。如果您想向 students 数组添加更多元素，可以这样做：

students[3] = "Emma";
students[4] = "Rose";

您也可以使用 Array 构造函数像这样创建一个数组：

var students = new Array("John", "Ann", "Kevin");

或者

var students = new Array();

students[0] = "John";

students[1] = "Ann";

students[2] = "Kevin";

JavaScript 数组方法

Array 对象有许多属性和方法，可以帮助开发人员轻松高效地处理数组。您可以通过指定 arrayname.property 来获取属性的值，通过指定 arrayname.method() 来获取方法的输出。

  1. length 属性 –> 如果您想知道数组中的元素数量，可以使用 length 属性。
  2. prototype 属性 –> 如果您想添加新的属性和方法，可以使用 prototype 属性。
  3. reverse 方法 –> 您可以使用 reverse 方法来反转数组中项目的顺序。
  4. sort 方法 –> 您可以使用 sort 方法对数组中的项目进行排序。
  5. pop 方法 –> 您可以使用 pop 方法删除数组中的最后一个项目。
  6. shift 方法 –> 您可以使用 shift 方法删除数组中的第一个项目。
  7. push 方法 –> 您可以将一个值添加为数组的最后一个项目。

自己尝试一下

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}	
		document.write("students array<br />");
		students.displayItems();
		document.write("<br />The number of items in students array is " + students.length + "<br />");
		document.write("<br />The SORTED students array<br />");
		students.sort();
		students.displayItems();
		document.write("<br />The REVERSED students array<br />");
		students.reverse();
		students.displayItems();
		document.write("<br />THE students array after REMOVING the LAST item<br />");
		students.pop();
		students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
		students.displayItems();
	</script>
</head>
<body>
</body>
</html>