JavaScript数组教程--为初学者解释的实例

142 阅读6分钟

在学习任何编程语言时,我们都会遇到数组的学习。当需要在一个变量中存储几个不同的值时,数组就会发挥作用。数组的应用在很多地方都可以看到,比如实现矩阵、数据结构或以表格形式存储数据。

数组的概念来自于现实生活中物体的排列。我们在现实生活中安排对象的方式,可以在编程中安排数据。所以这篇文章主要是学习JavaScript中数组的核心和基本概念。让我们深入了解一下数组,如何创建它,并使用它来分配、访问和改变数值。

什么是数组?

数组是任何编程语言中的一种变量类型,用于同时存储多个值。数组以段的形式存储数据,也被称为数组的元素,所以简单地说,数组是一个元素的集合。

我们通常用它们来存储同一类型的值或在一个地方/变量中的项目列表,如动物的名字["狮子"、"熊"、"猴子"]或学生的列表["约翰"、"鲍勃"、"伊万"]

然而,我们可以在数组中存储多种数据类型,如字符串、整数、数组,甚至是函数。

关于实现的数组类型分为四种类型。

  • 同质数组
  • 异质数组
  • 多维数组
  • 锯齿形数组

让我们简单介绍一下每种类型。

同质数组

元素具有相同数据类型的数组被称为同质数组。例如,字符串,整数,或布尔值。

var stringArr = ["John", "Bob", "Ivan"];
var intArr = [23, 45, 67];

异质数组

将多种数据类型的值存储在其中的数组被称为异质数组。比如说。

var student = ["John", 25, "male"]

多维数组

包含其他数组元素的数组被称为多维数组。例如,学生的列表。

var student = [["John", 25, "male"], ["Steve", 21, "male"], ["Angela", 22, "female"]]

锯齿状数组

锯齿形几乎与多维数组相同,但在数组内的子数组的元素数量上有细微差别。多维数组中的附加数组数据集是不统一的。

var student = [["John"], ["Steve", 21, "male"], ["Angela", "female"]]

注意:我们将使用浏览器控制台来演示本篇文章中执行的例子。要打开浏览器的控制台。

  • 在Chrome和其他基于chromium的浏览器使用F12键
  • 在Mozilla中使用CTRL + SHIFT + K键盘快捷键。
  • 在Safari浏览器中使用Option + ⌘ + C键盘快捷键(如果没有出现开发者菜单,则按⌘**+**打开偏好,并在高级选项卡中勾选 "在菜单栏中显示开发菜单")。

如何创建一个数组?

由于JavaScript是一种脚本语言,我们不需要首先声明类型并给变量分配一些值。我们可以直接写出变量的名字,而不提及变量的数据类型,并为其赋值。

比如说

var languages = ["javascript", "python", "java"];

如何给一个数组赋值?

虽然我们可以在创建数组时给数组赋值,但还有一种赋值方式是给特定的索引赋值。一个项目在数组中出现的位置被称为它的索引。

比如说。

var languages = [];
languages[0] = "JavaScript";
languages[1] = "Python";

注意: 在数组中,索引数字从 "0"(零)开始。

如何改变一个数组元素的值?

在一个数组中,一个元素的值可以被改变,就像我们分配它的值一样。

例如,如果我们想改变 "languages "数组的第一个索引的值,语句会是这样的。

languages[0] = "TypeScript";

内置的数组属性和方法

javascript的真正优势在于它内置的数组属性和方法。JavaScript中最常见的数组属性和方法是。

array.length属性

array.length "属性可以用来获取一个数组中的项目/元素的数量。比如说

var languages = ["javascript", "python", "java"];
console.log(languages.length);

array.sort()方法

这个Array.sort()方法将数组中的元素按升序排列。

假设,我们有一个包含三种编程语言的数组。

var languages = ["javascript", "python", "java"];

我们想按字母顺序对它们进行排序,这样排序函数就会这样进行。

let sortedLang = languages.sort();
console.log(sortedLang);

在输出中,你可以看到数组是按照我们的期望进行排序的。

如何访问数组中的元素/项目?

数组元素可以通过提及索引号来访问。

例如,我们想访问数组中的第二个元素;语句应该是这样的。

let secondLanguage = languages[1];

注意:数组的索引号从零 "0"开始。

如何访问数组的第一个元素/项目?

由于数组的索引从 "0"开始,所以我们可以通过在方括号中提到 "0"来访问数组的第一个元素,如下所示。

let firstLanguage = languages[0];

如何访问数组的最后一个元素/项目?

要获得一个数组的最后一个项目,"array.length"属性可以提供帮助。我们可以通过在方括号中提到 "array.length -1"来访问数组中的最后一个元素,如下所示。

let lastLanguage = languages[languages.length - 1];

如何循环浏览一个数组?

要获得一个数组中的所有元素,最好的方法是循环浏览一个数组。最方便和有效的方法是使用。

  • 循环
  • 数组的foreach方法

For 循环

使用for循环来获取所有元素是最简单的方法。简单地执行下面的代码,循环整个数组,一个一个地获取所有的元素。

var languages = ["javascript", "python", "java"];

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

在上面的代码中,你可以看到我们在for循环的条件子句中使用了language.length属性,以便在不知道数组中元素总数的情况下循环浏览整个数组。

数组的foreach方法

Javascript还提供了数组的foreach方法来循环浏览整个数组。使用foreach方法的语法如下。

var languages = ["javascript", "python", "java"];

languages.forEach(oneLang);

function oneLang(language){
 console.log(language);
}

上述提供的语法可以使用内联回调函数来缩短,如下所示。

languages.forEach((language)=>{
 console.log(language);
})

JavaScript中的关联数组?

关联数组是具有命名索引的数组。JavaScript不支持这种数组。如果你这样做,javaScript会把它当作一个对象,数组的方法和属性就不会适用于它。

Javascript数组是对象。

是的,javaScript中数组的类型是对象。这就是为什么数组可以容纳不同类型的变量。数组可以容纳对象、函数,甚至是数组内的元素。

如果我们在一个数组变量上使用typeof操作符

var languages = ["javascript", "python", "java"];

console.log(typeof(languages));

这将表明 "languages"数组变量的类型是一个对象。

然而,数组和对象之间仍然存在一些概念上的差异。

数组和对象之间的区别

  • 在数组中,索引是由数字表示的。
  • 而在对象中,索引可以用名称(数字或字母)来表示。

所以,最好是在正确的地方选择正确的变量类型。

  • 当你有一个大的项目列表时,使用数组。
  • 当你需要为索引指定名称时,使用对象。

现在,问题来了,如何识别一个变量是一个对象还是数组。

如何识别一个数组变量?

为了识别一个变量是否是数组,JavaScript提供了一个Array.isArray()函数

比如说

var languages = ["javascript", "python", "java"];

console.log(Array.isArray(languages));

上述代码将返回true。

注: Array.isArray()函数是在ECMAScript 5中引入的。

总结

这篇文章包含了在JavaScript中开始使用数组所需的所有基本和必要的知识。我们首先介绍了什么是数组,然后我们学习了如何创建、分配和改变数组的值。

此外,我们还学习了javaScript中数组的一些基本内置属性和功能,以便与数组有更多的互动。最后,我们详细讨论了数组的数据类型以及数组和对象的区别。