JavaScript 中的多變數賦值
本教程將解釋 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()
這裡。