当前位置: 首页 > news >正文

slice() 和 splice()

slice()splice() 写几个常见开发场景的实用例子


✅ 一、slice() 应用示例(不会修改原数组)


🎯 1. 分页展示(每页显示 n 条)

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const page = 2;
const pageSize = 3;const pageData = data.slice((page - 1) * pageSize, page * pageSize);
console.log(pageData); // [4, 5, 6]

🎯 2. 复制数组的一部分做备份

const arr = ['A', 'B', 'C', 'D'];
const copy = arr.slice();  // 整个复制
copy.push('E');console.log(arr);  // ['A', 'B', 'C', 'D']
console.log(copy); // ['A', 'B', 'C', 'D', 'E']

🎯 3. 获取最后 n 个元素

const logs = [1, 2, 3, 4, 5];
const lastTwo = logs.slice(-2);  // 从末尾截取两个console.log(lastTwo); // [4, 5]

✅ 二、splice() 应用示例(会修改原数组)


🎯 1. 删除数组中的指定元素

const arr = ['A', 'B', 'C', 'D'];
const index = arr.indexOf('B');
if (index !== -1) {arr.splice(index, 1);  // 删除 1 个元素
}
console.log(arr); // ['A', 'C', 'D']

🎯 2. 插入新元素到指定位置

const arr = ['A', 'C', 'D'];
arr.splice(1, 0, 'B');  // 在索引1插入 'B'console.log(arr); // ['A', 'B', 'C', 'D']

🎯 3. 替换元素(编辑功能)

const arr = ['A', 'B', 'C'];
arr.splice(1, 1, 'X'); // 删除1个,插入'X'(替换)console.log(arr); // ['A', 'X', 'C']

🎯 4. 实现“撤销删除”功能

const arr = ['A', 'B', 'C'];
const removed = arr.splice(1, 1); // 删除 'B'
console.log(arr);     // ['A', 'C']
console.log(removed); // ['B']// 撤销
arr.splice(1, 0, removed[0]);
console.log(arr);     // ['A', 'B', 'C']

🧠 总结思路:

使用场景用哪个?
不想动原数组,只是取一部分slice()
要修改原数组,删除/插入/替换元素splice()
http://www.lryc.cn/news/609149.html

相关文章:

  • 决策树模型知识点整理:从原理到实战(含可视化与调参)
  • Corrosion2靶机练习笔记
  • 【图像处理基石】如何使用deepseek进行图像质量的分析?
  • 【Django】-9- 单元测试和集成测试(上)
  • Day23--回溯--39. 组合总和,40. 组合总和 II,131. 分割回文串
  • 机器人抓取流程介绍与实现——机器人抓取系统基础系列(七)
  • 深度学习中卷积与互相关
  • [ java Thread 线程 ] 由“一对一“到“一对多“
  • 【Linux网络编程基础--socket地址API】
  • 使用 Vuepress + GitHub Pages 搭建项目文档
  • GraphRAG:基于知识图谱的检索增强生成技术解析
  • 微分方程模型:用“变化率”的语言,描绘世间万物的动态演化
  • async/await和Promise之间的关系是什么?(补充)
  • 图像识别区分指定物品与其他物体
  • SelectDB数据库,新一代实时数据仓库的全面解析与应用
  • Kubernetes滚动更新、蓝绿部署与金丝雀发布方案对比分析及选型建议
  • 延迟任务方案-DelayQueue
  • noob靶机复现笔记
  • 【stm32】GPIO输入
  • 环绕字符串中的唯一子字符串-动态规划
  • 其它IO函数
  • STM32 串口发送
  • 如何解决pip安装报错ModuleNotFoundError: No module named ‘scikit-learn’问题
  • Linux环境下使用Docker搭建多服务环境
  • 学习游戏制作记录(实现克隆攻击的克隆复制和水晶代替克隆)8.3
  • 【gradle】插件那些事
  • 7.28-8.3周报
  • C的数据类型与变量
  • 高质量数据集|从武汉光谷《面向科技情报大模型的高质量数据集建设》招标项目谈起
  • Matlab算法编程示例4:数值解法求解常微分方程的代码实例