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 相关文章推荐
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
原生JS实现微信通讯录
Jun 18 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中文字符串截取方法实例总结
2014/09/30 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Jquery基础之事件操作详解
2016/06/14 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python 显示数组全部元素的方法
2018/04/19 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
校本教研工作方案
2014/01/14 职场文书
建房协议书
2014/04/11 职场文书
司法助理专业自荐书
2014/06/13 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
英文慰问信范文
2015/03/24 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers