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 数组的 uniq 方法
Jan 23 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 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/02/13 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
计算机毕业大学生求职信
2014/06/26 职场文书
保密工作承诺书
2014/08/29 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
pytorch中的numel函数用法说明
2021/05/13 Python