JavaScript splice()方法详解

 更新时间:2020年09月22日 11:14:19   投稿:shangke  
这篇文章介绍了JavaScript splice()方法,有需要的朋友可以参考一下

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() 方法用于添加或删除数组中的元素。

注意:这种方法会改变原始数组。

返回值

如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。

语法

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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Web开发之JavaScript

    Web开发之JavaScript

    笔者认为web开发包括设计html,javascript,css,以及一种高级语言,比如c#,java等等
    2012-03-03
  • setTimeout和setInterval的深入理解

    setTimeout和setInterval的深入理解

    以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起
    2013-11-11
  • 详解JavaScript中的blink()方法的使用

    详解JavaScript中的blink()方法的使用

    这篇文章主要介绍了详解JavaScript中的blink()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • TypeScript中的函数和类你了解吗

    TypeScript中的函数和类你了解吗

    这篇文章主要为大家详细介绍了TypeScript中的函数和类,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 关于JavaScript对象类型之Array及Object

    关于JavaScript对象类型之Array及Object

    这篇文章主要介绍了关于JavaScript对象类型之Array及Object,Array 类型是 ECMAScript 中最常用的类型了。而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别,需要的朋友可以参考下
    2023-05-05
  • Javascript Math ceil()、floor()、round()三个函数的区别

    Javascript Math ceil()、floor()、round()三个函数的区别

    Round是四舍五入的。。。Ceiling是向上取整。。float是向下取整
    2010-03-03
  • 命令行下执行TypeScript文件的三种方法

    命令行下执行TypeScript文件的三种方法

    本文讲解了命令行下执行TypeScript脚本文件的三种方法,需要的朋友可以参考下
    2022-10-10
  • window.requestAnimationFrame是什么意思,怎么用

    window.requestAnimationFrame是什么意思,怎么用

    window.requestAnimationFrame 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘之前作为一个回调函数被调用,就是告诉浏览器在刷新屏幕的时候,调用这个方法
    2013-01-01
  • javascript中this指向详解

    javascript中this指向详解

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象,接下来我会深入的探讨这个问题。
    2016-04-04
  • JavaScript ES6箭头函数使用指南

    JavaScript ES6箭头函数使用指南

    JavaScript ES6箭头函数是一个来自ECMAScript 2015(又称ES6)的全新特性,有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文
    2018-12-12

最新评论