前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >如何将元素插入数组的指定索引?

如何将元素插入数组的指定索引?

作者头像
前端小智@大迁世界
发布2021-03-02 16:34:04
发布2021-03-02 16:34:04
2.8K00
代码可运行
举报
文章被收录于专栏:终身学习者终身学习者
运行总次数:0
代码可运行

作者:Guest Contributor 译者:前端小智 来源:stackabuse

点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

简介

数组是一种线性数据结构,可以说是编程中最常用的数据结构之一。修改数组是一种常见的操作,这里,我们来讨论如何在 JS 中数组的任何位置添加元素。

元素可以添加到数组中的三个位置

  • 开始/第一个元素
  • 结束/最后元素
  • 其他地方

接着,我们一个一个过一下:

数组对象中的unshift()方法将一个或多个元素添加到数组的开头,并返回数组的新长度:

代码语言:javascript
代码运行次数:0
复制
const startArray = [3, 4, 5];
const newLength = startArray.unshift(2);
console.log(newLength); 
console.log(startArray);

startArray.unshift(-1, 0, 2);
console.log(startArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
4
[ 2, 3, 4, 5 ]
[ -1, 0, 2, 2, 3, 4, 5 ]

将元素添加到数组的末尾

使用数组的最后一个索引

要在数组末尾添加元素,可以使用数组的长度总是比下标小1这一技巧。

代码语言:javascript
代码运行次数:0
复制
const indexArray = [1, 2, 3];
console.log(indexArray.length);
console.log(indexArray[2]);
console.log(indexArray[3]);

indexArray[indexArray.length] = 4
console.log(indexArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
3
3
undefined
[ 1, 2, 3, 4 ]

数组的长度是3,第二个元素是3。没有第三个元素,所以我们用undefined开头。最后,在该位置插入值4

使用 push() 方法

数组的push()方法将一个或多个元素添加到数组的末尾。就像unshift()一样,它也会返回数组的新长度

代码语言:javascript
代码运行次数:0
复制
const pushArray = [1, 2, 3]
const newLength = pushArray.push(4, 5, 6, 7);
console.log(newLength);
console.log(pushArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
7
[ 1, 2, 3, 4, 5, 6, 7 ]
使用 concat() 方法

通过数组的 concat()方法实现两个或更多数组的合并。 它创建新的副本,且不影响原始数组。 与以前的方法不同,它返回一个新数组。 使用该方法,要连接的值始终位于数组的末尾。

代码语言:javascript
代码运行次数:0
复制
const example1Array1 = [1, 2, 3];
const valuesToAdd = [4, 5, 6];
const example1NewArray = example1Array1.concat(valuesToAdd);

console.log(example1NewArray);
console.log(example1Array1);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3 ]

我们可以将一个数组与一系列值连接起来:

代码语言:javascript
代码运行次数:0
复制
const array = [1,2,3];
const newArray = array.concat('12', true, null, 4,5,6,'hello');
console.log(array);
console.log(newArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
[ 1, 2, 3 ]
[ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ]

可以将一个数组与多个数组连接起来:

代码语言:javascript
代码运行次数:0
复制
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const oneToNine = array1.concat(array2, array3);

console.log(oneToNine);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

在数组的任何位置添加元素

现在我们将讨论一个masterstroke方法,它可以用于在数组的任何位置添加元素——开始、结束、中间和中间的任何位置。

splice()方法添加,删除和替换数组中的元素。 它通常用于数组管理,此方法不会创建新数组,而是会更新调用它的数组。

我们来看看splice()的实际应用。这里有一个weekdays数组,现在,我们想在'周二''周四'之间添加一个'周三'元素

代码语言:javascript
代码运行次数:0
复制
const weekdays = ['周一', '周三', '周四', '周五']
const deletedArray = weekdays.splice(2, 0, '周二');

console.log(weekdays);
console.log(deletedArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
["周一", "周二", "周三", "周四", "周五"]
[]

分析一下上面的代码。我们想在weekdays数组的第二个位置添加'周二'。这里不需要删除任何元素。weekdays.splice(2, 0, 'wednesday')被读取为第二个位置,不移除任何元素并添加'周二'

下面是使用splice()的一般语法:

代码语言:javascript
代码运行次数:0
复制
let removedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  • start-开始修改数组的索引。
  • deleteCount -从start 删除的数组中可选的项目数。如果省略,则start后的所有项目都将被删除。
  • item1, item2, ...-从start 添加到数组的可选项目。 如果省略,它将仅从数组中删除元素。

我们看一下slice()的另一个示例,在该示例中我们同时添加和删除数组。 我们将在第二个位置添加 '周三',但是我们还将在该处删除错误的周末值:

代码语言:javascript
代码运行次数:0
复制
const weekdays = ['周一', '周三', '周六', '周日', '周四', '周五']
const deletedArray = weekdays .splice(2, 2, '周二');

console.log(weekdays);
console.log(deletedArray);

上面输出的结果:

代码语言:javascript
代码运行次数:0
复制
["周一", "周三", "周二", "周四", "周五"]
["周六", "周日"]

总结

在本文中,我们研究了 JS 中可以向数组添加元素的多种方法。 我们可以使用 unshift() 将它们添加到开头。 我们可以使用索引,pop()方法和concat()方法将它们添加到末尾。 通过splice()方法,我们可以更好地控制它们的放置位置。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://stackabse.com/javascr...

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • 将元素添加到数组的末尾
    • 使用数组的最后一个索引
    • 使用 push() 方法
    • 使用 concat() 方法
  • 在数组的任何位置添加元素
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档