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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
javascript如何写热点图
Dec 08 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
example1.php
2006/10/09 PHP
改进的IP计数器
2006/10/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
保证书范文大全
2014/04/28 职场文书
2014年师德承诺书
2014/05/23 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
推普标语口号大全
2015/12/26 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL