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 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
js实现div色块碰撞
Jan 16 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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
我的论坛源代码(一)
2006/10/09 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
javascript radio 联动效果
2009/03/04 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python圣诞树编写实例详解
2020/02/13 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
人事文员岗位职责
2014/02/16 职场文书
商业项目策划方案
2014/06/05 职场文书
大学生安全责任书
2014/07/25 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang