JS如何在数组指定位置插入元素


Posted in Javascript onMarch 10, 2020

一、JavaScript splice() 方法

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

方法实例

//在数组指定位置插入
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//输出结果
//Banana, Orange, Lemon, Kiwi, Apple, Mango
//在数组开头插入
var shuiguo = ["Banana", "Orange", "Apple", "Mango"];
shuiguo.splice(0, 0, "Lemon");
//输出结果
//Lemon, Banana, Orange, Apple, Mango
语法
array.splice(index,howmany,item1,.....,itemX)

参数 Values
参数 描述
index 必需。规定从何处添加/删除元素。
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素
返回值
Type 描述
Array 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

二、JavaScript unshift() 方法

unshift 方法用于向数组的开头添加一个或多个元素,并返回新数组的长度。

语法
array_object.unshift( newelement1, newelement2, ... )
参数 Values
参数 说明
array_object 要操作的数组(对象)
newelement1, ... 至少一个。要添加到数组的元素序列,使用 , 分隔。

提示:unshift 方法将直接修改原数组,并将已经存在的元素顺次地移到较高的下标处,而不像其他很多方法一样得到一个原数组的副本。

方法实例

<script language="JavaScript">

var array_1 = new Array('a','b','c');
document.write( array_1.unshift(1,2) + '<br />' );
document.write( array_1 );

</script>

运行该例子,输出:

5
1,2,a,b,c

注意

在 IE 某些版本下,该方法返回的可能是 undefined 而不是新数组的长度。

三、JavaScript concat() 方法

定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
参数 描述
arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
返回值
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

实例

例子 1

在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">
var a = [1,2,3];
document.write( a.concat(4,5) );
</script>

输出:

1,2,3,4,5

例子 2

在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(
arr.concat(arr2)
)

</script>

输出:

George,John,Thomas,James,Adrew,Martin

例子 3

在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(
arr.concat(arr2,arr3)
)

</script>

输出:

George,John,Thomas,James,Adrew,Martin,William,Franklin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
vue实现简单瀑布流布局
May 28 #Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 #Javascript
微信小程序用canvas画图并分享
Mar 09 #Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 #Javascript
原生js无缝轮播插件使用详解
Mar 09 #Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 #Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP脚本的10个技巧(8)
2006/10/09 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
python绘制简单折线图代码示例
2017/12/19 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python序列化与数据持久化实例详解
2019/12/20 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
医学生实习自荐信
2013/10/01 职场文书
2014年科研工作总结
2014/12/03 职场文书
初三毕业评语
2014/12/26 职场文书
Redis 常见使用场景
2021/08/30 Redis
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis