資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究JavaScript 的 `return` 語句是如何工作的？
在本文中，我們將學習如何在 JavaScript 中使用 `return` 語句。`return` 語句用於將函式中的特定值返回給函式呼叫者。每當執行 `return` 語句時，函式將停止執行。`return` 語句之後的程式碼將不會執行，因此它通常是函式中的最後一條語句。
使用 **`return`** 語句，我們可以返回物件型別， *包括函式*、*物件*、*陣列*，以及諸如 *布林值、整數和字串* 等原始值。
透過使用 `return` 語句，我們也可以返回多個值。直接返回多個值不可行。要從函式返回多個值，我們必須使用陣列或物件。
讓我們討論在 JavaScript 中使用 `return` 語句的不同方法。
- 帶有值的 `return` 語句。
- 不帶值的 `return` 語句。
- 帶有多個值的 `return` 語句。
- 帶有物件的 `return` 語句。
帶有值的 `return` 語句
在本節中，我們將討論帶有返回值的 `return` 語句是如何工作的。
語法
以下是使用帶有值的 `return` 語句的語法：
return (value);
示例
在這個例子中，我們看到一個變數正在接收名為 `n()` 的函式的值。在函式內部，我們看到兩個變數是值的乘積。`return` 語句將值傳遞給變數 `s`。然後，這個乘積將顯示在使用者的螢幕上。
<html>
<head>
<title> Return statement with value in JavaScript </title>
</head>
<body>
<h2> The return statement with a value </h2>
<script>
var s = n(5, 6);
function n(m, p) {
return m * p;
}
document.write(`This function returns ${s} as a product of 5 and 6.`);;
</script>
</body>
</html>在上面的輸出中，使用者可以看到該函式返回了從函式 `n` 傳遞給變數 `s` 的乘積值。
不帶值的 `return` 語句
雖然不帶值的 `return` 語句僅用於結束程式，但仍然可以使用它。如果沒有顯式的 `return` 語句（意味著函式中缺少 `return` 關鍵字），則函式會自動返回 `undefined`。
語法
return();
示例
在這個例子中，我們看到一個變數正在接收名為 **`n()`** 的函式的值。在函式內部，我們看到兩個變數是值的乘積。`return` 語句將值傳遞給變數 `s`。然後，這個乘積將列印在使用者的螢幕上。
<html>
<head>
<title> Return statement with value in JavaScript </title>
</head>
<body>
<h2> return statement with no value.</h2>
<script>
var v = func();
function func() {
var a = 1;
while (a) {
document.write(`${a} `);
if (a == 5) {
return;
}
a++;
}
}
</script>
</body>
</html>此示例的輸出顯示了 `while` 迴圈如何每次都執行，直到 `a` 的值變為 5，然後進入 `if` 語句，使用 `return` 語句終止迴圈。
帶有多個值的 `return` 語句
使用陣列，我們可以使用 `return` 語句返回多個值。JavaScript 函式只能返回單個值。您可以將函式的返回結果打包為陣列的元素或物件的屬性，以返回多個值。
JavaScript 函式本身並不支援返回多個值。多個值需要先封裝到 **陣列** 或 **物件** 中，然後再返回。
**注意** - 要從陣列中提取值或從物件中提取屬性，可以使用解構賦值方法。
使用陣列
在這種方法中，我們將看到 `return` 語句如何使用陣列包含多個值。
語法
return [name, age];
示例
在這個例子中，我們看到一個教程，展示瞭如何使用 `return` 語句在陣列中傳遞多個值。我們取四個變數，即 **`book`**、`refID`、`issue_date` 和 `due_date`。這四個變數分別包含一個特定值。在函式外部，我們取 `const` 陣列並用 `info()` 函式呼叫來初始化它。這反過來會列印這些值。
<html>
<body>
<h2>The return statement with multiple values using array.</h2>
<script>
function info() {
let book = 'Chronicles of Narnia',
refID = 'ISBN00127645',
issue_date = '01.06.21',
due_date = '08.07.21';
return [book, refID, issue_date, due_date];
}
const [book, refID, issue_date, due_date] = info();
document.write(`Book = ${book}<br>
Reference ID = ${refID}<br>
Issue date = ${issue_date}<br>
Due date = ${due_date}`);
</script>
</body>
</html>此輸出顯示了書籍名稱、參考 ID、發行日期和到期日期。返回值以陣列的形式返回這些值。
使用物件
在本教程中，我們將學習如何使用物件返回多個值。
語法
return {android,brand};示例
在這裡，建立了三個變數（`android`、`brand` 和 `price`)，並在 `fun()` 方法內部賦予它們值。然後，我們以鍵值對的形式返回一個包含 `android`、`brand` 和 `price` 的物件。我們在函式外部使用 `fun()` 方法來初始化該物件。最後，我們列印每一個變數。
<html>
<body>
<h2> The return statement with multiple values using object.</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function fun() {
let android = 'OnePlus 10R 5G',
brand = 'One Plus',
price = '$511.09';
return {
android,
brand,
price
};
}
let {
android,
brand,
price
} = fun();
document.write(`Android = ${android}<br>
Company = ${brand}<br>
Price = ${price}`
);
</script>
</body>
</html>此輸出顯示了 Android 的名稱、品牌和價格。當值以物件的形式時，它會返回它們。
結論
在本教程中，我們使用了四種方法來展示在 JavaScript 中使用 `return` 語句。第一種方法展示了當 `return` 語句包含引數時如何使用簡單的 `return` 語句。第二種方法展示了不帶引數的 `return` 語句如何工作。第三種方法展示瞭如何使用陣列和物件將多個值傳遞給 `return` 語句。
1000+ 次瀏覽
