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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
轻松搞定js表单验证
Oct 13 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
vue实现百度搜索功能
Dec 28 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 多个submit提交表单 处理方法
2009/07/07 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
列表内容的选择
2006/06/30 Javascript
拖动一个HTML元素
2006/12/22 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python3.6的venv模块使用详解
2018/08/01 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
战略合作意向书范本
2014/04/01 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
英文投诉信格式
2015/07/03 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Go语言grpc和protobuf
2022/04/13 Golang
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js