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 面向对象(三)接口代码
May 23 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
详解vue中axios的封装
Jul 18 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
React实现评论的添加和删除
Oct 20 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
Vue实现日历小插件
2019/06/26 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python随机数random模块使用指南
2016/09/09 Python
Python中django学习心得
2017/12/06 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
经典的班主任推荐信
2013/10/28 职场文书
活动总结报告格式
2014/05/09 职场文书
留学生求职信
2014/06/03 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
python热力图实现的完整实例
2022/06/25 Python