了解JavaScript中的数组

JavaScript中的数组是一种用于存储数据的全局对象。数组由一个包含零个或多个数据类型的有序集合或列表组成,并使用编号从此处开始的索引0来访问特定项。

数组非常有用,因为它们将多个值存储在一个变量中,这可以压缩和组织我们的代码,使其更具可读性和可维护性。数组可以包含任何数据类型,包括数字,字符串和对象。

为了演示数组的用处,可以考虑将世界上的五大洋分配给它们自己的变量。

// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'

这种方法非常冗长,而且很快就很难维护和跟踪。

使用数组,我们可以简化数据。

// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']

现在,我们不再创建五个单独的变量,而是拥有一个包含所有五个元素的变量。我们使用方括号— []创建一个数组。

要访问特定项目,请将其索引附加到变量中。

// Print out the first item of the oceans array
oceans[0];

输出:

Pacific

在本教程中,我们将学习如何创建数组。如何索引它们;如何添加,修改,删除或访问数组中的项目;以及如何遍历数组。

创建一个数组

有两种方法可以在JavaScript中创建数组:

  • 数组文字,使用方括号。

  • 数组构造函数,使用new关键字。

让我们演示如何使用数组文字创建鲨鱼物种的数组,该文本是用[]初始化的。

// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']

现在,这里是使用数组构造函数创建的相同数据,并使用new Array()对其进行了初始化。

// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')

这两种方法都会创建一个数组。但是,数组文字(方括号[])方法更为常见和首选,因为new Array()构造方法可能会导致不一致和意外结果。知道数组构造函数很有用,以防万一遇到它。

我们可以打印出一个完整的数组,该数组将显示与输入相同的数组。

// Print out the entire sharks array
sharks

输出:

[ 'Hammerhead', 'Great White', 'Tiger' ]

数组通常用于将相似数据类型的列表组合在一起,但是从技术上讲,它们可以包含任何值或值的混合,包括其他数组。

// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

创建数组之后,我们可以通过多种方式对其进行操作,但是首先我们必须了解如何对数组建立索引。

注意:您可能会看到数组中的最后一项,带有或不带有最后一个逗号。这称为尾随逗号。通常会忽略它们,但是通常最好将它们包含在您的代码中,因为这会使版本控制差异更加清晰,并使添加和删除项 rel="nofollow"目变得更加容易而没有错误。请注意,JSON文件中不允许尾随逗号。

索引数组

如果您已经了解了JavaScript中的索引和操作字符串的知识,您可能已经熟悉索引数组的概念,因为字符串类似于数组。

数组没有名称/值对。而是用以0开头的整数值对它们进行索引。下面是一个分配给的数组seaCreatures示例。

let seaCreatures = [
    "octopus",
    "squid",
    "shark",
    "seahorse",
    "starfish",
];

这是seaCreatures数组中每个项目的索引方式的细分。

octopussquidsharkseahorsestarfish
01234

数组中的第一项是octopus,索引为0。最后一项是starfish,索引为4。计数从0索引开始,这与我们的自然直觉相反,从1开始计数。因此,必须特别注意记住这一点,直到它变为自然。

我们可以使用该length属性找出数组中有多少项。

seaCreatures.length

输出:

5

尽管seaCreatures组成的索引包括04,该length属性将输出数组中的项的实际量,从1开始。

如果要查找数组中特定项目的索引号(例如)sea horse,则可以使用该indexOf()方法。

seaCreatures.indexOf("seahorse");

输出:

3

如果找不到索引号(例如,对于不存在的值),则控制台将返回-1

seaCreatures.indexOf("cuttlefish");

输出:

-1

使用与数组中的项相对应的索引号,我们可以离散地访问每个项,以便处理这些项。

访问数组中的项目

通过引用方括号中的项目的索引号,可以访问JavaScript数组中的项目。

seaCreatures[1];

输出:

squid

我们知道0将始终输出数组中的第一项。通过对length属性执行操作并将其用作新索引号,我们还可以找到数组中的最后一项。

const lastIndex = seaCreatures.length - 1

