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 while语句和do while语句的区别分析
Dec 08 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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实现无限极分类图文教程
2014/11/25 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
浅谈对yield的初步理解
2017/05/29 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python多线程同步之文件读写控制
2021/02/25 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
公司投资建议书
2014/05/16 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
文员岗位职责范本
2015/04/16 职场文书
小平您好观后感
2015/06/09 职场文书
2015年暑假生活总结
2015/07/13 职场文书
React中的Context应用场景分析
2021/06/11 Javascript