14 - 什麼是函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14 - 什麼是函數</title>
<!--
1. 函數的概念
============
在 JS 裏面,可能會定義非常多的相同代碼或者功能相似的代碼,這些代碼可能需要大量重複使用。
雖然 for循環語句也能實現一些簡單的重複操作,但是比較具有侷限性,此時我們就可以使用 JS 中的函數。
函數: 就是封裝了一段 可被重複調用執行的代碼塊。 通過此代碼塊可以實現大量代碼的重複使用。
-->
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
var sum = 0;
for (var i = 10; i <= 50; i++) {
sum += i;
}
console.log(sum);
function getSum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100);
getSum(10, 50);
getSum(1, 1000);
</script>
</head>
<body>
</body>
</html>
15 - 函數的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 函數的使用</title>
<!--
2. 函數的使用
============
函數在使用時分爲兩步:聲明函數和調用函數。
2.1 聲明函數
-----------
```JavaScript
// 聲明函數
function 函數名() {
//函數體代碼
}
```
- function 是聲明函數的關鍵字, 必須小寫
- 由於函數一般是爲了實現某個功能才定義的, 所以通常我們將函數名命名爲動詞,比如 getSum
2.2 調用函數
-----------
```JavaScript
// 調用函數
函數名(); // 通過調用函數名來執行函數體代碼
```
- 調用的時候千萬 不要忘記添加小括號
- 口訣:函數不調用,自己不執行。
注意:聲明函數本身並不會執行代碼,只有調用函數時纔會執行函數體代碼。
知識總結
-------
- 函數的聲明:
function 函數名(參數1,參數2) {
封裝的代碼塊
}
- 函數的調用: 函數名( )
-->
<script>
function sayHi() {
console.log('hi~~');
}
sayHi();
</script>
</head>
<body>
</body>
</html>
16 - 利用函數封裝求1~100的和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16 - 利用函數封裝求1~100的和</title>
<!--
2.3 函數的封裝
-------------
- 函數的封裝是把一個或者多個功能通過函數的方式封裝起來,對外只提供一個簡單的函數接口
- 簡單理解:封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包)
案例:利用函數計算1-100之間的累加和
--------------------------------
2.4 提問
--------
1. 函數是做什麼的(作用)?
2. 聲明函數用什麼關鍵詞?
3. 如何調用函數?
4. 封裝是什麼意思?
-->
<script>
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum();
getSum();
</script>
</head>
<body>
</body>
</html>
17 - 帶參數的函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17 - 帶參數的函數</title>
<!--
3. 函數的參數
============
3.1 形參和實參
-------------
在 聲明函數時 ,可以在函數名稱後面的小括號中添加一些參數,這些參數被稱爲 形參 ,
而在 調用該函數時 ,同樣也需要傳遞相應的參數,這些參數被稱爲 實參 。
參數 說明
形參 形式上的參數 函數定義的時候 傳遞的參數 當前並不知道是什麼
實參 實際上的參數 函數調用的時候傳遞的參數 實參是傳遞給形參的
參數的作用 : 在 函數內部 某些值不能固定,我們可以通過參數在 調用函數時傳遞 不同的值進去。
在 聲明函數時 ,可以在函數名稱後面的小括號中添加一些參數,這些參數被稱爲 形參 ,
而在 調用該函數時 ,同樣也需要傳遞相應的參數,這些參數被稱爲 實參 。
```JavaScript
// 帶參數的函數聲明
function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數,用逗號分隔
// 函數體
}
// 帶參數的函數調用
函數名(實參1, 實參2, 實參3...);
```
知識總結
-------
- 參數的作用:
- 在函數封裝的代碼塊中,使用參數可以在調用函數時修改指定數據,來完成不同的操作
- 形參:
- 在函數定義時,設置用來接收函數調用時傳過來的數據
- 實參:
- 在函數調用時,用戶在小括號中傳入的數據,可被形參接收,運用到函數內部的調用中
-->
<script>
function cook(aru) {
console.log(aru);
}
cook('酸辣土豆絲');
cook('大肘子');
</script>
</head>
<body>
</body>
</html>
18 - 利用函數求任意兩個數的和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18 - 利用函數求任意兩個數的和</title>
<!--
案例:利用函數求任意兩個數的和
----------------------------
3.2 函數參數的傳遞過程
---------------------
```JavaScript
// 聲明函數
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 調用函數
getSum(1, 3); // 4
getSum(6, 5); // 11
```
1. 調用的時候實參值是傳遞給形參的
2. 形參簡單理解爲: 不用聲明的變量
3. 實參和形參的多個參數之間用逗號(,)分隔
-->
<script>
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100);
getSums(1, 10);
</script>
</head>
<body>
</body>
</html>
19 - 函數形參實參個數匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19 - 函數形參實參個數匹配</title>
<!--
3.3 函數形參和實參個數不匹配問題
------------------------------
參數個數 說明
實參個數等於形參個數 輸出正確結果
實參個數多於形參個數 只取到形參的個數
實參個數小於形參個數 多的形參定義爲undefined,結果爲NaN
```JavaScript
function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 形參和實參個數相等,輸出正確結果
sum(100, 400, 500, 700); // 實參個數多於形參,只取到形參的個數
sum(200); // 實參個數少於形參,多的形參定義爲undefined,結果爲NaN
```
注意:在JavaScript中,形參的默認值是undefined。
3.4 小結
--------
- 函數可以帶參數也可以不帶參數
- 聲明函數的時候,函數名括號裏面的是形參,形參的默認值爲 undefined
- 調用函數的時候,函數名括號裏面的是實參
- 多個參數中間用逗號分隔
- 形參的個數可以和實參個數不匹配,但是結果不可預計,我們儘量要匹配
知識總結
--------
- 如果實參的個數多餘形參,形參如何接收實參?
- 如果實參的個數多餘形參,形參將按照順序依次接收實參,剩餘的實參不被接收值
- 如果實參的個數少於形參,形參如何接收實參
- 如果實參的個數少於形參,形參將按照順序依次接收實參,多餘的形參接收不到實參,默認值爲undefined
-->
<script>
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 2);
getSum(1, 2, 3);
getSum(1);
</script>
</head>
<body>
</body>
</html>
20 - 函數的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20 - 函數的返回值</title>
<!--
4. 函數的返回值
==============
4.1 return語句
--------------
有的時候,我們會希望函數將值返回給調用者,此時通過使用 return 語句就可以實現。
return 語句的語法格式如下:
```JavaScript
// 聲明函數
function 函數名(){
...
return 需要返回的值;
}
// 調用函數
函數名(); // 此時調用函數就可以得到函數體內return 後面的值
```
- 在使用 return 語句時,函數會停止執行,並返回指定的值
- 如果函數 沒有return ,返回的值是 undefined
有的時候,我們會希望函數將值返回給調用者,此時通過使用 return 語句就可以實現。
例如,聲明瞭一個sum()函數,該函數的返回值爲666,其代碼如下:
```JavaScript
// 聲明函數
function sum(){
...
return 666;
}
// 調用函數
sum(); // 此時 sum 的值就等於666,因爲 return 語句會把自身後面的值返回給調用者
```
-->
<script>
function getResult() {
return 666;
}
getResult();
console.log(getResult());
function cook(aru) {
return aru;
}
console.log(cook('大肘子'));
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));
</script>
</head>
<body>
</body>
</html>
21 - 求兩個數的最大值(函數版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21 - 求兩個數的最大值(函數版)</title>
<!--
案例1:利用函數求任意兩個數的最大值
---------------------------------
-->
<script>
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));
console.log(getMax(11, 3));
</script>
</head>
<body>
</body>
</html>
22 - 求數組中的最大值(函數版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22 - 求數組中的最大值(函數版)</title>
<!--
案例2:利用函數求任意一個數組中的最大值
------------------------------------
求數組[5,2,99,101,67,77] 中的最大數值。
-->
<script>
function getArrMax(arr) {
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
var re1 = getArrMax([5, 2, 99, 101, 67, 77]);
var re2 = getArrMax([3, 77, 44, 99, 143]);
console.log('最大值爲 ' + re1);
console.log('最大值爲 ' + re2);
</script>
</head>
<body>
</body>
</html>
23 - 函數返回值注意事項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23 - 函數返回值注意事項</title>
<!--
4.2 return 終止函數
------------------
return 語句之後的代碼不被執行。
```JavaScript
function add(num1,num2){
//函數體
return num1 + num2; // 注意:return 後的代碼不執行
alert('我不會被執行,因爲前面有 return');
}
var resNum = add(21,6); // 調用函數,傳入兩個實參,並通過 resNum 接收函數返回值
alert(resNum); // 27
```
4.3 return的返回值
------------------
return只能返回一個值。 如果用逗號隔開多個值,以最後一個爲準。
```JavaScript
function add(num1,num2){
//函數體
return num1,num2;
}
var resNum = add(21,6); // 調用函數,傳入兩個實參,並通過 resNum 接收函數返回值
alert(resNum); // 6
```
案例:創建一個函數,實現兩個數之間的加減乘除運算,並將結果返回
---------------------------------------------------------
```JavaScript
var a = parseFloat(prompt('請輸入第一個數'));
var b = parseFloat(prompt('請輸入第二個數'));
function count(a, b) {
var arr = [a + b, a - b, a * b, a / b];
return arr;
}
var result = count(a, b);
console.log(result);
```
4.4 函數沒有return返回undefined
------------------------------
函數都是有返回值的
1. 如果有return 則返回 return 後面的值
2. 如果沒有return 則返回 undefined
4.5 break,continue,return的區別
-------------------------------
break :結束當前的循環體(如 for、while)
continue :跳出本次循環,繼續執行下次循環(如 for、while)
return :不僅可以退出循環,還能夠返回 return 語句中的值,同時還可以結束當前的函數體內的代碼
知識總結
-------
函數中如果執行了return語句,即結束當前函數,不再繼續向下執行代碼
函數中只能有一個返回值,即使寫了多個return,也只能執行第一個return語句
函數中只能返回一個具體的數據,如果返回了多個數據,則只會返回最後一個數據
函數中通過return關鍵詞指定函數返回值
函數中如果沒有指定返回值,則函數默認返回值爲undefined
-->
<script>
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));
function fn(num1, num2) {
return num1, num2;
}
console.log(fn(1, 2));
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2);
console.log(re);
function fun1() {
return 666;
}
console.log(fun1());
function fun2() {
}
console.log(fun2());
</script>
</head>
<body>
</body>
</html>
作業
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>作業</title>
<!--
1. 寫一個函數,用戶輸入任意兩個數字的任意算術運算(簡單的計算器小功能),並能彈出運算後的結果。
2. 寫一個函數,用戶輸入任意兩個數字的最大值,並能出彈運算後的結果。
3. 寫一個函數,用戶輸入任意三個不同數字的最大值,並能彈出運算後的結果。
4. 寫一個函數,用戶輸入一個數判斷是否是素數,並返彈出回值(又叫質數,只能被1和自身整數的數)
-->
<script>
function getResult(){
var sum;
var num1 = prompt('請輸入第一個數:');
var num2 = prompt('請輸入第二個數:');
var operator = prompt('請輸入你想要的運算符:')
switch (operator) {
case '+':
sum = parseInt(num1) + parseInt(num2);
break;
case '-':
sum = num1 - num2;
break;
case '*':
sum = num1 * num2;
break;
case '/':
sum = num1 / num2;
break;
default:
return alert('符號錯誤');
break;
}
document.write('計算結果是:' + num1 + operator + num2 + '=' + sum + '<br>');
}
getResult();
function getTwoMax() {
var num1 = parseInt(prompt('請輸入第一個數:'));
var num2 = parseInt(prompt('請輸入第二個數:'));
var max = num1 > num2 ? num1 : num2;
document.write('最大值:' + max + '<br>');
}
getTwoMax();
function getThreeMax() {
var a = parseInt(prompt('請輸入第一個數:'));
var b = parseInt(prompt('請輸入第二個數:'));
var c = parseInt(prompt('請輸入第三個數:'));
var arr = [a, b, c];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
document.write('最大值是:' + max + '<br>');
}
getThreeMax();
function getPrime() {
var num = Number(prompt('請輸入一個正整數,判斷此數是不是素數'));
var flag = true;
for( var i = 2 ; i < num ; i++ ){
if( num % i == 0 ){
flag = false;
break;
}
}
if( flag && (num != 1 & num != 0) ){
document.write( num + '是素數' + '<br>');
}else{
document.write( num + '不是素數' + '<br>' );
}
}
getPrime();
</script>
</head>
<body>
</body>
</html>
通過榨汁機看透函數