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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
javascript学习小结之prototype
Dec 03 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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/06 新手入门
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
django基础之数据库操作方法(详解)
2017/05/24 Python
Python中 map()函数的用法详解
2018/07/10 Python
python调用自定义函数的实例操作
2019/06/26 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
django使用graphql的实例
2020/09/02 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
师范应届生求职信
2013/11/15 职场文书
会计自荐书
2013/12/02 职场文书
软件售后服务方案
2014/05/29 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
如何写辞职信
2015/05/13 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js