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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
js select实现省市区联动选择
Apr 17 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
JS沙箱模式实例分析
Sep 04 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
vuex的module模块用法示例
Nov 12 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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 if 想到的些问题
2008/03/22 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
浅析Python的命名空间与作用域
2020/11/25 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
AOP的定义以及作用
2013/09/08 面试题
先进基层党组织主要事迹材料
2015/11/03 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers
Python创建SQL数据库流程逐步讲解
2022/09/23 Python