JavaScript 中的多变量赋值

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 = 运算符分配多个变量
  2. 在 JavaScript 中使用带有 fill() 函数的解构赋值进行多变量赋值
JavaScript 中的多变量赋值

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

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

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

假设我们有 variable1variable2variable3,并且希望所有三个变量的值都为 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

关注代码并看到 variable1variable2variable3 在函数范围内并且是 test1() 的局部。

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

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

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

然而,precedenceright-associative,这意味着 var variable1 = (window.variable2 =(window.variable3 = 1));

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

为了避免 test2() 中的变量泄漏,我们可以将变量声明和赋值分成两行。这样,我们可以将 variable1variable2variable3 限制在 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() 这里

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript Variable