JavaScript splice()方法详解


Posted in Javascript onSeptember 22, 2020

JavaScript splice() 方法

数组中添加新元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js数组添加元素_三水点靠木</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

splice定义和用法

splice() 方法用于添加或删除数组中的元素。

注意:这种方法会改变原始数组。

返回值

如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。

JavaScript splice()方法详解

语法

array.splice(index,howmany,item1,.....,itemX)

参数 Values

参数 描述
index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 可选。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素

返回值

Type 描述
Array 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

更多实例

实例

移除数组的第三个元素,并在数组第三个位置添加新元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木</title>
</head>
<body>

<p id="demo">点击按钮添加和删除元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,1,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

实例
从第三个位置开始删除数组后的两个元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木</title>
</head>
<body>

<p id="demo">点击按钮删除数组中的两个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,2);
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
	
</body>
</html>

到此这篇关于JavaScript splice()方法详解的文章就介绍到这了,更多相关JavaScript splice()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
Javascript函数式编程语言
Oct 11 Javascript
理解javascript异步编程
Jan 27 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
javascript与cookie 的问题详解
Nov 11 #Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 #Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 #Javascript
AJAX跨域请求json数据的实现方法
Nov 11 #Javascript
Javascript弹出窗口的各种方法总结
Nov 11 #Javascript
探讨js中的双感叹号判断
Nov 11 #Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 #Javascript
You might like
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JS随机密码生成算法
2019/09/23 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
python 实时遍历日志文件
2016/04/12 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python 动态加载的实现方法
2017/12/22 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
乔迁宴答谢词
2014/01/21 职场文书
护士岗位职责
2014/02/16 职场文书
企业安全生产标语
2014/06/06 职场文书
院系推荐意见
2015/06/05 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
canvas绘制折线路径动画实现
2021/05/12 Javascript