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 confirm选择判断
Oct 18 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
antd design table更改某行数据的样式操作
Oct 31 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+DBM的同学录程序(2)
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
Python 递归函数详解及实例
2016/12/27 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
机电一体化专业推荐信
2013/12/03 职场文书
正规的求职信范文分享
2013/12/11 职场文书
费用会计岗位职责
2014/01/01 职场文书
初一家长会邀请函
2014/01/31 职场文书
人力资源求职信
2014/05/25 职场文书
大学生简历求职信
2014/06/24 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
工作试用期自我评价
2015/03/10 职场文书
房产遗嘱范本
2015/08/06 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers