在 JavaScript 中，变量遮蔽是一个常见的问题。当在一个作用域中声明一个变量时，如果在此作用域中又声明了一个同名的变量，那么后者就会“遮蔽”（覆盖）前者。这种情况可能会导致代码出现意外的行为，因为代码中使用的变量可能不是我们预期的那个变量。
ES7 中引入了一些新的语法来解决变量遮蔽的问题。本文将介绍这些语法，并提供一些示例代码来帮助你理解和使用它们。
1. let 和 const
ES6 中引入了 let 和 const 关键字，它们可以用来声明块级作用域中的变量。这意味着，如果在一个块级作用域中使用 let 或 const 声明一个变量，那么该变量只在该作用域内有效，不会影响到外部作用域中同名的变量。
let x = 1;
{
let x = 2;
console.log(x); // 输出 2
}
console.log(x); // 输出 1在上面的示例中，内部作用域中声明的变量 x 不会影响到外部作用域中的变量 x。
const 关键字用来声明常量，它的作用和 let 类似，但是它声明的变量是不可修改的。这意味着，如果在一个块级作用域中使用 const 声明一个变量，那么该变量的值不会被修改，也不会影响到外部作用域中同名的变量。
const x = 1;
{
const x = 2;
console.log(x); // 输出 2
}
console.log(x); // 输出 1在上面的示例中，内部作用域中声明的常量 x 不会影响到外部作用域中的常量 x。
2. 解构赋值
ES6 中引入了解构赋值语法，它可以用来从数组或对象中提取值并赋给变量。在解构赋值中，如果要将一个属性的值赋给一个同名的变量，那么该变量只在当前作用域中有效，不会影响到外部作用域中同名的变量。
let { x } = { x: 1 };
{
let { x } = { x: 2 };
console.log(x); // 输出 2
}
console.log(x); // 输出 1在上面的示例中，内部作用域中解构赋值得到的变量 x 不会影响到外部作用域中的变量 x。
3. 函数参数
ES6 中引入了默认参数和剩余参数语法，它们可以用来定义函数的参数。在函数参数中，如果要给一个参数设置默认值或使用剩余参数语法，那么该参数只在当前函数作用域中有效，不会影响到外部作用域中同名的变量。
-- -------------------- ---- -------
-------- ----- - -- - - -- -
-
--- - - --
------------- - --- -- -- -
-
------------- - --- -- -- -
-
------ -- -- -
------ --- -- -- -在上面的示例中，内部作用域中给参数 x 赋值不会影响到外部作用域中的变量 x。
总结
ES7 中引入了一些新的语法来解决变量遮蔽的问题。使用 let 和 const 可以声明块级作用域中的变量和常量，使用解构赋值可以从对象或数组中提取值并赋给变量，使用函数参数可以设置默认值和使用剩余参数语法。这些语法可以帮助我们避免变量遮蔽导致的问题，让我们的代码更加健壮和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66013b3bd10417a222c65dcc