seaCreatures[lastIndex]

输出:

starfish

尝试访问不存在的项将返回undefined

seaCreatures[10];

输出:

undefined

为了访问嵌套数组中的项目,您将添加另一个索引号以对应于内部数组。

let nestedArray = [
    [
        "salmon",
        "halibut",
    ],
    [
        "coral",
        "reef",
    ]
];

nestedArray[1][0];

输出:

coral

在上面的示例中,我们访问了位于nestedArray变量位置1的数组,然后访问了位于内部数组位置0的项。

将项目添加到数组

在我们的seaCreatures变量中,我们有五个项目,其中包括从04的索引。如果要向数组中添加新项,可以为下一个索引指定一个值。

seaCreatures[5] = "whale";

seaCreatures;

输出:

[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale' ]

如果我们添加一个项目而无意间跳过了索引,它将在数组中创建一个未定义的项目。

seaCreatures[7] = "pufferfish";

seaCreatures;

输出:

[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish' ]

尝试访问额外的数组项将返回undefined

seaCreatures[6]

输出:

undefined

使用该push()方法可以避免类似的问题,该方法将一项添加到数组的末尾。

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

输出:

[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    ,
    'whale',
    'pufferfish',
    'lobster' ]

在频谱的另一端,该unshift()方法会将一个项目添加到数组的开头。

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

输出:

[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish',
    'lobster' ]

push()unshift()之间,可以将项追加到数组的开头和结尾。

从阵列中删除项目

当我们想从数组中删除特定项目时,我们使用该splice()方法。在seaCreatures数组中,我们意外地较早地创建了一个未定义的数组项,因此现在将其删除。

seaCreatures.splice(7, 1);

seaCreatures;

输出:

[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish',
    'lobster' ]

在该splice()方法中,第一个参数代表要删除的索引号(在这种情况下为7),第二个参数代表应删除的项目数。我们输入1,表示将仅删除一项。

splice()方法将更改原始变量。如果希望原始变量保持不变,请使用slice()并将结果分配给新变量。

let newArray = slice(7, 1);

pop()方法将删除数组中的最后一项。

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

输出:

[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

lobster已被删除为数组的最后一项。为了删除数组的第一项,我们将使用该shift()方法。

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

输出:

[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

通过使用 pop()shift(),我们可以从数组的开头和结尾删除项目。pop()尽可能使用首选,因为数组中的其余项目保留其原始索引号。

修改数组中的项目

我们可以使用赋值运算符分配新值来覆盖数组中的任何值,就像使用常规变量一样。

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

输出:

[ 'manatee',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

另一种修改值的方法是使用带有新参数的splice()方法。如果我们想要更改seahorse的值,即索引3的项目,我们可以删除它并在其位置上添加一个新项目。

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

输出:

[ 'manatee',
    'squid',
    'shark',
    'sea lion',
    'starfish',
    'whale',
    'pufferfish' ]

在上面的示例中,我们从数组中删除了seahorse,并将一个新值推入索引3。

遍历数组

我们可以使用for关键字利用length属性遍历整个数组。在本例中,我们可以创建一个shellfish数组,并将每个索引号和每个值打印到控制台。

// Create an array of shellfish species
let shellfish = [
    "oyster",
    "shrimp",
    "clam",
    "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

输出:

0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

我们还可以使用for...of循环,这是JavaScript的新功能。

// Create an array of aquatic mammals
let mammals = [
    "dolphin",
    "whale",
    "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
    console.log(mammal);
}

输出:

dolphin
whale
manatee

该for...of循环不检索数组中元素的索引号,但它通过一种更简单、更简洁的方法来遍历数组。

使用循环对于打印数组的整个值非常有用,例如在网站上显示数据库中的项目时。

结论

数组是JavaScript编程中极其通用的基础部分。在本教程中,我们学习了如何创建数组,如何为数组建立索引以及在数组中工作的一些最常见的任务,例如创建,删除和修改项目。我们还学习了两种遍历数组的方法,它们是显示数据的常用方法。

英文原文地址:https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript

以上就是了解JavaScript中的数组的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