JS 数组方法 slice 和 splice 的区别

1. slice

概述

slice 方法用于提取数组中的一部分,返回提取结果,不会改变原数组

语法

 
  1. array.slice(start, end)
  2. start 起始位置 end 可选参数,结束位置
  3. 返回值: 起始位置到结束位置之间的数据,包含起始位置,但是不包含结束位置
  4. 当位置的值为负数时,代表从倒数第几个元素开始提取,如: -1 代表倒数第一个元素

实例

 
  1. const arr = ['what', 'are', 'you', 'doing', '?']
  2. // ['are', 'you']
  3. const res1 = arr.slice(1, 3)
  4. // ['are', 'you', 'doing']
  5. const res2 = arr.slice(1, -1)
2. splice

语法

 
  1. array.splice(index, howmany[, item1, item2, ...])
  2. index 起始位置,从何处开始
  3. howmany 删除的元素数量,为 0 时不会删除任何元素
  4. item1, item2, .. 可选参数,要添加到数组中的新项目
  5. 返回值:被删除元素构建的新数组,没有删除时返回空数组
  6. 当位置的值为负数时,代表从倒数第几个元素开始提取,如: -1 代表倒数第一个元素

实例

 
  1. const arr = ['what', 'are', 'you', 'doing', '?']
  2. // ['are', 'you', 'doing']
  3. const delArr = arr.splice(1, 3)
  4. // ['what', '?']
  5. console.log(arr);
 
  1. const arr = ['what', 'are', 'you', 'doing', '?']
  2. // []
  3. const delArr = arr.splice(1, 0, 'ok', 'name')
  4. // ['what', 'ok', 'name', 'are', 'you', 'doing', '?']
  5. console.log(arr);
 
  1. const arr = ['what', 'are', 'you', 'doing', '?']
  2. // ['you']
  3. const delArr = arr.splice(2, 1, 'ok')
  4. // ['what', 'are', 'ok', 'doing', '?']
  5. console.log(arr);

应用场景

现有物联网设备每隔一段时间会向APP发送一些数据,APP需要将数据临时保存起来,等待特定时机将这些数据一次性发送给服务端,保存这些数据时如果有相同的id,则后面的数据覆盖前面的数据

 
  1. // 缓存变量
  2. const data = []
  3. setInterval(() => {
  4. // 生成 1~5 之间的整数
  5. const id = Math.round(Math.random() * 4 + 1)
  6. const score = Math.round(Math.random() * 100)
  7. // 要存入缓存变量中的数据
  8. const user = { id, score }
  9. // 存入缓存变量
  10. const index = data.findIndex(item => item.id == id)
  11. index === -1 ? data.push(user) : data.splice(index, 1, user);
  12. // 查看数据
  13. console.log(user);
  14. console.log(data);
  15. }, 3000)
3. slice 和 splice 区别

slice() 方法用于从数组中选取元素,返回值是选取的元素,并且不会改变原数组

splice() 方法用于在数组中添加和删除元素,返回值是被删除的元素,会改变原数组

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动规训练2

一、最小路径和 1、题目解析 就是一个人从左上往做下走,每次只能往右或者往下,求他到终点时,路径上数字和最小,返回最小值 2、算法原理 a状态表示方程 小技巧:经验题目要求 用一个二维数组表示,创建一个…

Flask Python:数据库多条件查询,flask中模型关联

前言 在上一篇Flask Python:模糊查询filter和filter_by,数据库多条件查询中,已经分享了几种常用的数据库操作,这次就来看看模型的关联关系是怎么定义的,先说基础的关联哈。在分享之前,先分享官方文档,点击查看 从文档…

蓝桥杯算法基础(36)动态规划dp经典问题详解

动态规划 -动态规划方法方法代表了这一类问题(最优子结构or子问题最优性)的有一半解法,是设计方法或者策略,不是具体算法 -本质是递推,核心是找到状态转移的方式,写出dp方程 -形式:记忆性递归递推01背包问题…

FreeRTOS中断管理以及实验

FreeRTOS中断管理以及实验 继续记录学习FreeRTOS的博客,参照正点原子FreeRTOS的视频。 ARM Cortex-M 使用了 8 位宽的寄存器来配置中断的优先等级,这个寄存器就是中断优先级配置寄存器 , STM32寄存器中并且这个寄存器只使用[7:4]&#xff0c…

Rust 中的字符串类型:`str` 和 `String`

Rust 中的字符串类型:&str 和 String 文章目录 Rust 中的字符串类型:&str 和 String1. &str:不可变的字符串引用2. String:可变的字符串3、字符串使用综合案例代码执行结果 在 Rust 编程语言中,有两种主要…

RTX RTOS 操作实例分析之---线程(thread)

0 Preface/Foreword 1 线程(thread) 1.1 线程定义 1.1.1 USE_BASIC_THREADS(宏定义) 经过以上步骤(makefile包含),USE_BASIC_THREADS在编译阶段被定义到相应的模块中。 1.1.2 定义线程ID变量…

