JavaScript 数组

• JavaScript 数组用于在单一变量中存储多个值

创建数组

空格和折行并不重要。声明可横跨多行：

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

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

var cars = [];

// 出于简洁、可读性和执行速度的考虑，请使用上面的方法（数组文本方法）
// new 关键词只会使代码复杂化。它还会产生某些不可预期的结果，不推荐使用
var cars = new Array("Saab", "Volvo", "BMW");
var points = new Array(40, 100);  // 创建包含两个元素的数组（40 和 100）
var points = new Array(40);       // 创建包含 40 个未定义元素的数组！！！

length 属性

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>";
} 
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");                // 向 fruits 添加一个新元素 (Lemon)

也可以使用 length 属性向数组添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

警告！ 添加最高索引的元素可在数组中创建未定义的“洞”：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // 向 fruits 添加一个新元素 (Lemon)

/* 结果
Banana
Orange
Apple
Mango
undefined
undefined
Lemon
*/

在 JavaScript 中，数组只能使用数字索引

数组和对象的区别

在 JavaScript 中，数组使用数字索引。 在 JavaScript 中，对象使用命名索引。 数组是特殊类型的对象，具有数字索引。

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

// 结果：Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。 它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

// 结果：Banana * Orange * Apple * Mango

元素操作

• pop() 方法从数组中删除最后一个元素：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

  // pop() 方法返回“被弹出”的值：
  var x = fruits.pop();      // x 的值是 "Mango"

• push() 方法（在数组结尾处）向数组添加一个新的元素：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.push("Kiwi");       //  向 fruits 添加一个新元素

  // push() 方法返回新数组的长度：
  var x =  fruits.push("Kiwi");   //  x 的值是 5

• shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

  // shift() 方法返回被“位移出”的字符串：
  var x =  fruits.shift();   // 返回 "Banana"

• unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

  // unshift() 方法返回新数组的长度。
  var x = fruits.unshift("Lemon");    // 返回 5

拼接数组

splice() 方法可用于向数组添加新项：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 0, "Lemon", "Kiwi");

  // 第一个参数（2）定义了应添加新元素的位置（拼接）。
  // 第二个参数（0）定义应删除多少元素。
  // 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2, 2, "Lemon", "Kiwi");

  // 结果
  // 原数组：Banana,Orange,Apple,Mango
  // 新数组：Banana,Orange,Lemon,Kiwi
  // 已删除项：Apple,Mango

使用 splice() 来删除元素

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(1, 2);        // 删除 fruits 中的第一个元素

  // 第一个参数（1）定义新元素应该被添加（接入）的位置。
  // 第二个参数（2）定义应该删除多个元素。
  // 其余参数被省略。没有新元素将被添加。

  // 结果：Banana,Mango

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

  var myGirls = ["Emma", "Isabella"];
  var myBoys = ["Jacob", "Michael", "Ethan"];
  var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

  // 结果：Emma,Isabella,Jacob,Michael,Ethan

  // concat() 方法不会更改现有数组。它总是返回一个新数组。
  // concat() 方法可以使用任意数量的数组参数：

  var arr1 = ["Cecilie", "Lone"];
  var arr2 = ["Emil", "Tobias", "Linus"];
  var arr3 = ["Robin", "Morgan"];
  var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
  // 结果：Emma,Isabella,Jacob,Michael,Ethan,Joshua,Daniel

数组排序

sort() 方法以字母顺序对数组进行排序：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();            // 对 fruits 中的元素进行排序

reverse() 方法反转数组中的元素。

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();            // 对 fruits 中的元素进行排序
  fruits.reverse();         // 反转元素顺序

数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。 该函数很适合字符串（”Apple” 会排在 “Banana” 之前）。 不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。 正因如此，sort() 方法在对数值排序时会产生不正确的结果。 我们通过一个比值函数来修正此问题：

  var points = [40, 100, 1, 5, 25, 10];
  points.sort(function(a, b){return a - b}); 

  // 结果：1,5,10,25,40,100

排序对象数组

  var cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}];
  // 比较年限
  cars.sort(function(a, b){return a.year - b.year});
  // 比较字符串属性会稍复杂：
  cars.sort(function(a, b){
      var x = a.type.toLowerCase();
      var y = b.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
      return 0;
  });

参考内容

• JavaScript 数组(w3school)

首页 > 学习总览 > 开发语言 > JavaScript