Atomics - 快速指南

Atomics - 概述

Atomics学

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

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

Atomics操作

Atomics操作是不间断的。

当内存共享时，多个线程可以读取或写入内存中已存在的数据。因此，如果任何数据发生更改，就会丢失数据Atomics操作确保准确写入和读取预测值（数据）。除非当前操作完成，否则Atomics操作不会开始，因此无法更改现有数据。

例子

以下是演示 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - add() 方法

Atomics学

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

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

Atomics操作

Atomics操作是不间断的。

当内存共享时，多个线程可以读取或写入内存中已存在的数据。因此，如果任何数据发生更改，就会丢失数据Atomics操作确保准确写入和读取预测值（数据）。除非当前操作完成，否则Atomics操作不会开始，因此无法更改现有数据。

例子

以下是演示 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - add() 方法

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

句法

Atomics.add(typedArray, index, value)

参数

  • 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - and() 方法

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

句法

Atomics.and(typedArray, index, value)

参数

  • 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.and(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            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操作可确保在写回修改的值之前不会发生其他写入。

句法

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

参数

  • 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.compareExchange(arr, 0, 6, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.compareExchange(arr, 0, 6, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - Exchange() 方法

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

句法

Atomics.exchange(typedArray, index, value)

参数

  • 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.exchange(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - isLockFree() 方法

isLockFree方法用于确定Atomics操作是否使用锁。如果给定大小是整数 TypedArray 类型的 TypedArray.BYTES_PER_ELEMENT 属性之一，则返回 true。TypedArray.BYTES_PER_ELEMENT 表示类型化数组的每个元素的大小（以字节为单位）。

句法

Atomics.isLockFree(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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            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是整数类型数组。

  • 索引是类型数组中的位置。

返回

返回给定位置的值。

例外情况

  • 如果传递的数组不是整数类型数组，则会出现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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;
            container.innerHTML = Atomics.add(arr, 0, 2) + '<br/>' + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - notify() 方法

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

句法

Atomics.notify(typedArray, index, count)

参数

  • typedArray是一个共享的 Int32Array。

  • 索引是类型数组中要唤醒的位置。

  • count是要通知的Hibernate代理的数量。

返回

返回被唤醒的代理数量。

例外情况

  • 如果传递的数组不是整数类型数组，则会出现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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(16);
            var arr = new Int32Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;            
            container.innerHTML = Atomics.store(arr, 0, 5) + '<br>' + Atomics.notify(arr, 0, 1);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - or() 方法

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

句法

Atomics.or(typedArray, index, value)

参数

  • 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.or(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            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操作可确保在写回修改的值之前不会发生其他写入。

句法

Atomics.store(typedArray, index, value)

参数

  • 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            arr[0] = 6;           
            container.innerHTML = Atomics.store(arr, 0, 2) + '<br/>'
            + Atomics.load(arr, 0);
         }
      </script>
   </body>
</html>

输出

验证结果。

Atomics - sub() 方法

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

句法

Atomics.sub(typedArray, index, value)

参数

  • 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");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            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操作可确保在写回修改的值之前不会发生其他写入。

句法

Atomics.xor(typedArray, index, value)

参数

  • 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.xor(arr, 0, 2)</p>
      <p>Atomics.load(arr, 0)</p>
      <script>
         function operate(){
            let container = document.querySelector(".result");
            // create a SharedArrayBuffer
            var buffer = new SharedArrayBuffer(25);
            var arr = new Uint8Array(buffer);
            // Initialise element at zeroth position of array with 6
            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>

输出

验证结果。