上一节:
下一节:

  JavaScript 数组

  • JavaScript数组

    JavaScript数组用于在单个变量中存储多个值。数组是一个特殊变量，一次可以包含多个值。如果您有一个项目列表（例如，汽车名称列表），将汽车名称存储在单个变量中可能如下所示： 
    var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
    如果是存储在一个数组中则像下面这样： 
    var cars = ["Saab", "Volvo", "BMW"];
    尝试一下
    使用数组有什么好处呢，如果您想循环通过汽车并找到特定的汽车怎么办？如果不是3辆车，而是300辆怎么办？解决方案是数组！数组可以在单个名称下保存多个值，您可以通过引用索引号来访问这些值。

  • 数组的创建

    使用数组文字是创建JavaScript数组的最简单方法。
    语法： 
    var array_name = [item1, item2, ...];
    例子： 
    var cars = ["Saab", "Volvo", "BMW"];
    尝试一下
    空格和换行并不重要。声明可以跨越多行： 
    var cars = [
  "Saab",
  "Volvo",
  "BMW"
];
    尝试一下
    在最后一个元素之后添加逗号（如“BMW”）在IE 8以下包括IE 8浏览器中不兼容。
    以下示例用new关键字创建了一个Array(数组)对象，并为其分配值： 
    var cars = new Array("Saab", "Volvo", "BMW");
    尝试一下
    上面的两个例子完全相同。没有必要使用new Array()，为可读性和执行速度，请使用第一个（数组文字方法）。

  • 访问数组的元素

    您可以通过引用索引号来访问数组元素。此语句访问cars的第一个元素的值： 
    var name = cars[0];
    例子 
    var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
    尝试一下
    注意：数组索引从0开始。[0]是第一个元素。[1]是第二个元素。

  • 更改数组元素

    此语句更改了cars第一个元素的值： 
    cars[0] = "Opel";
    例子 
    var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
    尝试一下

  • 访问完整的数组

    使用JavaScript，可以通过引用数组名称来访问完整数组： 
    var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
    尝试一下

  • 数组是对象

    数组是一种特殊类型的对象。JavaScript中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;   // length属性返回元素的数量
var y = cars.sort();            // sort（）方法对数组进行排序
    数组方法将在下一章中介绍。

  • 数组的length属性

    数组的length属性返回数组的长度（数组元素的数量）。 
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;   //   fruits 的长度是 4
    尝试一下
    length属性总是比最高的数组索引多一个。
    访问最后一个数组元素 
    fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];
    尝试一下

  • 循环数组元素

    循环数组最安全的方法是使用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>";
}
text += "</ul>";
    尝试一下
    你也可以使用这个Array.forEach()功能： 
    var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}
    尝试一下

  • 添加数组元素

    向数组添加新元素的最简单方法是使用以下push()方法： 
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    //添加一个新元素 (Lemon) 到 fruits
    尝试一下
    也可以使用length属性将新元素添加到数组中： 
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    //添加一个新元素 (Lemon) 到 fruits
    尝试一下
    警告 ！向高索引添加元素可以在数组中创建undefined的“洞”： 
    fruits[6] = "Lemon";    //添加一个新元素 (Lemon) 到 fruits
    尝试一下

  • 关联数组

    许多编程语言支持具有命名索引的数组。具有命名索引的数组称为关联数组（或哈希）。JavaScript并没有支持数组名为索引。在JavaScript中，数组始终使用编号索引。
    警告 ！！如果使用命名索引，JavaScript会将数组重新定义为标准对象。之后，某些数组方法和属性将产生不正确的结果。 
    var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;     // person.length 将会返回 0
var y = person[0];         // person[0] 将会返回 undefined
    尝试一下

  • 数组和对象之间的区别

    在JavaScript中，数组使用编号索引。
    在JavaScript中，对象使用命名索引。
    数组是一种特殊的对象，带有编号索引。

  • 何时使用数组。何时使用对象。

    JavaScript不支持关联数组。如果希望元素名称为字符串（文本），则应使用对象。如果希望元素名称为数字，则应使用数组。

  • 避免使用new Array()

    无需使用JavaScript的内置数组构造函数new Array()。请改用[]。这两个不同的语句都创建了一个名为points的新空数组： 
    var points = new Array();     // 坏的示范
var points = [];              // 好的示范
    用这两个不同的语句都创建一个包含6个数字的新数组： 
    var points = new Array(40, 100, 1, 5, 25, 10); // 坏
var points = [40, 100, 1, 5, 25, 10];          // 好
    尝试一下
    new关键字会使得代码复杂化。它还可以产生一些意想不到的结果： 
    var points = new Array(40, 100);  // 创建一个包含两个元素（40和100）的数组
    如果我删除其中一个元素怎么办？ 
    var points = new Array(40);  // 创建一个包含40个undefined元素的数组!!!!!
    尝试一下

  • 如何识别数组

    一个常见问题是：我如何知道变量是否是一个数组？问题是JavaScript运算符typeof返回“object”： 
    var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;    // 返回 object
    尝试一下
    解决方案1：
    为了解决这个问题，ECMAScript 5定义了一个新方法Array.isArray()： 
    Array.isArray(fruits);   // 返回 true
    尝试一下
    上面的解决方案的问题是旧版浏览器不支持
    解决方案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;   // 返回 true
    尝试一下
上一节:
下一节: