JavaScript 数组

JavaScript 数组是一个包含了多个值的对象,数组用于在单个变量中存储多个值。

JavaScript 数组是一个包含了多个值的对象,数组用于在单个变量中存储多个值。

JavaScript 数组结构示意图
JavaScript 数组结构示意图

什么是数组?

数组是一种特殊的变量,一次可以保存多个值。

如果有一个汽车品牌列表,存储在单个变量中可能如下所示:

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

但是,如果您想遍历汽车并找到指定的汽车怎么办?如果不是 3 辆车而是 300 辆,这种单个变量存储的方式还可行吗?

数组可以很方便的解决这个问题。一个数组可以在一个变量下保存多个值,可以通过位置索引号来访问这些值。

创建数组

使用数组字面量是创建 JavaScript 数组的最简单方法。

语法:

 const arrayName = [item1, item2, ...];

创建一个汽车品牌列表数组:

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

一个声明可以跨越多行:

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

您还可以先创建一个数组,然后按索引位置设置元素:

const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

通过 new Array() 也可以达到和上面一样的效果:

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

一般没有必要使用 new Array() 创建数组,使用数组字面量更简单,可读性更高,执行速度更快。

访问数组的元素

您可以通过索引来访问数组元素:

const cars = ["Saab", "Volvo", "BMW"];
console.log("cars[0] =", cars[0]); // 输出 cars[0] = Saab

!! **注意:**数组索引从 0 开始。[0] 是第一个元素,[1] 是第二个元素,以此类推。

更改数组元素

可以直接使用索引更改数字指定位置的内容。

此语句更改中 cars 数组第一个元素的值:

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
console.log("cars[0] =", cars[0]); // 输出 cars[0] = Opel

数组元素类型可以不同

JavaScript 是若类型的语言,一个数组中的元素可以是不同类型的。你可以在一个数组中放一个数组、一个字符串、一个对象、一个数组,甚至可以放一个函数。

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

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

数组属性和方法

JavaScript 数组内置了很多属性和方法帮我们方便的操作数组,比如添加或删除元素、返回子数组、转为字符串等。

长度属性

数组的 length 属性返回数组的长度(数组元素的数量)。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组中有", fruits.length, "个元素"); // 输出: fruits 数组中有 4 个元素

length 属性始终比数组的最大索引大 1。

访问第一个数组元素

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组的第一个元素是:", fruits[0]); // 输出: fruits 数组的第一个元素是: Banana

访问最后一个数组元素

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log("fruits 数组的最后一个元素是:", fruits[fruits.length - 1]); // 输出: fruits 数组的最后一个元素是: Mango

循环数组元素

遍历数组最安全的方法是使用 for 循环:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

您还可以使用 Array.forEach() 函数遍历数组:

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

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

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

添加数组元素

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

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // 向数组的最后添加一个元素 Lemon

也可以使用以下 length 属性将新元素添加到数组最后:

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits

数组和对象的区别

在 JavaScript 中,数组使用编号索引对象使用命名索引

数组是一种特殊的对象,带有编号的索引。

何时使用数组?何时使用对象?

  • 当想要存储一个单纯的列表时,使用数组
  • 当想要描述一个物体的特征时,使用对象

避免使用 new Array()

不需要使用 JavaScript 的内置数组构造函数 new Array()

应使用 [] 来创建数组,而不要使用 new Array()

使用 new Array() 创建输入容易引入不易发现的错误。

new Array() 只有一个参数时,参数的含义是创建数组的长度。

new Array() 有一个以上的参数时,参数的含义是:要创建的数组中的元素。

如何识别数组?

由于对数组进行 typeof 运算只返回 object , 那么怎么判断一个变量是否数组呢?

这里有 2 中方法判断一个变量是不是数组:

  1. 使用 Array.isArray() 判断是否数组:

    Array.isArray() 是 ECMAScript 5 定义了一个新方法,用来判断一个变量是不是数组。如果是数组,返回 true

    const fruits = ["Banana", "Orange", "Apple"];
    console.log(Array.isArray(fruits)); // 输出: true
    
  2. 使用 instanceof Array 判断是否数组

    instanceof 对象是否是由给定的构造函数创建运算符返回 true:

    const fruits = ["Banana", "Orange", "Apple"];
    console.log(fruits instanceof Array); // 输出: true
    

常用的数组方法

数组对象提供了很多实用的方法来操作数组和其中的元素,请跳转到 JavaScript 数组方法章节获取更多信息。