百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

JS短文,如何正确理解Splice() 函数与Slice() 函数

wptr33 2025-05-05 19:03 68 浏览

转载说明:原创不易,未经授权,谢绝任何形式的转载

Splice() 函数与 Slice() 函数都是 JavaScript 数组中常用的方法之一。虽然它们的名称很相似,但它们的作用却截然不同。在这篇文章中,我们将深入了解这两个函数的不同之处以及如何使用它们。

SPLICE() 函数介绍

splice() 是 JavaScript 数组对象的方法之一,可以用于修改数组的内容。具体来说,它可以用于删除或插入元素,并可以返回已删除的元素。

splice() 方法有三个参数,分别为:

  1. 起始索引(必须):指定要修改的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。
  2. 要删除的元素个数(可选):指定要删除的元素的数量。如果该值为 0,则不删除任何元素。
  3. 要插入的元素(可选):指定要插入到数组中的元素。

下面是 splice() 方法的一些常见用法:

1、删除元素:要删除一个元素,可以使用 splice() 方法并将第二个参数设置为 1。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(arr); // [1, 2, 4, 5]

2、插入元素:要在数组中插入一个元素,可以使用 splice() 方法并将第二个参数设置为 0,然后在第三个参数中指定要插入的元素。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 6); // 在索引 2 的位置插入 6
console.log(arr); // [1, 2, 6, 3, 4, 5]
let num_arr = [1,2,3,4,5];
num_arr.splice(1,0, …[2,3]) === [1,2,3,4,5]

3、替换元素:要替换一个元素,可以使用 splice() 方法并将第二个参数设置为 1,然后在第三个参数中指定要替换的元素。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6); // 从索引 2 开始删除 1 个元素,并在该位置插入 6
console.log(arr); // [1, 2, 6, 4, 5]

4、返回已删除的元素:splice() 方法还可以返回已删除的元素。

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 1); // 从索引 2 开始删除 1 个元素,并将其存储在 removed 变量中
console.log(arr); // [1, 2, 4, 5]
console.log(removed); // [3]

注意:使用 splice() 方法会改变原始数组。如果您不希望改变原始数组,可以先创建一个副本并对其进行操作。

SLICE() 函数介绍

slice() 是 JavaScript 数组对象的方法之一,可以用于获取数组的一部分并返回一个新的数组。它不会修改原始数组,而是返回一个包含所选元素的新数组。

slice() 方法有两个参数,分别为:

  1. 起始索引(可选):指定要获取的数组的开始位置的索引。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则从数组的开头开始选取元素。
  2. 结束索引(可选):指定要获取的数组的结束位置的索引(不包括该位置上的元素)。如果该值是负数,则表示从数组的末尾开始计算的位置。如果省略该参数,则选取到数组的最后一个元素。

下面是 slice() 方法的一些常见用法:

1、获取一段连续的元素:要获取数组中的一段连续的元素,可以使用 slice() 方法并指定起始和结束索引。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4); 
// 从索引 1 开始选取到索引 4(不包括该位置上的元素),即 [2, 3, 4]
console.log(slicedArr); // [2, 3, 4]

2、复制整个数组:要复制整个数组,可以使用 slice() 方法并省略起始和结束索引。

const arr = [1, 2, 3, 4, 5];
const copiedArr = arr.slice(); // 复制整个数组
console.log(copiedArr); // [1, 2, 3, 4, 5]

3、从数组末尾开始获取元素:要从数组的末尾开始获取元素,可以使用负数索引。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(-3); 
// 从数组末尾开始选取 3 个元素,即 [3, 4, 5]
console.log(slicedArr); // [3, 4, 5]

SPLICE() 和 slice() 的区别

splice() 方法:

  • 用于在数组中添加或删除元素。
  • 可以修改原始数组。
  • 第一个参数表示要添加或删除元素的起始位置。
  • 第二个参数表示要删除的元素数量。
  • 可以通过第三个参数及以后的参数来添加元素到指定位置。
  • 返回一个包含被删除元素的数组,如果没有删除元素,则返回一个空数组。

