splice的使用场景

splice() 是一个非常强大的数组方法，它可以实现删除、添加、替换等操作

一、基本语法

array.splice(startIndex, deleteCount, item1, item2, ...)

参数说明：

• startIndex: 开始修改的位置

• deleteCount: 要删除的元素数量

• item1, item2, ...: 要添加的新元素

二、常见使用场景

2.1删除元素

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

// 删除最后一个元素
arr.splice(-1, 1);
console.log(arr); // [1, 4]

// 删除第一个元素
arr.splice(0, 1);
console.log(arr); // [4]

2.2 添加元素

// 在中间添加元素
let arr = [1, 2, 3];
arr.splice(1, 0, 'a', 'b'); // 在索引1处插入'a','b'
console.log(arr); // [1, 'a', 'b', 2, 3]

// 在开头添加元素
arr.splice(0, 0, 'start');
console.log(arr); // ['start', 1, 'a', 'b', 2, 3]

// 在末尾添加元素
arr.splice(arr.length, 0, 'end');
console.log(arr); // ['start', 1, 'a', 'b', 2, 3, 'end']

2.3 替换元素

// 替换单个元素
let arr = [1, 2, 3, 4];
arr.splice(1, 1, 'two');
console.log(arr); // [1, 'two', 3, 4]

// 替换多个元素
arr.splice(1, 2, 'x', 'y', 'z');
console.log(arr); // [1, 'x', 'y', 'z', 4]

三、实际应用场景

3.1 数组元素的增删改

// 待办事项列表管理
let todos = ['学习', '运动', '睡觉'];

// 完成一项任务（删除）
let index = todos.indexOf('运动');
if (index > -1) {
    todos.splice(index, 1);
}

// 插入新任务（添加）
todos.splice(1, 0, '看电影');

console.log(todos); // ['学习', '看电影', '睡觉']

3.2 数组更新

// 更新购物车商品数量
let cart = [
    {id: 1, name: "商品1", quantity: 1},
    {id: 2, name: "商品2", quantity: 2}
];

// 更新商品数量
let itemIndex = cart.findIndex(item => item.id === 2);
if (itemIndex > -1) {
    cart.splice(itemIndex, 1, {...cart[itemIndex], quantity: 3});
}

3.3数组分割和合并

// 在特定位置分割数组
let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(2); // 从索引2开始删除所有元素
console.log(arr);     // [1, 2]
console.log(removed); // [3, 4, 5]

// 合并数组
arr.splice(arr.length, 0, ...removed);
console.log(arr); // [1, 2, 3, 4, 5]

3.4 数组元素的重排

// 将某个元素移动到新位置
let arr = ['a', 'b', 'c', 'd'];
let element = arr.splice(1, 1)[0]; // 删除并保存元素
arr.splice(2, 0, element); // 在新位置插入
console.log(arr); // ['a', 'c', 'b', 'd']

四、注意事项

1. 返回值

let arr = [1, 2, 3];
let removed = arr.splice(1, 1);
console.log(removed); // [2] - 返回被删除元素的数组

2. 负数索引

let arr = [1, 2, 3, 4];
arr.splice(-2, 1); // 从倒数第二个元素开始删除
console.log(arr); // [1, 2, 4]

3. 不影响原数组的替代方法

let arr = [1, 2, 3, 4];
// 使用 slice() 和 spread 运算符
let newArr = [...arr.slice(0, 1), 'new', ...arr.slice(2)];
console.log(arr);     // [1, 2, 3, 4] - 原数组未变
console.log(newArr);  // [1, 'new', 3, 4]