Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • JavaScript
  • 第十三章 数组基础
  • HOME
  • JavaScript
  • 第十三章 数组基础

第十三章 数组基础

JavaScript

数组是可以存储多个值的变量。数组是 JavaScript 中的对象,是从 Array 对象创建的。在本文中,我将解释如何在 JavaScript 中使用数组。

目录

13-1 什么是数组
13-2 创建一个数组
13-3 获取数组元素的值并赋新值
13-4 使用多维数组
13-5 获取数组中元素的数量
13-6 检查对象是否为数组 (Array.isArray)
13-7 添加元素到数组(push, unshift)
13-8 从数组中删除一个元素(pop、shift)
13-9 用另一个元素替换数组中的一系列元素
13-10 按顺序获取数组的元素(forEach)

13-1 什么是数组

在看数组的具体用法之前,先简单说明一下什么时候可以使用数组,有什么优势。

数组允许您在单个变量中存储和管理多个值。例如,假设您要将三个人的考试成绩存储在一个变量中。如果使用变量,则需要3个变量来存储3个值,因为变量只能存储1个值。

let resultYuhua
let resultJiangming
let resultWangyan

resultYuhua = 85;
resultJiangming = 78;
resultWangyan = 92;

让我们将每个成绩输出到控制台。另外,计算平均成绩并将其输出到控制台。

let resultYuhua
let resultJiangming
let resultWangyan

resultYuhua = 85;
resultJiangming = 78;
resultWangyan = 92;

console.log(resultYuhua);
console.log(resultJiangming);
console.log(resultWangyan);

let ave = (resultYuhua + resultJiangming + resultWangyan) / 3;
console.log('ave = ' + ave);

>> 85
>> 78
>> 92
>> ave = 85

如果您正在使用变量,您还必须一个一个地执行它们以输出到控制台。另外,在计算总和时,必须枚举并添加所有变量。这次是3个人的,一一列举还是可以的,但是如果这是50个人的结果,代码会很长很吃力。

当你想稍后添加多个值或一次输出它们时,数组很有用。数组可以使用单个变量存储多个值。当你想为类似的目的存储大量值时,数组很有用。例如,让我们使用数组重写前面的示例。

let result = new Array(85, 78, 92);

数组可以管理任意数量的值。在前面的示例中,我们管理了 3 个人的成绩值,但我们也可以为 50 个人这样做。将所有用途完全不同的值都放到一个数组中会让人难以理解,但是像这次这样管理多个意义相似的值时就方便了。

数组的另一大优点是它们可以与迭代结合使用。如果想把数组中存储的值按顺序输出或者计算平均后输出,可以这样写。

let result = new Array(85, 78, 92);
let sum = 0;

for (let i = 0 ; i < result.length; i++){
  console.log(result[i]);
  sum += result[i];
}

console.log('ave = ' + sum / result.length);

>> 85
>> 78
>> 92
>> ave = 85

如果这变成10个人,第一个数组声明需要描述10个人的等级,但是从第二行开始不需要改变任何东西。

let result = new Array(85, 78, 92, 82, 64, 61, 90, 86, 70, 88);
let sum = 0;

for (let i = 0 ; i < result.length; i++){
  console.log(result[i]);
  sum += result[i];
}

console.log('ave = ' + sum / result.length);

>> 85
>> 78
>> 92
>> 82
>> 64
>> 61
>> 90
>> 86
>> 70
>> 88
>> ave = 79.6

通过这样使用数组,代码可以写得简洁。从下一页开始,我将解释如何声明数组以及如何使用它们。

13-2 创建一个数组

我们将解释如何创建一个新数组。在 JavaScript 中,您可以使用数组文字或使用 Array 对象的构造函数来创建数组。

从数组字面量创建数组

要使用数组文字创建数组,请使用以下格式:

[元素1, 元素2, 元素3, ...]

数组的元素用逗号 (,) 分隔,整体用 [] 括起来。在元素中写入要存储在数组中的值。例如:

let result = [78, 69, 84, 50];
let fruit = ['apple', 'lemon'];

JavaScript 中的数组允许将任何数据类型的值存储在数组中。您还可以在每个元素中存储不同数据类型的值。

let profile = ['Yamada', 24, 'Tokyo', true];

在 JavaScript 中创建数组后,可以稍后添加或删除元素。所以暂时可以创建一个元素为空的数组。像这样写一个空数组:

let data = [];

console.log(data);
>> []

