JavaScript数组原子操作技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript数组原子操作实现方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JavaScript的“原子操作”概念与传统不同，是因为其主线程单线程特性避免了并发冲突，但在异步或多线程（Web Workers）场景下仍需保证数据一致性。1. 通过不可变数据结构实现逻辑上的原子性：每次数组更新都返回新实例，如使用扩展运算符添加元素、filter或slice删除元素、map更新元素，确保状态变化完整且可预测；2. 在多线程环境下，使用SharedArrayBuffer和Atomics API实现真正的原子操作，如Atomics.add保证共享内存的递增操作不被中断，适用于高并发计算场景，但需注意安全策略和使用限制。这两种策略共同解决了JavaScript中不同层级的“原子性”需求，确保数据状态的完整性和可预测性。

在JavaScript中实现数组的“原子操作”，其实更多的是在探讨如何确保数据状态的完整性和可预测性，尤其是在异步操作或多线程（Web Workers）环境下。由于JavaScript在主线程是单线程运行的，传统意义上那种防止并发修改的“原子性”冲突，在主线程中并不常见，因为代码执行是顺序的。但当我们谈到“原子性”，通常是指一个操作要么完全成功，要么完全失败，中间不会出现部分完成的状态，这对于数据一致性至关重要。

我们主要通过两种策略来达成这种“原子性”的：一是不可变数据结构，通过创建新的数组来反映状态变化，而不是直接修改旧数组，这在逻辑上确保了每次更新的“瞬间完成”；二是利用JavaScript提供的SharedArrayBuffer和Atomics API，这才是真正意义上的、针对共享内存的多线程原子操作。

为什么JavaScript的“原子操作”概念与传统理解不同？

说实话，刚听到“原子操作”这个词在JavaScript里，我心里是咯噔一下的。因为在计算机科学的语境里，“原子操作”通常和并发、多线程紧密相连，它指的是一个操作在执行过程中不会被中断，也不会被其他线程的干扰所影响。比如，在C++或Java里，一个线程在修改共享变量时，会确保这个操作是原子的，不会出现读到一半、写到一半的情况。

但JavaScript在浏览器的主线程里，它是个“单线程”语言。这意味着同一时间，只有一段JavaScript代码在执行。所以，你不用担心两个不同的JavaScript函数在主线程里同时修改同一个数组而导致数据混乱。一个函数执行完，另一个函数才会开始。这种执行模型本身就提供了一种“操作的原子性”——至少在单个任务队列内是这样的。

然而，一旦引入了异步操作（比如fetch请求、setTimeout、Promise）或者Web Workers（真正的多线程环境），情况就变得复杂起来了。异步操作虽然不会中断当前执行的JavaScript代码，但它们可能在未来某个不确定的时间点，基于一个可能已经过时的数据状态来执行操作。而Web Workers则直接引入了并发修改共享数据的可能性。所以，当我们在JavaScript里谈“原子操作”，更多的是在思考如何管理这些复杂场景下的数据一致性，确保每次状态变更都是一个完整的、可预测的“事务”。

如何通过不可变数据结构实现“原子性”更新？

在我看来，在JavaScript的主线程应用中，实现数组“原子性”更新最优雅且最常用的方式就是拥抱不可变性（Immutability）。这就像你不是在原合同上涂涂改改，而是每次有新的修改，都直接重新打印一份新的、完整的合同。旧的合同还在那里，未被触碰，新的合同则反映了最新的状态。

