JavaScript中splice(0)与slice并发修改行为对比及数据安全问询

关于oldArray.splice(0)的行为 #

首先明确：JavaScript是单线程模型，同步代码会按顺序完整执行，不会被打断；异步任务（如setTimeout、Promise回调）需等当前同步任务完成后才会运行。所谓"执行期间并发修改"分两种场景：

1. 新增元素是否会被包含进newArray？

   • 同步push（在splice(0)调用前执行）：会被包含。因为splice(0)会移除原数组所有元素，包括刚push的新元素。
   • 异步push（如在splice(0)后的微/宏任务中）：不会被包含。splice(0)是同步操作，执行完毕后才会处理异步任务，此时newArray已经获取了执行时的全部元素。
   • 不存在"splice执行过程中"的同步修改，单线程下splice会一次性执行完成。

2. 执行完成后oldArray的状态？

   • 同步push后执行splice(0)：oldArray会被清空，所有元素都被移到newArray。
   • 异步push：push操作在splice(0)执行完后才运行，此时oldArray为空，push后的元素会保留在原数组中。

两种写法的对比与优劣 #

第二种写法的行为 #

const newArray = oldArray.slice();
oldArray = oldArray.slice(newArray.length);

• 第一步slice()浅拷贝当前数组的所有元素；第二步将oldArray重新赋值为"原数组长度之后的子数组"。

核心差异

• splice(0)：直接修改原数组，移除所有元素到newArray，原数组（及所有指向它的引用）在同步场景下会被清空。若执行前有新增元素，会被一并取走，导致原数组丢失数据。
• 第二种写法：通过复制获取现有元素，再重新赋值原数组保留新增元素。同步场景下，两次slice之间新增的元素会留在新的oldArray中；但如果有删除操作，可能因slice起始索引超过当前数组长度导致元素丢失，且其他持有oldArray引用的变量不会同步指向新数组，易引发数据不一致。

满足需求的最优选择

你的需求是确保新增元素保留在原数组、不丢失，推荐优化后的splice写法：

const length = oldArray.length;
const newArray = oldArray.splice(0, length);

这种写法既直接修改原数组（保持引用一致），又只会移除执行时的前length个元素，同步新增的元素会留在原数组中。例如：

let oldArray = [1,2];
const len = oldArray.length; // 3
oldArray.push(3); // oldArray变为[1,2,3]
const newArray = oldArray.splice(0, len); // newArray是[1,2]，oldArray是[3]

验证方法 #

同步场景测试 #

// 测试splice(0)
let oldArray = [1,2];
oldArray.push(3);
const newArray1 = oldArray.splice(0);
console.log(newArray1); // [1,2,3]
console.log(oldArray); // []

// 测试第二种写法
oldArray = [1,2];
const newArray2 = oldArray.slice();
oldArray.push(3);
oldArray = oldArray.slice(newArray2.length);
console.log(newArray2); // [1,2]
console.log(oldArray); // [3]

// 测试优化后的splice写法
oldArray = [1,2];
const len = oldArray.length;
oldArray.push(3);
const newArray3 = oldArray.splice(0, len);
console.log(newArray3); // [1,2]
console.log(oldArray); // [3]

异步场景测试 #

// 测试splice(0)
let oldArray = [1,2];
const newArray1 = oldArray.splice(0);
setTimeout(() => {
  oldArray.push(3);
  console.log(newArray1); // [1,2]
  console.log(oldArray); // [3]
}, 0);

// 测试第二种写法
oldArray = [1,2];
const newArray2 = oldArray.slice();
oldArray = oldArray.slice(newArray2.length);
setTimeout(() => {
  oldArray.push(3);
  console.log(newArray2); // [1,2]
  console.log(oldArray); // [3]
}, 0);

内容的提问来源于stack exchange，提问作者Anthony Luo