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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
phpwind放自动注册方法
Dec 02 Javascript
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
微信小程序 教程之模板
Oct 18 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
利用Python如何生成便签图片详解
2018/07/09 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
九年级语文教学反思
2014/02/04 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
篮球社团活动总结
2014/06/27 职场文书
施工安全员岗位职责
2015/04/11 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python