迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中将数组拆分为块

作者:迹忆客 最近更新:2023/03/10 浏览次数:

在 JavaScript 中,玩数组,对数组进行各种操作,无论是插入、删除还是数组内部的数据操作,都是每个程序员都应该知道的非常常见的事情。

JavaScript 语言为我们提供了各种很棒的内置函数,让我们可以玩弄和修改数组数据结构,从而使我们的生活变得更加轻松。我们将在本文中讨论的一种方法是 slice() 函数。使用这种方法,我们可以轻松地将整个数组划分或拆分为不同的块。

slice() 方法用于将数组切片或划分为更小的块。该函数接受两个参数作为输入,startendstart 表示你想要开始切片数组的起始索引,而 end 表示你想要停止切片或分割的索引。

在此过程中,请注意切片将在你指定的 end 索引之前停止一个索引。例如,如果你已将 end 定义为 5,该方法将停止对之前的一个索引进行切片,即在索引 4 处。

切片完成后,原始数组保持不变。现代浏览器支持这种方法。

在下面的代码示例中,我们有一个名为 numbersArr 的数组,它属于 integers 类型。我们可以传递 startend 参数来拆分或划分这个数组。在这里,我们传递了 25 作为 startend 参数。

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 数组,我们将获得包含所有元素的整个数组作为输出。

参数 startend 都是可选的。如果你不指定 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),依此类推,直到到达数组的末尾。

这样,我们将能够将数组的每个元素拆分为不同的块。如果你想稍后在代码中访问这些单独的元素,你还可以通过根据需要为每个元素创建单独的数组来存储这些元素。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便