这种模式的精髓在于：当你需要修改一个数组时，你不是直接调用像push()、pop()、`splice()这样的会改变原数组的方法，而是使用那些会返回一个新数组的方法，或者利用ES6的展开运算符（Spread Syntax）来构造一个新数组。

我们来看几个例子：

1. 添加元素： 不是用push()，而是：

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // newArray 是 [1, 2, 3, 4]，originalArray 仍是 [1, 2, 3]

或者，如果你想在开头添加：

const newArrayAtStart = [0, ...originalArray]; // newArrayAtStart 是 [0, 1, 2, 3]

2. 删除元素： 不是用splice()，而是结合filter()或slice()：

const originalArray = [1, 2, 3, 4];
const itemToRemove = 3;
const newArrayAfterRemoval = originalArray.filter(item => item !== itemToRemove); // newArrayAfterRemoval 是 [1, 2, 4]
// 如果按索引删除：
const indexToRemove = 1; // 删除索引为1的元素 (2)
const newArrayByIndexRemoval = [
    ...originalArray.slice(0, indexToRemove),
    ...originalArray.slice(indexToRemove + 1)
]; // newArrayByIndexRemoval 是 [1, 3, 4]

3. 更新元素： 不是直接修改某个索引的值，而是用map()：

const originalArray = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' }
];
const updatedId = 2;
const newArrayAfterUpdate = originalArray.map(item =>
    item.id === updatedId ? { ...item, name: 'B_Updated' } : item
);
// newArrayAfterUpdate 是 [{ id: 1, name: 'A' }, { id: 2, name: 'B_Updated' }, { id: 3, name: 'C' }]

这种不可变性模式的好处是显而易见的：

• 可预测性： 你总是知道数组的状态是何时、如何改变的，因为每次改变都生成了一个全新的快照。
• 调试更容易： 由于没有副作用，追踪数据流变得简单。
• 并发安全（逻辑上）： 即使在异步操作中，每个操作都是基于一个明确的、未被修改的旧状态，然后生成一个新的状态，避免了竞态条件。
• React/Redux等框架的基石： 很多现代前端框架和状态管理库都鼓励甚至强制使用不可变性来优化性能和简化状态管理。

当然，这种方式的“原子性”是逻辑上的，它确保了在你的应用逻辑层面，每次数组更新都是一个完整的、不可分割的单元。

SharedArrayBuffer 和 Atomics API 在多线程场景下的应用

但凡事总有例外，或者说，总有更深层的玩法。如果你的需求是真正的多线程并发访问和修改同一块内存，并且需要保证这些操作的原子性，那么JavaScript提供了SharedArrayBuffer和Atomics API。这主要用于Web Workers之间共享内存的场景。

SharedArrayBuffer允许你在多个Web Workers之间共享一个ArrayBuffer实例。这意味着这些Workers可以同时读写同一块内存区域。这正是传统意义上“原子操作”大显身手的地方，因为如果没有原子操作，多个Workers同时修改同一块内存（比如一个计数器），就可能出现竞态条件，导致数据不一致。

Atomics对象提供了一系列静态方法，用于对SharedArrayBuffer中的数据进行原子操作。这些操作包括原子读取、写入、加减、比较并交换等，它们保证了操作的完整性，不会被其他线程的读写所中断。

我得承认，这玩意儿上手有点门槛，而且因为涉及真正的共享内存和并发，需要非常小心地设计你的数据访问模式。

一个简单的例子：原子计数器

假设我们有一个共享的计数器，多个Web Workers需要对其进行递增操作。

主线程 (main.js):

// 创建一个 SharedArrayBuffer，用于存储一个32位整数
const sab = new SharedArrayBuffer(4); // 4 字节 = 1 个 32 位整数
const int32Array = new Int32Array(sab); // 创建一个 Int32Array 视图

// 初始化计数器为 0
Atomics.store(int32Array, 0, 0);

// 创建两个 Web Worker
const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');

// 将 SharedArrayBuffer 传递给 Workers
worker1.postMessage({ buffer: sab, id: 'Worker 1' });
worker2.postMessage({ buffer: sab, id: 'Worker 2' });

// 每隔一段时间检查计数器的值
setInterval(() => {
    const currentCount = Atomics.load(int32Array, 0);
    console.log(`主线程：当前计数器值: ${currentCount}`);
}, 1000);

Web Worker (worker.js):

self.onmessage = function(event) {
    const { buffer, id } = event.data;
    const int32Array = new Int32Array(buffer);

    // 让每个 Worker 递增计数器 100000 次
    for (let i = 0; i < 100000; i++) {
        // 使用 Atomics.add 进行原子递增
        // 这会读取索引0的值，加1，然后将新值写回，整个过程是原子的
        Atomics.add(int32Array, 0, 1);
    }
    console.log(`${id} 完成递增。`);
};

在这个例子中，Atomics.add(int32Array, 0, 1)就是原子操作。它保证了即使两个Worker同时尝试递增同一个内存位置，它们的操作也不会互相干扰，最终的计数器值会是两个Worker递增次数的总和，而不会出现因为并发读写导致的数据丢失。

需要注意的几点：

• SharedArrayBuffer需要特定的HTTP头 (Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp) 才能在浏览器环境中使用，这是出于安全考虑。
• Atomics操作只能用于类型化数组视图（如Int32Array, Uint8Array等），不能直接用于普通的JavaScript数组。
• 实际项目里，你可能不会天天用到 SharedArrayBuffer。它更多是为那些计算密集型、需要真正共享内存并进行细粒度并发控制的场景设计的，比如WebAssembly模块、图像处理、游戏引擎等。对于大多数前端应用的状态管理，不可变性模式已经足够强大且易于维护。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~