此外,例如,在 JavaScript 数组中,元素不必是连续的。例如,要创建一个包含元素 1 和 3 但没有元素 2 的数组:获取不存在的元素的值返回 undefined。

let data = [84, , 76];

console.log(data);
>> [84, empty, 76]

console.log(data[1]);
>> undefined

请注意,该元素本身不存在,而不是尚未为其分配值。

※ *数组的length属性返回最后一个索引值加1。如果从索引为0的元素到最后一个索引的元素都有所有元素,可以使用length属性查看元素个数,不一定是元素个数。

将表达式指定为元素值

创建数组时,您可以指定表达式以及数字和字符串等文字作为元素值。

以下示例在创建数组时将变量描述为值。在这种情况下,存储在变量中的值用作元素的值。

let num = 10;
let data = [45, num];

console.log(data);
>> [45, 10]

以下示例在创建数组时将公式指定为值。在这种情况下,公式的结果用作元素的值。

let num = 10;
let data = [num + 5, num * num];

console.log(data);
>> [15, 100]

这样,数组元素中不仅可以写数字、字符串等字面量,还可以写表达式。

从 Array 对象创建数组

Arraya对象是JavaScript提供的内置对象之一,是处理数组的对象。数组可以使用前面解释的数组文字创建,但也可以使用 Array 对象的构造函数创建。格式如下。

new Array(元素1, 元素2, 元素3, ...)

例如,以下两个语句创建相同的数组。

let fruit1 = ['apple', 'lemon'];
let fruit2 = new Array('apple', 'lemon');

还可以通过仅指定要创建的元素数来创建数组。格式如下。

new Array(元素数)

例如,以下示例创建一个包含 5 个元素的空数组。

let data = new Array(5);

console.log(data);
>> [empty, empty, empty, empty, empty]

需要注意的是,如果您尝试使用 Array 对象构造函数创建一个包含一个元素和一个数值的数组,则描述将与您指定元素数量相同。

let data1 = new Array(5);  // 包含 1 个元素和 5 个值的数组
let data2 = new Array(5);  // 有 5 个元素的空数组

在本例中,将创建一个包含 5 个元素的空数组。如果您尝试像这样使用 Array 类构造函数创建数组,您可能会得到意想不到的结果,因此当您创建数组时,请使用数组文字。

13-3 获取数组元素的值并赋新值

可以通过指定称为索引(下标)的数值来访问数组的每个元素,并且可以获得存储在元素中的值或可以将新值分配给元素。在这里,我们将解释如何在 JavaScript 中获取数组元素的值并分配一个新值。

按索引访问数组元素

可以通过指定称为索引(下标)的数值来访问数组元素。

数组名[索引]

索引按顺序分配,数组中的第一个元素从 0 开始,下一个元素从 1 开始,依此类推。要访问具有第二个索引的元素,请编写:

数组名[2]

请注意,索引从 0 开始。

引用存储在元素中的值

可以通过指定元素并将其分配给变量来获取元素的值。

以下示例获取创建的数组的每个元素并将其输出到控制台。

let pref = ['Shanghai', 'Qingdao', 'Guangzhou', 'Nanjing'];

console.log(pref[0]);
console.log(pref[1]);
console.log(pref[2]);
console.log(pref[3]);

>> Shanghai
>> Qingdao
>> Guangzhou
>> Nanjing

如果你指定一个不存在的索引

请注意,如果您指定一个在 JavaScript 中不存在的索引并获取数组的一个元素,将返回 undefined 而不是错误。

let pref = ['Shanghai', 'Qingdao', 'Guangzhou', 'Nanjing'];

console.log(pref[4]);
>> undefined

为元素分配新值

创建数组后,可以为数组的元素赋新值。使用以下格式:

数组名[索引] = 值;

“=”是称为赋值运算符的运算符之一。将写在“=”右侧的值替换为写在左侧的元素。

以下示例将新值分配给已创建数组中索引为 1 的元素。

let pref = ['Shanghai', 'Qingdao', 'Guangzhou', 'Nanjing'];
console.log(pref);
>> ['Shanghai', 'Qingdao', 'Guangzhou', 'Nanjing'];

pref[1] = 'Yantai';
console.log(pref);
>> ['Shanghai', 'Yantai', 'Guangzhou', 'Nanjing'];

13-4 使用多维数组

JavaScript 中的元素可以存储任何值,但您也可以将另一个数组文字存储为元素的值。这样的数组称为多维数组。在这里,我将解释如何在 JavaScript 中处理多维数组。

