最新的Web开发教程
 

JavaScript数组


JavaScript数组用于多个值存储在一个变量。


显示阵列

在本教程中,我们将使用脚本来显示一个数组里面<p>与元素id="demo"

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

第一行(脚本)创建了一个汽车阵列命名。

第二行“发现”与元素id="demo""displays"在阵"innerHTML"吧;


试一试

创建一个数组,并赋值给它:

var cars = ["Saab", "Volvo", "BMW"];
试一试»

空格和换行并不重要。 一个声明可以跨越多行:

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
试一试»

不要把一个逗号的最后一个元素(如后"BMW" )。
效果是跨浏览器不一致。


什么是数组?

阵列是一个特殊的变量,其可以在一个时间持有多个值。

如果你有一个项目列表(车名的列表,例如),存储车在单变量看起来是这样的:

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

但是,如果您通过汽车要循环什么,并找到一个特定的一个? 如果你有没有3辆汽车,但300?

该解决方案是一个数组!

数组可以在一个单一的名称包含多个值,你可以通过参考索引号访问值。


创建阵列

使用数组文本是创建一个JavaScript阵列的最简单方法。

句法:

var array-name = [ item1 , item2 , ...];      

例:

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

使用JavaScript的新关键字

下面的例子还创建一个数组,并赋值给它:

var cars = new Array("Saab", "Volvo", "BMW");
试一试»

上面两个例子做同样的。 没有必要使用new Array()
为了简单起见,可读性和执行速度,使用第一个(在阵列字面方法)。


访问数组的元素

你通过参照索引号指一个数组元素。

这个语句访问在汽车的第一个元素的值:

var name = cars[0];

这个语句修改了汽车的第一个元素:

cars[0] = "Opel";

[0]是在阵列中的第一个元素。 [1]是第二。 数组索引从0开始。


您可以有不同的物体在同一阵列

的JavaScript变量可以是对象。 数组是特殊类型的对象。

正因为如此,可以在同一个阵列不同类型的变量。

您可以在一个数组对象。 您可以在阵列功能。 您可以在一个数组的数组:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

数组是对象

阵列是一种特殊类型的对象。 该typeof在JavaScript中运算符返回"object"的阵列。

但是,JavaScript数组是最好的形容为数组。

阵列使用numbers来访问它"elements" 。 在这个例子中, person[0]返回John

阵列:

var person = ["John", "Doe", 46];
试一试»

对象使用的名称来访问它的“成员”。 在这个例子中,person.firstName返回John

目的:

var person = {firstName:"John", lastName:"Doe", age:46};
试一试»

阵列属性和方法

JavaScript数组的真正实力是内置阵列的属性和方法:

例子

var x = cars.length;         // The length property returns the number of elements in cars
var y = cars.sort();         // The sort() method sort cars in alphabetical order

Array方法覆盖在下一章。


length属性

length的阵列的属性返回一个数组(数组元素的数目)的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
试一试»

长度属性总是比最高数组索引多一个。


添加数组元素

一个新的元素添加到阵列的最简单方法是使用push方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits
试一试»

新的元素也可以加入到使用数组length属性:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits
试一试»

警告 !

添加高指标可以创建不确定因素"holes"中的数组:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";                // adds a new element (Lemon) to fruits
试一试»

循环数组元素

通过数组循环最好的方法,是用"for"循环:

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
试一试»

关联数组

许多编程语言都支持一个名为索引的数组。

名为索引数组称为关联数组(或哈希)。

JavaScript 支持数组名为索引。

在JavaScript中, 数组总是使用编号的索引

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
试一试»

警告 !!
如果你使用了一个名为索引的JavaScript将重新定义数组一个标准的对象。
在此之后, 所有阵列的方法和属性将产生不正确的结果

例:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
试一试»

数组和对象之间的差异

在JavaScript中, 数组使用编号的索引

在JavaScript中, 对象使用命名的索引

数组是一种特殊的对象,并编号的索引。


当使用数组。 当使用对象。

  • JavaScript不支持关联数组。
  • 当你想要的元素名称是字符串(文本),你应该使用对象
  • 当你想要的元素名称是数字您应该使用数组

避免new Array()

有没有必要使用JavaScript的内置数组构造new Array()

使用[]代替。

这两种不同的语句都创建一个新的空数组命名为几点:

var points = new Array();         // Bad
var points = [];                  // Good 

这两种不同的语句都创建一个包含6个号码一个新的数组:

var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
试一试»

new关键字唯一代码的复杂性。 它也可以产生一些意想不到的结果:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

如果我删除哪些因素之一?

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!
试一试»

如何识别一个数组

一个常见的问题是:我怎么知道,如果一个变量是一个数组?

问题是,JavaScript的运营商typeof返回“对象”:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // returns object
试一试»

typeof运算符返回对象,因为JavaScript数组是一个对象。

解决方案1:

为了解决这个问题ECMAScript 5定义了一个新方法Array.isArray()

Array.isArray(fruits);     // returns true
试一试»

这种解决方案的问题是, ECMAScript 5 不能在较早浏览器支持

解决方案2:

为了解决这个问题,你可以创建自己的isArray()函数:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
试一试»

如果参数是一个数组就永远的函数返回true。

或者更准确地说:如果对象原型包含单词“阵列”则返回true。

解决方案3:

instanceof如果对象是由给定的构造函数创建运算符返回true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array     // returns true
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»