JavaScript 中的乘法赋值运算符（*=）是什么？

在本文中，我们将学习 JavaScript 中的乘法赋值运算符（*=）。通常，我们使用a = a * b这个表达式来更新变量的值，该值是在将其原始值与其他值相乘后返回的值，这很容易理解，但如果我们要像这样更新多个变量的值，则需要反复编写，比较耗时。因此，为了克服这个问题，JavaScript 引入了乘法赋值运算符（*=），因为它是在使用上述表达式的简写形式。

乘法赋值运算符（*=）

乘法赋值运算符是一种二元赋值运算符，这意味着它需要至少一对操作数来执行任务或将值赋值给操作数。乘法赋值运算符将左操作数的值乘以右操作数的值，并将结果赋值给左操作数以更新其值。

语法

以下语法将向您展示如何使用乘法赋值（*=）运算符来更新左操作数的值：

operand1 *= operand2
//equivalent to operand1 = operand1 * operand2

让我们借助代码示例详细了解乘法赋值运算符（*=）的使用或实现。

算法

步骤 1 - 在第一步中，我们将在 HTML 文档中添加两个数字类型的输入元素，以获取用户输入的数字。

步骤 2 - 在此步骤中，我们将添加一个带有 onclick 事件的按钮，稍后在触发该事件时将调用一个函数。

步骤 3 - 在下一步中，我们将定义一个 JavaScript 函数并将其分配给按钮的 onclick 事件，以便稍后调用它并将结果显示给用户。

示例 1

以下示例将说明如何使用乘法赋值运算符（*=）来更新左操作数的值：

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication Assignment operator (*=) in JavaScript </h2>
   <p> Enter two numbers: </p>
   <input type="number" id="inp1"> <br> <br>
   <input type="number" id="inp2"> <br> <br>
   <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p>
   <p id="result"></p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var val2 = Number(inp2.value);
         val1 *= val2; // val1 = val1 * val2;
         result.innerHTML = "<b>Result: " + val1 + " </b> ";
      }
   </script>
</body>
</html>

在上面的示例中，首先，我们使用它们的 id 获取了两个输入元素，然后使用 value 属性获取它们的值，并使用Number()方法将其转换为数字类型，在执行所有这些任务后，我们对val1变量使用了乘法赋值运算符，以使用两个输入值的乘积结果（val1 * val2）更新其值，然后将结果显示给用户。

让我们再看一个示例，其中一个输入是数字类型，另一个是字符串类型。

算法

此示例和上面示例的算法相同，您只需进行一些更改即可。您必须将其中一个输入元素的输入类型替换为文本，其余代码将保持不变，如下例所示。

示例 2

以下示例将说明当两个操作数的数据类型不同时，乘法赋值运算符的行为：

<!DOCTYPE html>
<html>
<body>
   <h2> Multiplication Assignment operator (*=) in JavaScript</h2>
   <p> Enter two numbers: </p>
   <input type="number" id="inp1"> <br> <br>
   <input type="text" id="inp2"> <br>
   <p> Click to see the result of Multiplication Assignment operator (*=) of above inputs. </p>
   <p id="result"> </p>
   <button onclick="display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var inp2 = document.getElementById("inp2");
         var val1 = Number(inp1.value);
         var num = val1; // val1 = val1 * val2;
         var val2 = Number(inp2.value);
         val1 *= val2;
         result.innerHTML += " Result: <b> " + val1 + " </b> <br> ";
      }
   </script>
</body>
</html>

在此示例中，我们对不同数据类型的变量使用了乘法赋值运算符（*=）。在这种情况下，如果字符串变量的值是数字，则乘法赋值运算符的工作方式与两个变量都是数字类型时类似。但是，如果字符串变量的值是单词或任何字符串，则它将返回NaN，因为数字和字符串的乘积是 NaN。

在本教程中，我们了解了 JavaScript 中的乘法赋值运算符是什么，以及借助两个不同的代码示例来了解此运算符在不同条件下的行为。我们采用的第一个示例显示了运算符在数字类型变量情况下的行为，而在后面的示例中，我们使用乘法赋值运算符处理不同数据类型的不同变量，从而了解到，当单词与数字相乘时，乘法赋值运算符将无法按预期工作。

更新于： 2022-11-08

451 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告