创建一个多维数组

包含数字和字符串作为元素的数组文字如下所示:

let result = [78, 69, 84, 50];
let fruit = ['apple', 'lemon'];

那么如何将以下数据视为数组?

姓名年龄住址
Yuhua22Qingdao
Jiangming28Beijing
Wangyan45Shanghai

数组元素不仅可以存储数值,还可以存储数组等对象类型的值。因此,像上面这样的数据可以通过创建一个数组来表示,该数组的元素是其他数组文字。

let userData = [
  ['Yuhua', 22, 'Qingdao'],
  ['Jiangming', 28, 'Beijing'],
  ['Wangyan', 45, 'Shanghai']
];

为每个元素添加换行符以使其更易于阅读,但您可以连续编写它们。

以这种方式将另一个数组字面量存储为数组元素的数组称为多维数组。

前面的例子等同于这样写:

let user1 = ['Yuhua', 22, 'Qingdao'];
let user2 = ['Jiangming', 28, 'Beijing'];
let user3 = ['Wangyan', 45, 'Shanghai'];

let userData = [user1, user2, user3];

以这种方式将另一个数组文字存储为数组元素,可以让您使用数组管理更复杂的值集合。

访问多维数组的元素

可以像任何其他数组一样通过索引来访问数组的元素。下面我们得到索引为 0 的元素。

let userData = [
  ['Yuhua', 22, 'Qingdao'],
  ['Jiangming', 28, 'Beijing'],
  ['Wangyan', 45, 'Shanghai']
];

let user1 = userData[0];
console.log(user1);
>> ['Yuhua', 22, 'Qingdao']

由于获取的元素是一个数组,你可以通过为这个数组指定一个索引来访问数组元素。

let userData = [
  ['Yuhua', 22, 'Qingdao'],
  ['Jiangming', 28, 'Beijing'],
  ['Wangyan', 45, 'Shanghai']
];

let user1 = userData[0];
console.log(user1[0]);
console.log(user1[1]);
console.log(user1[2]);

>> Yuhua
>> 22
>> Qingdao

前面我们在获取到一个数组元素后,访问了该元素包含的数组元素,但是也可以像下面这样对元素进行集中访问。

数组名[索引] [元素包含的数组索引]

重写前面的示例将如下所示:

let userData = [
  ['Yuhua', 22, 'Qingdao'],
  ['Jiangming', 28, 'Beijing'],
  ['Wangyan', 45, 'Shanghai']
];

console.log(userData[0][0]);
console.log(userData[0][1]);
console.log(userData[0][2]);

>> Yuhua
>> 22
>> Qingdao

现在可以直接访问存储在数组元素中的数组元素了。

13-5 获取数组中元素的数量

您可以通过引用数组的 length 属性将数组的最后一个索引加 1 来获取值。该值通常是数组中元素的数量(我们也会在不同时进行解释)。在这里,我将解释如何在 JavaScript 中获取数组中元素的数量。

参考长度属性

使用以下格式引用数组的长度属性:

数组名.length

length 属性返回数组的最后一个索引 +1。看看下面的示例。

let data = [10, 42, 52];
console.log(data.length);
>> 3

数组的最后一个索引是 2(索引从 0 开始),因此数组的长度属性返回 3。因此,引用 length 属性的是数组中的元素数。

length的属性不等于元素个数时

JavaScript 数组不必具有连续的元素。看看下面的示例。

let data = [];
data[0] = 10;
data[5] = 35;

console.log(data);
>> [10, empty, empty, empty, empty, 35]

此数组中只有索引 0 处的元素和索引 5 处的元素。元素的数量将是两个。

如果查看此数组的长度属性,它会返回 6,因为长度属性是最后一个索引 +1。

let data = [];
data[0] = 10;
data[5] = 35;

console.log(data.length);
>> 6

请注意,如果数组的元素不是这样连续存在的,则 length 属性的值不一定与数组中元素的数量匹配。

通过为 length 属性赋值来增加或减少元素的数量

可以读取和分配数组的长度属性。随着 length 属性值的变化,数组中元素的数量相应增加或减少。

在下面的示例中,数组中的元素数最初为 3,但通过将 length 属性设置为 5 来增加元素数。

let data = [10, 42, 52];
data.length = 5;

console.log(data);
>> [10, 42, 52, empty, empty]

