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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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 彩色文字实现代码
2009/06/29 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php经典算法集锦
2015/11/14 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python定时截屏实现
2020/11/02 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
进修护士自我鉴定
2013/10/14 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
财务会计岗位职责
2015/02/03 职场文书
会议简报格式范文
2015/07/20 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang