在 JavaScript 中将数组拆分为块
在 JavaScript 中,玩数组,对数组进行各种操作,无论是插入、删除还是数组内部的数据操作,都是每个程序员都应该知道的非常常见的事情。
JavaScript 语言为我们提供了各种很棒的内置函数,让我们可以玩弄和修改数组数据结构,从而使我们的生活变得更加轻松。我们将在本文中讨论的一种方法是 slice()
函数。使用这种方法,我们可以轻松地将整个数组划分或拆分为不同的块。
slice()
方法用于将数组切片或划分为更小的块。该函数接受两个参数作为输入,start
和 end
。start
表示你想要开始切片数组的起始索引,而 end
表示你想要停止切片或分割的索引。
在此过程中,请注意切片将在你指定的 end
索引之前停止一个索引。例如,如果你已将 end
定义为 5
,该方法将停止对之前的一个索引进行切片,即在索引 4
处。
切片完成后,原始数组保持不变。现代浏览器支持这种方法。
在下面的代码示例中,我们有一个名为 numbersArr
的数组,它属于 integers
类型。我们可以传递 start
和 end
参数来拆分或划分这个数组。在这里,我们传递了 2
和 5
作为 start
和 end
参数。
let numbersArr = [1 ,2 ,3 ,4 ,5 ,6 ,7 ,8];
console.log(numbersArr.slice(2,5));
console.log("Original Array: ",numbersArr);
输出:
[3, 4, 5]
Original Array: [1, 2, 3, 4, 5, 6, 7, 8]
由于在索引 2
处,我们有元素编号 3
,而在索引 5
之前有一个索引,因此我们有一个元素编号 5
。因此,slice()
方法将拆分这个数组,我们将得到输出为 [3, 4, 5]
。如前所述,原始数组保持不变,因此如果我们打印 numbersArr
数组,我们将获得包含所有元素的整个数组作为输出。
参数 start
和 end
都是可选的。如果你不指定 start
位置,则 slice()
方法将采用 0
作为其默认值。如果你不指定 end
位置,它将在 array.length
方法的帮助下转到数组的最后一个元素。
要分割或拆分所有数组元素,我们可以同时使用 slice()
方法和 for
循环。你也可以在这里使用 for
循环——这不是问题。此外,我们还有相同的 numbersArr
数组。每当我们在数组上使用 forEach
循环时,我们必须传递回调函数,它将为我们提供两件事:第一个是数组本身的元素,第二个是它的索引。在每次迭代中,我们将遍历数组的每个元素并获取其各自的索引。
let numbersArr = [1 ,2 ,3 ,4 ,5 ,6 ,7 ,8];
numbersArr.forEach((value, index) => {
console.log(numbersArr.slice(index,index+1));
});
输出:
[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
[ 5 ]
[ 6 ]
[ 7 ]
[ 8 ]
我们将把 index
值作为 start
参数和 index+1
作为结束参数传递给 slice()
方法。因此,例如,如果索引值为 0
,则 index + 1
变为 0 + 1 = 1
。我们知道 slice()
方法会在结束索引之前停止一个元素,我们想在这里拆分数组的每个元素;因此,我们最初将传递 split(0,1)
,以便该方法一次从数组中取出一个元素并打印它。
在第二次迭代中,它将是 split(1,2)
。第三次迭代将是 split(2,3)
,依此类推,直到到达数组的末尾。
这样,我们将能够将数组的每个元素拆分为不同的块。如果你想稍后在代码中访问这些单独的元素,你还可以通过根据需要为每个元素创建单独的数组来存储这些元素。
相关文章
在 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 中下载文件并显示一个示例。