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

slice() 和 splice()

news 2025/8/4 6:07:19

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']