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 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
微信小程序input抖动问题的修复方法
Mar 03 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
实用函数4
2007/11/08 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python list转dict示例分享
2014/01/28 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
django-初始配置(纯手写)详解
2019/07/30 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
浅析python中while循环和for循环
2019/11/19 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
机械设计制造专业个人求职信
2013/09/25 职场文书
运动会广播稿200字
2014/01/15 职场文书
电钳工人个人求职信
2014/05/10 职场文书
校长四风对照检查材料
2014/09/27 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server