在下面的示例中,数组中的元素数最初为 5,但通过将 length 属性设置为 2,元素被删除。

let data = [10, 42, 52, 28, 26];
data.length = 2;

console.log(data);
>> [10, 42]

您可以通过像这样为数组的长度属性设置一个值来增加或减少数组中的元素数量。

13-6 检查对象是否为数组 (Array.isArray)

说明如何检查对象是否为数组。使用 Array.isArray 方法,Array 对象的静态方法。

检查对象是否为数组(isArraya 方法)

要查明对象是否为数组,请使用 Arraya 对象的静态方法 Array.isArray 方法。格式如下。

Array.isArray(对象);

如果对象是数组,则返回 true。

看看下面的示例。

let result = [10, 42, 52];
let user = {name:'Yuhua', old:28};

console.log(Array.isArray(result));
>> true

console.log(Array.isArray(user));
>> false

我分别用 Array.isArray 方法检查了数组和 Object 对象。如果它是一个数组,它返回 true,如果它不是一个数组,它返回 false。

使用 typeof 运算符时

请注意,typeof 运算符无法检查数组是否为数组,因为数组和 Object 对象都返回对象。

let result = [10, 42, 52];
let user = {name:'Yuhua', old:28};

console.log(typeof result);
>> object

console.log(typeof user);
>> object

使用 Array.isArray 方法检查它是否是一个数组。

13-7 添加元素到数组(push, unshift)

JavaScript 中的数组可以更改元素的数量,因此您可以稍后将元素添加到数组中。在这里,我将解释如何在 JavaScript 中向数组添加元素。

※ 通过使用Array对象的splice方法,还可以向数组的指定位置添加一个元素。

按索引添加元素

要将新元素添加到已创建的数组,请指定一个当前不存在的索引并为该元素分配一个值。看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];

该数组当前具有三个元素。要将元素添加到此数组的末尾,请编写:

let fruit = ['apple', 'melon', 'peach'];
fruit[3] = 'banana';

console.log(fruit);
>> ["apple", "melon", "peach", "banana"]

您可以通过指定当前未使用的索引并为元素分配值来添加新元素。

当前数组的最后一个索引是 length 属性的值减 1,因此如果要将元素添加到数组的末尾,可以这样写:(有关长度属性,请参阅 “获取数组中的元素数”)。

let fruit = ['apple', 'melon', 'peach'];
fruit[fruit.length] = 'grapes';

console.log(fruit);
>> ["apple", "melon", "peach", "grapes"]

在 JavaScript 中,数组元素不必是连续的。因此,它不必是要添加的元素的最后一个索引的+1。看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];
fruit[7] = 'orange';

console.log(fruit);
>> ["apple", "melon", "peach", empty, empty, empty, empty, "orange"]

原始数组的最后一个索引为 2,但现在我们要添加一个索引为 7 的元素。

使用 push 方法将元素添加到数组的末尾

您可以使用 Array 对象的 push 方法将一个或多个元素添加到数组的末尾。格式如下。

数组名.push(value1[, value2, ...])

将具有参数中指定值的元素添加到数组末尾。作为返回值附加后返回数组的长度属性的值。在参数中指定要添加到数组的元素的值。一次添加多个元素时,用逗号(,)分隔。

看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];
fruit.push('orange', 'grapes');

console.log(fruit);
>> ["apple", "melon", "peach", "orange", "grapes"]

两个元素已添加到数组的末尾。

使用 unshift 方法将一个元素添加到数组的开头

您可以使用 Array 对象的 unshift 方法将一个或多个元素添加到数组的开头。格式如下。

数组名.unshift(value1[, value2, ...])

将具有参数中指定值的元素添加到数组的开头。作为返回值附加后返回数组的长度属性的值。在参数中指定要添加到数组的元素的值。一次添加多个元素时,用逗号(,)分隔。

看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];
fruit.unshift('orange', 'grapes');

console.log(fruit);
>> ["orange", "grapes", "apple", "melon", "peach"]

两个元素被添加到数组的开头。

13-8 从数组中删除一个元素(pop、shift)

JavaScript 数组可以改变元素的数量,所以你可以从创建的数组中删除元素。在这里,我将解释如何在 JavaScript 中从数组中删除元素。

使用 pop 方法删除数组的最后一个元素

您可以使用 Array 对象的 pop 方法删除数组的最后一个元素。格式如下。

数组名.pop()

删除数组的最后一个元素并返回该元素。如果数组最初来自,则返回 undefined。

看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];
fruit.pop()

console.log(fruit);
>> ["apple", "melon"]

删除了数组的最后一个元素。

使用 shift 方法删除数组的第一个元素

您可以使用 Array 对象的 unshift 方法删除数组的第一个元素。格式如下。

数组名.shift()

删除数组的第一个元素并将该元素作为返回值返回。如果数组最初来自,则返回 undefined。被删除元素之后的元素索引减一。

看看下面的示例。

let fruit = ['apple', 'melon', 'peach'];
fruit.shift();

console.log(fruit);
>> ["melon", "peach"]

console.log(fruit[0]);
>> melon

我们删除了数组的第一个元素,并将后续元素的索引递减 1。

使用 length 属性减少元素数量

通过引用 Array 对象的 length 属性,可以得到数组中最后一个元素的索引值加 1。当您为该长度属性赋值时,数组中最后一个元素的索引变为长度属性的值减 1,之后的元素将被删除。

请看下面的示例。

let fruit = ['apple', 'melon', 'peach', 'grapes'];
console.log(fruit);
>> ["apple", "melon", "peach", "grapes"]

fruit.length = 2;
console.log(fruit);
>> ["apple", "melon"]

fruit.length = 0;
console.log(fruit);
>> []

数组中最后一个元素的索引是指定的值,并且删除了它之后的元素。

将一个空数组分配给一个数组

通过将一个空数组分配给一个已经分配了数组的变量,该变量引用的数组将被替换为一个新的空数组。请注意,变量最初引用的数组元素并没有被清空,而是被重新引用到一个新的空数组中。

请看下面的示例。

let fruit = ['apple', 'melon', 'peach', 'grapes'];
let fruit2 = fruit;

console.log(fruit);
>> ["apple", "melon", "peach", "grapes"]
console.log(fruit2);
>> ["apple", "melon", "peach", "grapes"]

fruit = [];

console.log(fruit);
>> []
console.log(fruit2);
>> ["apple", "melon", "peach", "grapes"]

变量 fruit 已被分配一个新的空数组,但它最初引用的数组的元素没有变化,因此引用同一数组的变量 fruite2 引用的数组保持不变。

13-9 用另一个元素替换数组中的一系列元素

说明如何使用 Array 对象的 splice 方法将数组中指定范围的元素替换为另一个元素。它也可以作为一种方法,通过不指定替换元素来删除指定范围内的元素,或者通过将替换范围设置为0来在指定位置插入元素。

将数组的一个元素替换为另一个

Array 对象的 splice 方法允许您用另一个元素替换数组中指定范围的元素。格式如下。

配列名.splice(開始インデックス)
配列名.splice(開始インデックス, 削除する要素数)
配列名.splice(開始インデックス, 削除する要素数, 追加要素1, 追加要素2, ...)

从数组的起始索引处删除要删除的元素数,并将参数指定的元素添加到相同位置。返回一个包含删除元素的数组作为返回值。参数中要删除的元素数和附加元素可以省略。

看看下面的示例。

let alpha = ['A', 'B', 'C', 'D', 'E'];

让我们用三个元素 ‘X’ 、 ‘Y’ 和 ‘Z’ 替换此数组的索引 1 元素中的两个元素。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 2, 'X', 'Y', 'Z');

console.log(alpha);
>> ["A", "X", "Y", "Z", "D", "E"]

索引为 1 的元素中的两个元素是“B”和“C”。由于这部分被替换为’X’、’Y’、’Z’,所以结果如上。

从数组中删除指定范围的元素

如果不指定使用 splice 方法添加哪些元素,则指定范围内的元素将被简单地删除。请参见以下示例。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 2);

console.log(alpha);
>> ["A", "D", "E"]

它替换了数组索引 1 元素中的两个元素,但由于没有指定要替换的元素,因此索引 1 中的两个元素被简单地删除了。

通过像这样使用 splice 方法,您可以从数组中删除任意范围的元素。

在数组的指定位置添加一个元素

如果通过拼接方法将要删除的元素数指定为 0,则要删除的元素数将为 0,并且参数中指定的元素将添加到起始索引中指定的元素之前。请参见以下示例。

let alpha = ['A', 'B', 'C', 'D', 'E'];
alpha.splice(1, 0, 'X', 'Y');

console.log(alpha);
>> ["A", "X", "Y", "B", "C", "D", "E"]

