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() |