Atomics - 快速指南

Atomics - 概述

Atomics

Atomics 是 JavaScript 中的一个对象，它提供以静态方法执行的原子操作。就像 Math 对象的方法一样，Atomics 的方法和属性也是静态的。Atomics 与 SharedArrayBuffer 对象一起使用。

Atomic 操作安装在 Atomics 模块上。与其他全局对象不同，Atomics 不是构造函数。Atomics 不能与 new 运算符一起使用，也不能作为函数调用。

原子操作

原子操作不可中断。

当共享内存时，多个线程可以读取或写入内存中现有的数据。因此，如果任何数据发生更改，就会丢失数据。原子操作确保准确写入和读取预测值(数据)。原子操作只有在当前操作完成时才会启动，因此无法更改现有数据。

示例

以下是演示如何使用 JavaScript 原子操作的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - add() 方法

Atomics

Atomics 是 JavaScript 中的一个对象，它提供要作为静态方法执行的原子操作。就像 Math 对象的方法一样，Atomics 的方法和属性也是静态的。Atomics 与 SharedArrayBuffer 对象一起使用。

Atomic 操作安装在 Atomics 模块上。与其他全局对象不同，Atomics 不是构造函数。原子操作不能与 new 运算符一起使用，也不能作为函数调用。

原子操作

原子操作不可中断。

共享内存时，多个线程可以读取或写入内存中现有的数据。因此，如果任何数据发生更改，将导致数据丢失。原子操作确保准确写入和读取预测值(数据)。除非当前操作完成，否则原子操作不会启动，因此无法更改现有数据。

示例

以下是演示 JavaScript 原子操作用法的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - add() 方法

add 方法在数组的给定位置添加提供的值。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.add(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
要添加的值。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
RangeError 如果传递的索引超出了类型数组的界限。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - and() 方法

and 方法使用数组中给定位置的提供值计算按位与。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.and(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
value 要与其进行按位与计算。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.and(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            //6 & 2 = 110 & 010 = 010 = 2
            container.innerHTML = Atomics.and(arr, 0, 2) + '<br/>'+ Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - compareExchange() 方法

compareExchange 方法比较并交换替换值(如果给定值与旧值不同)。它返回该位置的旧值。此原子操作可确保在修改后的值被写回之前不会发生其他写入。

语法

Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
expectedValue 检查相等性。
replacementValue 交换。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
RangeError 如果传递的索引超出类型数组的范围。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.compareExchange(arr, 0, 6, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.compareExchange(arr, 0, 6, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - exchange() 方法

exchange 方法在数组的给定位置交换给定值。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.exchange(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
要交换的值。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
RangeError 如果传递的索引超出了类型数组的界限。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.exchange(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.exchange(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - isLockFree() 方法

isLockFree 方法用于确定是否要对原子操作使用锁。如果给定的大小是整数 TypedArray 类型的 TypedArray.BYTES_PER_ELEMENT 属性之一，则它返回 true。 TypedArray.BYTES_PER_ELEMENT 表示类型化数组中每个元素的字节大小。

语法

Atomics.isLockFree(size)

参数

size 需要检查的字节数。

如果操作是无锁的，则返回 true，否则返回 false。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.isLockFree(1)</p>
      <p>Atomics.isLockFree(3)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            // Int8Array.BYTES_PER_ELEMENT = 1
            container.innerHTML = Atomics.isLockFree(Int8Array.BYTES_PER_ELEMENT) + '<br/>' + Atomics.isLockFree(3);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - load() 方法

load 方法返回数组中给定位置的值。

语法

Atomics.load(typedArray, index)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。

返回给定位置的值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.add(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - notify() 方法

notify 方法通知等待的代理唤醒。notify 方法只能与使用 SharedArrayBuffer 创建的 Int32Array 一起使用。如果使用非共享 ArrayBuffer 对象，则返回 0。

语法

Atomics.notify(typedArray, index, count)

参数

typedArray 是一个共享的 Int32Array。
index 是 typedarray 中要唤醒的位置。
count 是要通知的休眠代理的数量。

返回唤醒的代理数量。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 5)</p>
      <p>Atomics.notify(arr, 0, 1)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(16);
            var arr = new Int32Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;            
            container.innerHTML = Atomics.store(arr, 0, 5) + '<br>' + Atomics.notify(arr, 0, 1);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - or() 方法

or 方法使用数组中给定位置的提供值计算按位或。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.or(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
value 要与其进行按位或计算。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.or(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            //6 | 2 = 110 | 010 = 110 = 6
            container.innerHTML = Atomics.or(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - store() 方法

store 方法将值存储在数组中提供的位置并返回该值。此原子操作可确保在修改后的值被写回之前不会发生其他写入。

语法

Atomics.store(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中要存储值的位置。
要存储的值。

返回存储在给定位置的值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.store(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;           
            container.innerHTML = Atomics.store(arr, 0, 2) + '<br/>'
            + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - sub() 方法

sub 方法在数组中的给定位置减去提供的值。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.sub(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
要减去的值。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.sub(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            //6 - 2 = 4
            container.innerHTML = Atomics.sub(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - xor() 方法

xor 方法使用数组中给定位置的提供值计算按位异或。它返回该位置的旧值。此原子操作可确保在修改后的值写回之前不会发生其他写入。

语法

Atomics.xor(typedArray, index, value)

参数

typedArray 是整数类型数组。
index 是 typedarray 中的位置。
value 要与其进行按位 XOR 计算的值。

返回给定位置的旧值。

异常

TypeError 如果传递的数组不是整数类型数组。
如果传递的索引超出类型数组的范围，则会出现 RangeError。

示例

以下是实现 JavaScript Atomics 的代码 −

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Atomics Example</title>
      <style>
         .result {
            font-size: 20px;
            border: 1px solid black;
         }
      </style>
   </head>
   <body onLoad="operate();">
      <h1>JavaScript Atomics Properties</h1>
      <div class="result"></div>
      <p>Atomics.xor(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // 创建一个 SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // 用 6 初始化数组第 0 个位置的元素
            arr[0] = 6;
            //6 xor 2 = 110 xor 010 = 100 = 4
            container.innerHTML = Atomics.xor(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics 教程

Atomics 方法

原子有用资源

Atomics - 快速指南

Atomics - 概述

Atomics

原子操作

示例

输出

Atomics - add() 方法

Atomics

原子操作

示例

输出

Atomics - add() 方法

语法

参数

返回

异常

示例

输出

Atomics - and() 方法

语法

参数

返回

异常

示例

输出

Atomics - compareExchange() 方法

语法

参数

返回

异常

示例

输出

Atomics - exchange() 方法

语法

参数

返回

异常

示例

输出

Atomics - isLockFree() 方法

语法

参数

返回

示例

输出

Atomics - load() 方法

语法

参数

返回

异常

示例

输出

Atomics - notify() 方法

语法

参数

返回

异常

示例

输出

Atomics - or() 方法

语法

参数

返回

异常

示例

输出

Atomics - store() 方法

语法

参数

返回

异常

示例

输出

Atomics - sub() 方法

语法

参数

返回