橘子味的心
标题:JavaScript数组


JavaScript数组是用来在一个变量中存储多个值.

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

让我试试


什么是数组?

数组是一个特殊变量,它可以一次保存多个值.

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

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

但是,如果你想遍历汽车,找到一个特定的一辆?如果你有不止3辆车,而是300辆呢?

该解决方案是数组!

数组可以在单个名称下保存多个值,并且可以通过引用索引数访问值.


创建一个数组

用一个数组字面量是创建一个JavaScript数组的最简单的方法.

Syntax:

var array-name = [item1, item2, ...];
var cars = ["Saab", "Volvo", "BMW"];

让我试试

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

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

让我试试

不要在最后一个元素后面加逗号(如 "BMW")。浏览器的效果不一致.


使用JavaScript关键字new

下面的示例也创建了一个数组,并给它赋值:

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

让我试试

上面的两个例子完全一样。没有必要用 new Array()。对于简单性、可读性和执行速度,请使用第一中方法(数组字面量方法).


访问数组元素

通过索引号来引用数组元素。.

此语句访问cars中第一个元素的值:

var name = cars[0];

这个语句修改了cars中的第一个元素:

cars[0] = "Opel";
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

让我试试

[0] 是数组中的第一个元素。[1]是第二。数组索引以0开头.


访问完整数组

使用JavaScript,通过数组名称访问整个数组:

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

让我试试


数组是对象

数组是一种特殊类型的对象. typeof 操作符用于数组返回"object".

但是,JavaScript数组最好描述为数组.

数组使用数字访问其“元素”。在这个例子中,person[0]返回"John":

var person = ["John", "Doe", 46];

让我试试

对象使用名称访问其“成员”。在这个例子中,person.firstname返回"John":

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

让我试试


数组元素可以是对象

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

因此,可以在同一数组中拥有不同类型的变量.

可以在数组中拥有对象。你可以在数组中有函数。可以在数组中有数组:

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

数组属性和方法

JavaScript数组真正强大的是有内置的属性和方法:

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

数组方法在下一章讲述.


length 属性

length 属性返回数组的长度(数组元素的个数).

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

让我试试

length 属性始终比最高数组索引高一个.


循环数组元素

循环数组的最佳方法是使用"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>";
}

让我试试


增加数组元素

向数组中添加新元素的最简单方法是使用push方法:

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

让我试试

还可以使用lenght属性将新元素添加到数组中:

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

让我试试

警告 ! 添加高索引元素会在数组中创建一个undefined的“洞”:

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

让我试试


关联数组

许多编程语言支持具有命名索引的数组.

数组使用命名的索引被称为关联数组(或者哈希)

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返回 "object":

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.

或者更精确地说:如果对象原型包含“Array”这个词,它就会返回true。.

方案 3: 如果一个对象是由一个给定的构造函数创建,instanceof运算符返回true:

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

fruits instanceof Array     // returns true

让我试试


目录

分类