[快速入门前端 54] JavaScript：Function 函式 (2) 参数和回传

参数

在上一篇文章中我们有提到在定义函式时，小括号 () 中放的资料是参数 (parameters)，在 JavsScript 中，() 中的参数就像是 Function 的「接口」，可以接收值并在函式内做使用。
举个简单的例子，当我们需要重複计算两变数相加时，可以将 a + b 写在 Function 中，并利用多次呼叫的方式减少程式重複。

function add() {    let a = 10;    let b = 20;    console.log(a + b); // 印出 a + b};add();

那么问题来了，当我们每次需要运算不同值时会需要将「要运算的值」传到 function 中，再执行区块中的程式进行运算，而这时候就会用到「参数」的概念。
在 Function 中传递值的方法为：

在 Function 的括号中加入参数 (接收参数的地方)，让 Function 内的程式可以直接使用设定的变数呼叫时同样在括号中传入值，若有多个值则以逗号分格就算 Function 中有接参数，呼叫时也可以不传值，此时参数值为 undefined

範例：
呼叫程式计算两数相加

function add(a, b) { // a, b 分别为传入的第一个和第二个参数    console.log(a + "+" + b + "=" + (a + b)); // 印出 a + b};add(1, 2); // 传入值 1, 2add(3, 5);add(2, 7);

function 会依照传入的顺序接收参数的括号内定义的变数中，没有接到参数的变数值为 undefined

function add(a, b) { // a, b 分别为传入的第一个和第二个参数，所以 a 为 1， b 没接到参数，为 undefined    console.log(a); // 1    console.log(b); // undefined};add(1); // 只传一个值

参数类型

Funtion 可以传入任何类型的参数，当 Function 内用到的变数非常多时，例如我们需要用到会员的身份资料，可能包含姓名、地址、年龄等多个变数，这时后可以先将这些资料组合为一个 Object 或 Array 传入 Function 内再进行使用。

範例：

let object = { // 宣告一个物件    name: "amy",    age: 20,    gender: "female"};function add(user) {    console.log(user); // user 是传入的整个物件 {name: 'amy', age: 20, gender: 'female'}    console.log("我是" + user.name); // 利用物件的取值方法 user.name 取得姓名    console.log("今年" + user.age + "岁"); };add(object); // 将物件传到 function 中

return 回传

上面我们已经学会如何将 Function 外的值传入 Function 内做使用，也就是使用 参数 的概念，那我们如何将 Function 内的值传回呼叫的地方呢？
答案是 return。
return (回传) 的写法为 return 表达式;，当执行到 return 时会结束 Function，并将表达式的值回传给呼叫函式的地方。

範例：

// 定义函式function add (x, y) {    console.log('function 开始'); // 会执行    return x+y; // 1. 结束 function 2. 回传 x+y 的结果给 add()    console.log('会执行吗'); // return 后面的程式不会被执行};// 呼叫函式let total = add(2, 3); // add(2, 3) 的回传值为 5，将 5 赋值给 total 这个变数console.log(total); // 5

当 Function 内没有 return，或者 return 后没有值时，回传值为 undefined。

function add () {    let total = 3    return; // 有 return 但没有回传值};let a = add();console.log(a); // undefined

return、break、continue

在 JavaScript 中，return、break 即 continue 都会对程式的原本执行顺序造成影响，下面就让我们来看看他们之间的差异吧！

语句意义作用于break停止并跳出 switch 或指定迴圈 (若不指定则停止最靠近的)switch 或迴圈continue跳出这一次迴圈直接执行下一次迴圈return结束 function 并将回传值回传给呼叫函式的地方function

範例：
下面我们用相同的 function + 迴圈 结构来观察三种语法对执行的影响。

break

function sample () {    for (let i = 0; i < 4; i++) {        if (i == 2) {            break;        }        console.log(i);    };    console.log('执行完毕');};sample();

continue

function sample () {    for (let i = 0; i < 4; i++) {        if (i == 2) {            continue;        }        console.log(i);    };    console.log('执行完毕');};sample();

return

function sample () {    for (let i = 0; i < 4; i++) {        if (i == 2) {            return;        }        console.log(i);    };    console.log('执行完毕');};sample();

---

上一篇：[快速入门前端 53] JavaScript：Function 函式 (1) 函式的种类
下一篇：[快速入门前端 55] JavaScript：Global Scope 全域和 Local Scope 区域
系列文章列表：[快速入门前端] 系列文章索引列表