它从数组中索引为 1 的元素中替换 0 个元素,但由于要删除的元素数为 0,因此将参数中指定的元素添加到索引 1 之前。

通过使用这样的拼接方法,您可以将元素添加到数组中的任意位置。

13-10 按顺序获取数组的元素(forEach)

通过使用 Array 对象的 forEach 方法,可以按顺序取出数组中包含的元素,并传递给回调函数进行处理。在这里,我们将解释如何使用 JavaScript 获取数组元素的顺序。

如何使用 forEach 方法

通过使用 Array 对象的 forEach 方法,您可以按顺序检索数组中包含的元素,并通过所描述的回调函数对其进行处理。格式如下。

数组名.forEach(回调函数(元素值))
数组名.forEach(回调函数(元素值,元素索引))
数组名.forEach(回调函数(元素值,元素索引,数组))

forEach 方法从头开始依次获取数组中包含的元素,并调用回调函数。使用当前获取的元素的值、元素的索引和数组本身调用回调函数。如果不需要,可以省略参数元素索引和数组。

看看下面的示例。

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(function(element){
  console.log(element);
});

>> Apple
>> Melon
>> Orange

‘Apple’, ‘Melon’, ‘Orange’,依次取出数组中包含的元素的值,调用forEach方法参数中描述的回调函数。请注意,回调函数也可以使用箭头函数表达式编写,如下所示:(有关箭头函数表达式的信息,请参阅 使用箭头函数表达式定义函数。)

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(element => console.log(element));

>> Apple
>> Melon
>> Orange

除了元素值之外,如果将元素索引或数组作为回调函数的参数接收并处理,则会如下所示。

let fruit = ['Apple', 'Melon', 'Orange'];

fruit.forEach(function(element, index, array){
  console.log('Index:' + index);
  console.log('Element:' + element);
  console.log('Array:' + array);
});

>> Index:0
>> Element:Apple
>> Array:Apple,Melon,Orange
>> Index:1
>> Element:Melon
>> Array:Apple,Melon,Orange
>> Index:2
>> Element:Orange
>> Array:Apple,Melon,Orange

数组迭代中forEach方法和for语句的区别

除了使用 forEach 方法外,您还可以使用 for 语句和 for…ob 作为按顺序检索和处理数组元素的方法。

首先,在使用 forEach 方法时,我写道:

let alpha = ['A', 'B', 'C'];

alpha.forEach(function(element){
  console.log(element);
});

>> A
>> B
>> C

使用for语句时,通过迭代改变索引,依次引用和处理数组的元素。

let alpha = ['A', 'B', 'C'];

for (let i = 0 ; i < alpha.length ; i++){
  console.log(alpha[i]);
}

>> A
>> B
>> C

在数组上使用 for…ob 语句按顺序检索数组的元素并将它们存储在变量中。

let alpha = ['A', 'B', 'C'];

for (let element of alpha){
  console.log(element);
}

>> A
>> B
>> C

两种格式产生相同的结果。

但是,如果数组元素的索引不连续,中间有缺失的元素,结果就会不同。forEach 方法对不存在的元素不做任何事情,而 for 语句对不存在的元素做同样的事情。

let alpha = ['A', 'B', , , 'C'];

alpha.forEach(function(element){
  console.log(element);
});
>> A
>> B
>> C

for (let i = 0 ; i < alpha.length ; i++){
  console.log(alpha[i]);
}
>> A
>> B
>> undefined
>> undefined
>> C

for (let element of alpha){
  console.log(element);
}
>> A
>> B
>> undefined
>> undefined
>> C

注意,如果使用forEach方法,则不能使用break语句,所以迭代不能中途停止。在for语句或for…ob语句的情况下,break语句可用于在中间结束迭代过程。

以下示例在 for…ob 语句中使用 break 语句。

let alpha = ['A', 'B', , , 'C'];

for (let element of alpha){
  console.log(element);
  if (element === 'B'){
    console.log('End');
    break;
  }
}
>> A
>> B
>> End

请根据用途选择遍历数组的方法。

标签:JavaScript

文章导航

❮ Previous Post: 第十二章 对象
Next Post: 第十四章 深度数组讲解 ❯

关联内容

JavaScript
第二章将JavaScript写到HTML编码中
JavaScript
第一章 在浏览器中启用 JavaScript
JavaScript
第三章 JavaScript 基础知识
JavaScript
第四章 JavaScript的数值
JavaScript
第五章 長整数
JavaScript
第六章 字符串的基础

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com