迹忆客 专注技术分享

本教程将解释 JavaScript 中的多个变量赋值，因为变量是我们编码中最重要的部分。

有时，我们必须做许多变量声明和赋值，因为它们具有相同的值。如何？让我们了解一下。

在 JavaScript 中使用 = 运算符分配多个变量

假设我们有 variable1、variable2 和 variable3，并且希望所有三个变量的值都为 1。

var variable1 = 1, variable2 = 1, variable3 = 1;
console.log(variable1,variable2,variable3); //1,1,1

var variable1 = variable2 = variable3 = 1;
console.log(variable1,variable2,variable3); //1,1,1

输出：

1, 1, 1
1, 1, 1

它们看起来是等价的，但事实并非如此。原因是变量的范围和赋值优先。

赋值运算符在 JavaScript 中是右关联的，这意味着它在解析最右边之后再解析最左边。

让我们再举一个例子来理解变量 scope 和赋值 precedence。

function test1() {
 	var variable1 = 1, variable2 = 1, varialbe3 = 1;
}

function test2() {
 	var varialbe1 = variable2 = varialbe3 = 1;
}

test1();
console.log(window.variable2); // undefined

test2();
console.log(window.variable2); // 1. Aggh!

输出：

undefined
1

关注代码并看到 variable1、variable2 和 variable3 在函数范围内并且是 test1() 的局部。

它们在 test1() 方法之外不可用，这就是返回 undefined 的原因。这里，var variable1 = 1, variable2 = 1, varialbe3 = 1; 相当于 var variable1 = 1; var 变量 2 = 1; var varialbe3 = 1;。

现在，观察 test2() 函数。由于 var 关键字，variable1 在函数范围内，但 variable2 和 variable3 是泄露的，因为它们不是用 var 关键字编写的。

它们可以在 test2() 函数之外全局访问。请记住，变量声明只是提升。

然而，precedence 是 right-associative，这意味着 var variable1 = (window.variable2 =(window.variable3 = 1));。

这意味着 variable3 将首先分配给 1，然后 variable3 的值将分配给 variable2，最后 variable2 的值将分配给 variable1。

为了避免 test2() 中的变量泄漏，我们可以将变量声明和赋值分成两行。这样，我们可以将 variable1、variable2 和 variable3 限制在 test2() 函数范围内。

function test1() {
 	var variable1 = 1, variable2 = 1, varialbe3 = 1;
}

function test2() {
 	var variable1, variable2, variable3;
 	variable1 = variable2 = variable3 = 1;
}

test1();
console.log(window.variable2); // undefined

test2();
console.log(window.variable2); // undefined

输出：

undefined
undefined

在 JavaScript 中使用带有 fill() 函数的解构赋值进行多变量赋值

function test() {
 	var [a, b, c, d] = Array(4).fill(1);
 	console.log(a,b,c,d) //1, 1, 1, 1
}
test();
console.log(window.a); // undefined

输出：

1, 1, 1, 1
undefined

解构赋值有助于为多个变量赋值相同的值，而不会将它们泄漏到函数之外。

fill() 函数使用静态值更新所有数组元素并返回修改后的数组。你可以在这里阅读更多关于 fill() 的内容。