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
    尝试一下