javascript怎么实现数组原子操作

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

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

我们主要通过两种策略来达成这种“原子性”的：一是不可变数据结构，通过创建新的数组来反映状态变化，而不是直接修改旧数组，这在逻辑上确保了每次更新的“瞬间完成”；二是利用JavaScript提供的

SharedArrayBuffer

Atomics

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

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

立即学习“Java免费学习笔记（深入）”；

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

然而，一旦引入了异步操作（比如

fetch

setTimeout

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

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

这种模式的精髓在于：当你需要修改一个数组时，你不是直接调用像

push()

pop()

splice()

我们来看几个例子：

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

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

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

2

查看详情

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

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

SharedArrayBuffer

登录后复制

和

Atomics

登录后复制

API 在多线程场景下的应用

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

SharedArrayBuffer

Atomics

SharedArrayBuffer

ArrayBuffer

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)

需要注意的几点：

• SharedArrayBuffer

  登录后复制
  需要特定的HTTP头 (

  Cross-Origin-Opener-Policy: same-origin

  登录后复制
  和

  Cross-Origin-Embedder-Policy: require-corp

  登录后复制
  ) 才能在浏览器环境中使用，这是出于安全考虑。

• Atomics

  登录后复制
  操作只能用于类型化数组视图（如

  Int32Array

  登录后复制
  ,

  Uint8Array

  登录后复制
  等），不能直接用于普通的JavaScript数组。
• 实际项目里，你可能不会天天用到

  SharedArrayBuffer

  登录后复制
  。它更多是为那些计算密集型、需要真正共享内存并进行细粒度并发控制的场景设计的，比如WebAssembly模块、图像处理、游戏引擎等。对于大多数前端应用的状态管理，不可变性模式已经足够强大且易于维护。

以上就是javascript怎么实现数组原子操作的详细内容，更多请关注php中文网其它相关文章！