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 写的简单进度条控件
Jan 22 Javascript
JavaScript 乱码问题
Aug 06 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
前端面试知识点目录一览
Apr 15 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
JS实现随机点名器
Apr 12 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
Python实现的矩阵类实例
2017/08/22 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
商务英语专业应届毕业生求职信
2013/10/28 职场文书
师范大学应届生求职信
2013/11/21 职场文书
绩效工资实施方案
2014/03/15 职场文书
我为自己代言广告词
2014/03/18 职场文书
委托书范文
2014/04/02 职场文书
给客户的感谢信
2015/01/21 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers