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(js)设置默认输入焦点(focus)
Dec 28 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
详细分析python3的reduce函数
2017/12/05 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
环保标语大全
2014/06/12 职场文书
诚信考试标语
2014/06/24 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
导游词之无锡梅园
2019/11/28 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
MySQL添加索引特点及优化问题
2022/07/23 MySQL
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL