如何规避 ECMAScript 2021 赋初值坑？
在 ECMAScript 2021 中，新增了对赋初值语法的支持，该语法允许我们在函数内部为函数参数指定默认值，从而让代码更加清晰和简化。
然而，这个新的语法也需要我们注意，因为如果使用不当，会导致出现一些不可预期的结果。
本文将带你深入了解 ECMAScript 2021 赋初值坑，让你在使用时能够更加稳妥地规避这些问题。
问题 1：初值第一次计算
新的赋初值语法规定，当函数参数没有传递值时，才会给其赋初值，但是初值计算只会在第一次调用函数时执行。这就意味着如果初值计算涉及到动态内容，则可能会因运行时上下文而产生不同的结果。
下面是一个示例代码：
function calculate(num = Math.random()) {
return num * 10
}
console.log(calculate()) // 第一次计算
console.log(calculate()) // 第二次计算输出结果如下：
7.343521882902537 // 第一次计算结果 9.996585425497185 // 第二次计算结果
从上面的输出结果可以看出，由于初值计算在第一次调用时才执行，而 Math.random() 是动态内容，所以第一次调用 calculate() 函数时，它的初值与第二次可能是不一样的。
解决方式：
可以将初值指定为 null，然后在函数体内部进行初值计算，以确保初值计算在每次调用函数时都会执行。
以下是修改后的示例代码：
-- -------------------- ---- -------
-------- ------------- - ----- -
-- ---- --- ----- -
--- - -------------
-
------ --- - --
-
------------------------ -- -----
------------------------ -- -----输出结果如下：
4.010870566266641 // 第一次计算结果 2.222564380060816 // 第二次计算结果
通过将初值指定为 null，并在函数内部进行判断来规避预期之外的初值问题。
问题 2：初值影响与作用域
在 ECMAScript 2021 中，赋初值语法并没有声明一个新的函数作用域，而是与函数作用域进行交互。当使用赋初值语法时，在函数内部创建一个新的变量，该变量仅在函数内部可见，并且在调用函数时重新赋值。
下面是一个示例代码：
let num = 1
function setNum(num = 2) {
console.log(num)
}
setNum() // 输出 2
console.log(num) // 输出 1从上面的示例代码可以看出，函数 setNum() 中的 num 在函数内部重新赋值了，而外部的 num 变量没有随之改变。
解决方式：
可以使用立即执行函数，在函数内部创建一个新的作用域，使赋初值语法仅在函数内部有效，并不会影响外部作用域变量。
以下是修改后的示例代码：
let num = 1
function setNum(num = (() => 2)()) {
console.log(num)
}
setNum() // 输出 2
console.log(num) // 输出 1通过使用立即执行函数来规避赋初值语法中的外部作用域变量的影响。
结论：
在 ECMAScript 2021 中，赋初值语法是一个非常有用的语法糖，但是它也需要我们注意。通过本文中的解决方案，我们可以更加稳妥地使用赋初值语法，并避免其中的坑点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0a8c66fbf96019733a6b9