安装Pillow库的方法最终解答!_Python第三方库

安装Python第三方库Pillow 我的环境:Window10,Python3.7,Anaconda3,Pycharm2023.1.3 pillow库 Pillow库是一个非常强大的图像处理库。它提供了广泛的图像处理功能,让我们可以轻松地读取和保存图像、创建缩略图和合并到…

Java学习day5-面向对象2

构建标准JavaBean快捷方式 快捷键:altinsert(Fn)->构造函数->全选构造带参方法,不选择则空参构造 插件:ptg,安装后右键单击,倒数第三个则为一键构造所有set/get函数 数据类型 基本数据类型:数据值存储在自己的…

欧拉路径欧拉回路

欧拉回路,指遍历图时通过图中每条边且仅通过一次,最终回到起点的一条闭合回路,适用于有向图与无向图,如果不强制要求回到起点,则被称为欧拉路径。 欧拉图:具备欧拉回路的图 无向图:图的所有顶…

代码随想录 Day37 738.单调递增的数字 968.监控二叉树

738.单调递增的数字 class Solution { public:int monotoneIncreasingDigits(int N) {string strNum to_string(N);// flag用来标记赋值9从哪里开始// 设置为这个默认值,为了防止第二个for循环在flag没有被赋值的情况下执行int flag strNum.size();for (int i s…

37-巩固练习(一)

37-1 if语句等 1、问&#xff1a;输出结果 int main() {int i 0;for (i 0; i < 10; i){if (i 5){printf("%d\n", i);}return 0;} } 答&#xff1a;一直输出5&#xff0c;死循环 解析&#xff1a;i5是赋值语句&#xff0c;不是判断语句&#xff0c;每一次循…

路径规划——曲线拟合详解(一):多项式轨迹与QP优化(minimum-snap算法核心部分)

前言 历经一个多星期时间&#xff0c;我们在路径规划——搜索算法部分讲解了7种常见的路径搜索算法&#xff0c;每一种算法的链接放在下面了&#xff0c;有需要的朋友点击跳转即可&#xff1a; 路径规划——搜索算法详解&#xff08;一&#xff09;&#xff1a;Dijkstra算法详…

由平行公设的不同而来三种几何学浅谈

由平行公设的不同而来三种几何学浅谈 欧几里德的《几何原本》 欧几里德的《几何原本》一开始就给出了23个定义&#xff0c;5个公设&#xff0c;5个公理。 23个定义(部分)&#xff1a; 点是没有部分的东西。 线是没有宽度的长度。 线的端点是点。 直线是各点都在同一方向上…

GraalVM运行模式和企业级应用

文章目录 GraalVM运行模式JIT模式AOT模式 GraalVM的问题和解决方案GraalVM企业级应用传统架构的问题Serverless架构函数计算Serverless应用场景Serverless应用 GraalVM内存参数 GraalVM运行模式 JIT模式 JIT&#xff08; Just-In-Time &#xff09;模式 &#xff0c;即时编译模…

重置gitlab root密码

gitlab-rails console -e production user User.where(id: 1).first user User.where(name: "root").first #输入重置密码命令 user.password"admin123!" #再次确认密码 user.password_confirmation"admin123!" #输入保存命令&am…

单例(Singleton)设计模式总结

1. 设计模式概述&#xff1a; 设计模式是在大量的实践中总结和理论化之后优选的代码结构、编程风格、以及解决问题的思考方式。设计模式免去我们自己再思考和摸索。 就像是经典的棋谱&#xff0c;不同的棋局&#xff0c;我们用不同的棋谱。"套路"经典的设计模式一共有…

Ruby 之交租阶段信息生成

题目 我看了一下&#xff0c;这个题目应该不是什么机密&#xff0c;所以先放上来了。大概意思是根据合同信息生成交租阶段信息。 解答 要求是要使用 Ruby 生成交租阶段信息&#xff0c;由于时间比较仓促&#xff0c;变量名那些就用得随意了些。要点主要有下面这些&#xff1a…

【介绍什么是DDOS】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Qt 的发展历史、现状与启示

Qt 最早在1991年由挪威的两位程序员 Eirik Chambe-Eng 和 Haavard Nord 开发&#xff0c;他们在1994年创立 Trolltech 公司&#xff08;奇趣科技&#xff09;正式经营软件业务。Qt 的第一个公众预览版于1995年面世&#xff0c;之后在2008年被诺基亚收购&#xff1b;2011年到201…

【C++】编程规范之内存规则

在高质量编程中&#xff0c;内存管理是一个至关重要的方面。主要有以下原则&#xff1a; 内存分配后需要检查是否成功&#xff1a;内存分配可能会失败&#xff0c;特别是在内存紧张的情况下。因此&#xff0c;在分配内存后&#xff0c;应该检查分配是否成功。 int* ptr new …