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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
原生js实现滑块区间组件
Jan 20 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
Linux下编译redis和phpredis的方法
2016/04/07 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
2014年国培研修感言
2014/03/09 职场文书
大学自主招生推荐信
2014/05/10 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
暑期家教宣传单
2015/07/14 职场文书
Django实现聊天机器人
2021/05/31 Python