在 JavaScript 中实现 Arraylist
我们非常熟悉 Java 中的 Arraylist
,它允许我们在不指定数组大小的情况下向数组添加元素。这是一个不错的功能,但我们在 JavaScript 中有类似的功能吗?每种语言都有自己的一组数据结构。在 JavaScript 中,我们有可以存储同构值和异构值的数组。异构意味着值可能是各种数据类型,如字符串、数字、布尔值等,都放在一个数组中。与 Java 中的 ArrayList
相比,它是一个独特且更好的特性。
在 JavaScript 中创建数组
很容易。我们使用 var
关键字创建一个数组。它类似于我们在 Java 中使用 ArrayList
创建数组的方式。Java 坚持指定 ArrayList
的数据类型。但是在 JavaScript 中,我们并没有明确声明 Array 的数据类型。我们让 JavaScript 解释器根据数组中分配的值做出决定。无论如何,对于 JavaScript,数组的类型是 object
。参考以下代码创建一个 Array。
var a = [1, 6, 3, 5];
console.log(a.length);
console.log(typeof a);
console.log(typeof a[2]);
输出:
4
object
number
就像 Java 中的 Arraylist
一样,我们可以使用循环、for
循环和 while
循环遍历 JavaScript 数组。JavaScript 还具有 .foreach()
函数,用于迭代数组中的元素。我们可以使用 foreach()
在每个 Array 元素上执行某些代码行。foreach
函数接受一个函数作为参数。我们可以将此函数编写为内联函数。检查下面的代码片段以更好地理解。
var a = ["hello", 1, false];
a.forEach((i) => {
console.log(typeof i);
})
输出:
string
number
boolean
在这里,我们对 Array 的每个元素应用 typeof
操作。该代码进一步将输出记录到 Web 浏览器控制台。JavaScript 有另一个函数,.reverse()
函数,它反转数组中元素的位置。参考以下代码。
var a = ["hello", 1, false];
console.log(a.reverse());
输出:
[false, 1, "hello"]
上述日志是在 Google Chrome 网络浏览器控制台中获得的。
我们可以使用 Java 中的 .add()
函数将元素添加到 ArrayList
。类似地,在 JavaScript 中,我们有一些函数可以用来在数组的不同位置添加元素。
var a = ["hello", 1, false];
a.push(2.15);
console.log(a);
a.unshift(123);
console.log(a);
输出:
["hello", 1, false, 2.15]
[123, "hello", 1, false, 2.15]
输出是在 google chrome 网络浏览器中获得的。请注意,这些操作无需使用赋值运算符即可更改原始数组。
同样,我们可以使用以下 JavaScript 函数从数组中删除元素。它类似于 Java 中 ArrayList
的 remove()
函数。
var a = [123, "hello", 1, false, 2.15];
a.pop();
console.log(a);
a.shift();
console.log(a);
输出:
[123, "hello", 1, false]
["hello", 1, false]
这里有几点需要注意。
JavaScript 中有另一种方法,splice()
函数。我们可以使用它从数组中添加或删除一个或多个元素。splice()
函数采用以下几个参数。
让我们看看下面的代码来了解更多。
var a = [123, "hello", 1, false, 2.15];
a.splice(2, 1, "there");
console.log(a);
a.splice(2, 2);
console.log(a);
a.splice(2);
console.log(a);
输出:
[123, "hello", "there", false, 2.15]
[123, "hello", 2.15]
[123, "hello"]
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。