Javascript 中将元素插入到数组的特定索引中

在事情成功之前，一切总看似不可能。——<纳尔逊·曼德拉>

介绍

数组是一种线性数据结构，可以说是计算机科学中最流行的数据结构之一。修改数组是一个常见的操作。在这里，我们将讨论如何在 JavaScript 中在数组的任何位置添加元素。

可以在三个位置将元素添加到数组中：

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

将元素添加到数组的开头

unshift()数组对象中的方法将一个或多个元素添加到数组的开头。执行时，它还返回数组的新长度：

const startArray = [3, 4, 5];
const newLength = startArray.unshift(2);
console.log(newLength); // 4
console.log(startArray); // [ 2, 3, 4, 5 ]

startArray.unshift(-1, 0, 2);
console.log(startArray); // [ -1, 0, 2, 2, 3, 4, 5 ]

将元素添加到数组的末尾

使用数组的最后一个索引

要将元素添加到数组的末尾，我们可以使用数组的长度始终比索引小 1 的事实。

比如说，一个数组的长度是 5，那么最后一个索引处的值就是 4。所以，我们可以直接在 last+1 索引处添加元素。让我们来看看：

const indexArray = [1, 2, 3];
console.log(indexArray.length); // 3
console.log(indexArray[2]); // 3
console.log(indexArray[3]); // undefined

indexArray[indexArray.length] = 4
console.log(indexArray); // [ 1, 2, 3, 4 ]

数组的长度为3 ，第二个元素为3。没有第三个元素，所以我们用 undefined. 最后，在那个位置，我们插入的值4。

push()

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

const pushArray = [1, 2, 3]
const newLength = pushArray.push(4, 5, 6, 7);
console.log(newLength); // 7
console.log(pushArray); // [ 1, 2, 3, 4, 5, 6, 7 ]

concat()

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

我们可以将一个数组与另一个数组连接起来：

const example1Array1 = [1, 2, 3];
const valuesToAdd = [4, 5, 6];
const example1NewArray = example1Array1.concat(valuesToAdd);

console.log(example1NewArray); // [ 1, 2, 3, 4, 5, 6 ]
console.log(example1Array1); // [ 1, 2, 3]

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

const array = [1,2,3];
const newArray = array.concat('12', true, null, 4,5,6,'hello');
console.log(array); // [ 1, 2, 3 ]
console.log(newArray); // [ 1, 2, 3, '12', true, null, 4, 5, 6, 'hello' ]

我们可以将一个数组与多个数组连接起来：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const oneToNine = array1.concat(array2, array3);

console.log(oneToNine); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

在数组中的任意位置添加元素

现在我们将讨论一个 masterstroke 方法，该方法可用于在数组中的任何位置添加元素 - 开始、结束、中间和中间的任何其他位置。

splice()方法添加、删除和替换数组中的元素。它通常用于阵列管理。此方法不会创建新数组，而是更新调用它的数组。
让我们看看 splice() 方法。我们将取一个工作日数组，并在 “tuesday” 和 “thursday” 之间添加一个 “wednesday” 元素：

const weekdays = ['monday', 'tuesday', 'thursday', 'friday']
const deletedArray = weekdays.splice(2, 0, 'wednesday');

console.log(weekdays); // [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
console.log(deletedArray); // []

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

以下是一般语法 splice()：

start - 开始修改数组的索引。
deleteCount - 要从中删除的数组中的可选项目数 start。如果省略，则后面的所有项目 start 都将被删除。
item1, item2, ... - 附加到数组的可选项目 start。如果省略，它只会从数组中删除元素。

const weekdays = ['monday', 'tuesday', 'saturday', 'sunday', 'thursday', 'friday']
const deletedArray = array.splice(2, 2, 'wednesday');

console.log(weekdays); // [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]
console.log(deletedArray); // [ 'saturday', 'sunday' ]

在上面的示例中，array.splice(2, 2, 'wednesday') 从第二个位置 (start)删除两个元素并在那里添加 'wednesday'。那就 slice()

总结

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

参考

https://stackabuse.com/javascript-how-to-insert-elements-into-a-specific-index-of-an-array

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

介绍