06 数组 Array对象

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

一、什么是数组？

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

二、创建数组

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

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];

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

四、改变数组元素

这条语句修改了 cars 中第一个元素的值：

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 变量可以是对象。数组是特殊类型的对象。

正因如此，您可以在相同数组中存放不同类型的变量。

您可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：

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

七、数组属性

length 属性

length 属性返回数组的长度（数组元素的数目）。

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

亲自试一试

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 = "
";
for (i = 0; i < fLen; i++) {
     text += "
" + fruits[i] + "
";
}

亲自试一试

您也可以使用 Array.foreach() 函数：

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

text = "
";
fruits.forEach(myFunction);
text += "
";

function myFunction(value) {
  text += "
" + value + "
";
}

亲自试一试

关联数组

很多编程元素支持命名索引的数组。

具有命名索引的数组被称为关联数组（或散列）。

JavaScript 不支持命名索引的数组。

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

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 返回 3
var y = person[0];              // person[0] 返回 "Bill"

亲自试一试

警告！

假如您使用命名索引，JavaScript 会把数组重定义为标准对象。

之后，所有数组的方法和属性将产生非正确结果。

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
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 = [];                  // 优

下面两条不同的语句创建包含六个数字的新数组：

var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优

亲自试一试

new 关键词只会使代码复杂化。它还会产生某些不可预期的结果：

八、数组方法

把数组转换为字符串

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:删除最后一个元素

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

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

亲自试一试

pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

亲自试一试

Push:添加数组元素

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

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

亲自试一试

push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

亲自试一试

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

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

亲自试一试

警告！

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

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

亲自试一试

shift() ：位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

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

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

亲自试一试

shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

亲自试一试

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

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

亲自试一试

unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

亲自试一试

更改元素

通过使用它们的索引号来访问数组元素：

数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 ...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

亲自试一试

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

亲自试一试

delete 删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

亲自试一试

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

splice：拼接数组

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");

亲自试一试

使用 splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

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

亲自试一试

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

concat() ：合并（连接）数组

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

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

亲自试一试

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

实例（合并三个数组）

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

亲自试一试

concat() 方法也可以将值作为参数：

实例（将数组与值合并）

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

亲自试一试

slice() ：裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （"Orange"）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

亲自试一试

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （"Apple"）开始切出一段数组：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

亲自试一试

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

亲自试一试

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

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

亲自试一试

九、数组排序

sort()：数组排序

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

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

亲自试一试

reverse() ：反转数组

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});

亲自试一试

使用相同的技巧对数组进行降序排序：

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

亲自试一试

比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

您可以使用下面的代码片段来测试数值和字母排序：

<button onclick="myFunction1()">以字母顺序排序button>
<button onclick="myFunction2()">以数字顺序排序button>

<p id="demo">p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
        points.sort();
        document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
        points.sort(function(a, b){return  a - b});
        document.getElementById("demo").innerHTML = points;
}
script>

亲自试一试

以随机顺序排序数组

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

亲自试一试

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

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

// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

亲自试一试

降序排序：

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

// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值

亲自试一试

如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

对数组使用 Math.max()、Math.min()

您可以使用 Math.max.apply 来查找数组中的最高值：

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

亲自试一试

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

我的 Min / Max JavaScript 方法

最快的解决方法是使用“自制”方法。

此函数遍历数组，用找到的最高值与每个值进行比较：

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

亲自试一试

此函数遍历数组，用找到的最低值与每个值进行比较：

function myArrayMin(arr) {
    var len = arr.length
    var min = Infinity;
    while (len--) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min;
}

亲自试一试

对象数组排序

JavaScript 数组经常会包含对象：

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

解决方法是通过比较函数来对比属性值：

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;
});

亲自试一试

十、数组迭代

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

注释：该函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "
"; 
}

亲自试一试

上面的例子只用了 value 参数。这个例子可以重新写为：

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "
"; 
}

亲自试一试

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子将每个数组值乘以2：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

亲自试一试

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

亲自试一试

Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子用值大于 18 的元素创建一个新数组：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

亲自试一试

Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。

reduce() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

亲自试一试

上例并未使用 index 和 array 参数。可以将它改写为：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

亲自试一试

reduce() 方法能够接受一个初始值：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

亲自试一试

Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。

reduceRight() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

亲自试一试

上例并未使用 index 和 array 参数。可以将它改写为：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

亲自试一试

Array.every()

every() 方法检查所有数组值是否通过测试。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子检查所有数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

如果回调函数仅使用第一个参数（值）时，可以省略其他参数：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

亲自试一试

Array.some()

some() 方法检查某些数组值是否通过了测试。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子检查某些数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

array.indexOf(item, start)

• item：必需。要检索的项目。
• start：可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

亲自试一试

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

array.lastIndexOf(item, start)

• item:必需。要检索的项目。
• start:可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

亲自试一试

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子查找（返回）大于 18 的第一个元素的值：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子查找大于 18 的第一个元素的索引：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试