slice() 方法:

  • 用于获取数组的一部分并返回一个新数组。
  • 不会修改原始数组。
  • 第一个参数表示要获取的数组的开始位置的索引。
  • 第二个参数表示要获取的数组的结束位置的索引(不包括该位置上的元素)。
  • 如果省略第二个参数,则选取到数组的最后一个元素。
  • 返回一个包含所选元素的新数组。

结束

今天的内容就介绍到这里,虽然 Splice() 函数和 Slice() 函数都可以在 JavaScript 数组中起到重要的作用,但它们的作用和返回值是完全不同的。如果你需要向数组中添加或删除元素并且希望修改原始数组,则可以使用 Splice() 函数;如果你需要创建一个新的数组并选择其中的一部分元素,则可以使用 Slice() 函数。在使用这两个函数时,请根据你的需求和预期的结果进行选择。

希望今天的分享对你有所帮助,感谢你的阅读,文章创作不易,如果你喜欢我的分享,别忘了点赞转发,让更多有需要的人看到,最后别忘记关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。

相关推荐

1.大白话 Spring_大白话对应的是什么话

此文是学习spring源码一些体会,记录下来,哪里有不对的地方,希望批评指正!1.Spring是什么Spring是一款开源的轻量级Java开发框架,旨在提高开发人员的开发效率以及系统的可维护性。...

MyBatis3.5.11-从入门到高阶_mybatis快速入门

一.课程介绍MyBatis概述...

Spring_spring festival

Spring初始化流程,容器初始化,主要流程在AbstractApplicationContext.refresh()1.容器预先准备-...

关于Spring的69个面试问答--终极列表

这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会被问到的。下次你再也不用担心你的面试了,JavaCodeGeeks这就帮你解答。大多数你可能被问到的问题都列...

49个Spring经典面试题总结(附带答案)

点关注,不迷路!课程资料,关注私信【555】获取,还可领取更多Java面试题资料一、一般问题1.不同版本的SpringFramework有哪些主要功能?2.什么是SpringFram...

MySQL 开发规范_mysql使用规范

一、数据库命名规范所有数据对象名称必须小写:db_user禁止使用MySQL保留关键字,若是则引用``...

Spring框架入门_spring框架入门案例

一.spring是什么?Spring是分层...

JDBC hibernate 和 ibatis 的区别

JDBC、Hibernate和MyBatis(前身是iBatis)都是Java中常见的数据库访问技术,它们各有优缺点,适用于不同的场景。下面是它们的一些区别:JDBC是Java连接...

万变不离其宗,spring常考知识点总结

万变不离其宗,只要理解透了spring常考知识点,那么面试时的问题就好回答了。1.什么是Spring?...

大促数据库压力激增,如何一眼定位 SQL 执行来源?

作者:京东科技王奕龙你是否曾经遇到过这样的情况:在大促活动期间,用户访问量骤增,数据库的压力陡然加大,导致响应变慢甚至服务中断?更让人头疼的是,当你试图快速定位问题所在时,却发现难以确定究竟是哪个业...

SSM三大框架整合详细教程_简单介绍一下ssm框架

SSM三大框架整合详细教程(SPRING+SPRINGMVC+MYBATIS)使用SSM(Spring、SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难...

MyBatis有哪些核心对象?_mybatis核心接口包括

Mybatis基本要素MyBatis有三个基本要素:...

ibatis 核心原理解析_ibs架构

最近查找一个生产问题的原因,需要深入研究ibatis框架的源码。虽然最后证明问题的原因与ibatis无关,但是这个过程加深了对ibatis框架原理的理解。这篇文章主要就来讲讲ibatis...

python常用得内置函数解析——list()函数

ython中最常用的内置函数之一list()。1.函数定义list()函数用于创建一个新的列表对象。...

面试干货——某度Python面试题,转发收藏

目录1、Python是如何进行内存管理的?2、什么是lambda函数?它有什么好处?...