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修改css样式style
Apr 15 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
字节飞书面试promise.all实现示例
Jun 16 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正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Javascript调用C#代码
2011/01/17 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python json模块使用实例
2015/04/11 Python
python生成器generator用法实例分析
2015/06/04 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python中return不返回值的问题解析
2020/07/22 Python
详解Python中的路径问题
2020/09/02 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
工作个人的自我评价
2014/01/14 职场文书
C++程序员求职信范文
2014/04/14 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