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