解决 ES12 中遇到的调用顺序与结果不一致的问题-JavaScript中文网-JavaScript教程资源分享门户

在 ES12（ECMAScript2021）中，新增了一些语言特性，其中一个值得关注的特性是 Order of Evaluation。在以前的 ECMAScript 版本中，调用函数参数的顺序通常是从左到右进行的，但是在新版 ECMAScript 中，这种顺序可能会发生变化，这就可能导致问题的发生。在这篇文章中，我们将探讨这个问题，并提供一些解决方案。

问题的本质

在旧版 ECMAScript 中，参数在调用函数之前就已经被计算好了。例如：

function add(num1, num2) {
  return num1 + num2;
}

var result = add(2 * 4, 3);

这个例子中，2*4 和 3 会在调用 add 函数之前被计算好，然后传递给函数。

然而，在新版 ECMAScript 中，这个顺序可能会有所不同。例如，考虑下面的代码：

function add(num1, num2 = num1) {
  return num1 + num2;
}

var result = add(2);

在这个例子中，我们给 add 函数传递了一个参数 2。但是，我们在定义函数时给 num2 设置了一个默认值，这个默认值是 num1。所以我们期望 add(2) 返回 4，因为 num1 是 2，num2 是 num1，所以 num2 也是 2，然后 2+2=4。

然而，在新版 ECMAScript 中，num2 的值是在调用函数时才被计算的。因此，num2 的值此时是 undefined，然后 num1+undefined=NaN。导致代码结果与我们的预期不一致。

上述例子让我们了解了 Order of Evaluation 问题的本质，以及新版 ECMAScript 中可能会出现的问题。

解决方案

现在，让我们看一下如何解决这个问题。我们可以采取以下几种方法：

显式地传递参数

最简单的解决方案是显式地传递参数。例如，我们可以改写 add 函数，把默认值改成一个不可能出现的值：

function add(num1, num2 = null) {
  if (num2 === null) {
    num2 = num1;
  }
  return num1 + num2;
}

var result = add(2);

在这个例子中，如果 add 函数只传递了一个参数，那么 num2 就会被设置为 null。然后，我们可以在函数体内检查 num2 是否为空，如果为空则将其设置为 num1 的值。

使用逗号表达式

另一种解决方案是使用逗号表达式。逗号表达式是一个可以同时执行多个表达式的表达式。它的语法如下：

expression1, expression2, ..., expressionN

这个表达式会按顺序执行每个子表达式，最后返回最后一个子表达式的值。

因此，我们可以使用逗号表达式来确保参数的顺序：

function add(num1, num2 = (temp = num1, temp)) {
  return num1 + num2;
}

var result = add(2);

在这个例子中，我们将 num2 的默认值设置为 (temp = num1, temp)。这个表达式的意思是：先计算 temp = num1，然后返回 temp。这样，我们就可以在一个语句中计算 num1 的值并将其设置给 temp，然后 temp 的值就被传递给 num2。

使用解构

最后，我们可以使用解构语法来确保参数的顺序。解构是一种从数组或对象中取值的语法。例如，我们可以这样写：

function add({ num1, num2 = num1 }) {
  return num1 + num2;
}

var result = add({ num1: 2 });

在这个例子中，我们将 add 函数的参数改成了一个对象，这个对象有两个属性 num1 和 num2。然后我们可以在函数体内使用解构语法从这个对象中取出这些属性，并设置默认值。

结论

在新版 ECMAScript 中，调用函数参数的顺序可能会发生变化，这可能导致我们的代码与预期不一致。为了解决这个问题，我们可以采用显式传递参数、使用逗号表达式或使用解构等方法。希望这篇文章能够帮助你理解这个问题并提供一个解决方案。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/671e1d772e7021665ef5fb19