JavaScript 数组中插入元素的实例方法
数组数据类型是处理有序值列表时最常用的数据类型之一。
每个值都被称为具有唯一 id 的元素。它存储可以通过单个变量访问的各种数据类型的元素。
在实践中，一个数组可以包含一个用户列表，我们可能需要在最后一个元素之后、第一个元素之前或数组中的任何指定点添加一个元素到数组中。
本文将向你展示如何使用 JavaScript 将元素插入到数组中。如果你赶时间，以下是我们将在本文中深入讨论的方法：
// 添加到数组的开头 Array.unshift(element); // 添加到数组的末尾 Array.push(element); // 添加到指定位置 Array.splice(start_position, 0, new_element...); // 使用 concat 方法添加而不改变原始数组 let newArray = [].concat(Array, element);
- 当你想在数组末尾添加一个元素时，请使用
push()。 - 如果你需要在数组的开头添加一个元素，请使用
unshift()。 - 如果要将元素添加到数组的特定位置，请使用
splice()。 - 最后，当你想保持原始数组时，可以使用
concat()方法。
如何使用 unshift() 方法添加到数组的开头
在 JavaScript 中，你可以使用 unshift() 方法将一个或多个元素添加到数组的开头，并在添加新元素后返回数组的长度。
如果我们有一个国家数组，并且想在当前第一个索引 0 处的 “Nigeria” 之前添加一个国家，我们可以使用 unshift() 方法来完成，如下所示：
const countries = ["Nigeria", "Ghana", "Rwanda"];
countries.unshift("Kenya");
console.log(countries); // ["Kenya","Nigeria","Ghana","Rwanda"]我们还可以使用 unshift() 方法添加多个元素：
const countries = ["Nigeria", "Ghana", "Rwanda"];
countries.unshift("South Africa", "Mali", "Kenya");
console.log(countries); // ["South Africa","Mali","Kenya","Nigeria","Ghana","Rwanda"]在我们对 unshift() 方法的解释中，我们还声明它返回新数组的长度，如下所示：
const countries = ["Nigeria", "Ghana", "Rwanda"];
let countriesLength = countries.unshift("South Africa", "Mali", "Kenya");
console.log(countriesLength); // 6如何使用 push() 方法推送到数组的末尾
push() 方法类似于 unshift() 方法，因为它将元素添加到数组的末尾而不是开头。它返回新数组的长度，并且与 unshift() 方法一样，可用于添加多个元素。
让我们再次尝试相同的示例，但这次使用 push() 方法将它们添加到数组的末尾：
const countries = ["Nigeria", "Ghana", "Rwanda"];
countries.push("Kenya");
console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]
countries.push("South Africa", "Mali");
console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya","South Africa","Mali"]我们可以用它来获取新数组的长度：
const countries = ["Nigeria", "Ghana", "Rwanda"];
let countriesLength = countries.push("Kenya");
console.log(countriesLength); // 4如何使用 splice() 方法将元素添加到数组中的指定位置
到目前为止，我们只看到了如何将元素添加到数组的开头或结尾，但是你可能想知道如何将元素添加到数组中的特定位置。好吧，你可以使用 splice() 方法来做到这一点。
splice() 方法是一种通用方法，用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。
例如，考虑以下国家数组，其中包含按字母顺序排列的三个元素（国家）：
const countries = ["Ghana", "Nigeria", "Rwanda"];
假设我们要添加 “Kenya”，按照字母顺序，它应该放在第二个位置，索引 1（在 Ghana 之后和 Nigeria 之前）。在这种情况下，我们将使用 splice() 方法，语法如下：
Array.splice(start_position, 0, new_element...);
start_position指定了我们希望将新元素插入到数组中的位置的索引。如果有多个元素，它指定插入的元素将从哪里开始。- 如果我们想添加元素到数组中，我们将第二个参数设置为零（
0），指示splice()方法不要删除任何数组元素。 - 以下参数或元素可能不止一个，因为这些是我们要在指定位置添加到数组中的元素。
例如，让我们在国家数组中将 “Kenya” 放在 “Ghana” 之后：
const countries = ["Ghana", "Nigeria", "Rwanda"]; countries.splice(1, 0, 'Kenya'); console.log(countries); // ["Ghana","Kenya","Nigeria","Rwanda"]
就像我们对其他方法所做的那样，我们也可以添加多个元素：
const countries = ["Ghana", "Nigeria", "Rwanda"]; countries.splice(1, 0, 'Kenya', 'Mali'); console.log(countries); // ["Ghana","Kenya","Mali","Nigeria","Rwanda"]
请注意，前面的方法返回新数组的长度，但 splice() 方法更改了原始数组。它不会删除任何元素，因此它返回一个空数组。
如何使用 concat() 方法将元素添加到数组
我们可以使用 concat() 方法将元素添加到数组中，而无需改变或更改原始数组。如果我们不希望原始数组受到影响，则创建一个新数组是一种更好的方法。
我们可以使用此方法根据放置元素的位置将元素添加到数组的开头和结尾：
const countries = ["Ghana", "Nigeria", "Rwanda"];
let newCountries = [].concat("Mali", countries, "Kenya");
console.log(newCountries); // ["Mali","Ghana","Nigeria","Rwanda","Kenya"]concat() 方法还允许我们将两个（或更多）数组连接到一个新数组中：
const africanCountries = ["Ghana", "Nigeria", "Rwanda"]; const europeanCountries = ["Germany", "France", "spain"]; let countries = [].concat(africanCountries, europeanCountries); console.log(countries); // ["Ghana","Nigeria","Rwanda","Germany","France","spain"]
总结
在本文中，我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法。
我们还了解到 concat() 方法允许我们在不改变原始数组的情况下添加元素。
相关文章
这篇文章主要介绍了javascript中的RegExp对象知识点，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下2015-11-11
在Javascript中我们通常判断一个变量是否存在,即不为null或者undefined,这篇文章主要给大家介绍了关于JavaScript中判断变量是否存在的四种常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Bootstrap实现翻页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家介绍了JS中JSON.stringify使用场景面试精讲,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
这篇文章主要介绍在微信浏览器Javascript无法使用window.location.reload()刷新页面的解决方法，比较实用，需要的朋友可以参考下。2016-06-06
昨天在项目中发现IE6动态生成的INPUT是不能改NAME的，微软关于这个问题有这么个说法2010-09-09
这篇文章主要介绍了js实现仿QQ秀换装效果的方法,实例分析了javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
今天小编就为大家分享一篇在layui tab控件中载入外部html页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本篇文章主要介绍了详解tween.js的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论