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 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
JS实现盒子拖拽效果
Feb 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
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python 布尔操作实现代码
2013/03/23 Python
Python中的super用法详解
2015/05/28 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
师德师风建设方案
2014/05/08 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
学生会辞职信
2015/03/02 职场文书
自荐信怎么写
2015/03/04 职场文书
学生退学证明
2015/06/23 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Python基础之元类详解
2021/04/29 Python
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
SSM VUE Axios详解
2021/10/05 Vue.js
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers