數組
- 昨日複習
- 01 - 數組的使用
- 02 - 遍歷數組
- 03 - 數組長度
- 04 - 計算數組的和以及平均值
- 05 - 求數組中的最大值
- 06 - 數組轉換爲字符串
- 07 - 新增數組元素
- 08 - 數組存放1~10個值
- 09 - 篩選數組
- 10 - 數組去重(刪除指定數組元素)
- 11 - 翻轉數組
- 12 - 複習交換兩個變量
- 13 - 冒泡排序
- 14 - 什麼是函數
- 15 - 函數的使用
- 16 - 利用函數封裝求1~100的和
- 17 - 帶參數的函數
- 18 - 利用函數求任意兩個數的和
- 19 - 函數形參實參個數匹配
- 20 - 函數的返回值
- 21 - 求兩個數的最大值(函數版)
- 22 - 求數組中的最大值(函數版)
- 23 - 函數返回值注意事項
- 通過榨汁機看透函數
- 作業
昨日複習
- 結束當前次循環的關鍵詞是 continue
- 結束當前循環的關鍵詞是 break
- JS的循環有 for 與 while 與 do-while
01 - 數組的使用
1. 數組的概念
問：之前學習的數據類型，只能存儲一個值。如果我們想存儲班級中所有學生的姓名，那麼該如何存儲呢？
答：可以使用數組(Array)。數組可以把一組相關的數據一起存放，並提供方便的訪問(獲取)方式。
問：什麼是數組呢？
答：數組是指 一組數據的集合 ，其中的每個數據被稱作 元素 ，在數組中可以 存放任意類型的元素 。數組是一種將 一組數據存儲在單個變量名下 的優雅方式。
// 普通變量一次只能存儲一個值
var num = 10;
// 數組一次可以存儲多個值
var arr = [1,2,3,4,5];
2. 創建數組
2.1 數組的創建方式
JS 中創建數組有兩種方式：
- 利用 new 創建數組
- 利用數組字面量創建數組
2.2 利用new創建數組
var 數組名 = new Array() ；
var arr = new Array(); // 創建一個新的空數組
- 這種方式暫且瞭解，等學完對象再看
- 注意 Array () ，A 要大寫
2.3 利用數組字面量創建數組
//1. 使用數組字面量方式創建空的數組
var 數組名 = []；
//2. 使用數組字面量方式創建帶初始值的數組
var 數組名 = ['小白','小黑','大黃','瑞奇'];
- 數組的字面量是方括號[]
- 聲明數組並賦值稱爲數組的初始化
- 這種字面量方式也是我們以後 最多使用的方式
2.4 數組元素的類型
數組中可以存放 任意類型 的數據，例如字符串，數字，布爾值等。
var arrStus = ['小白',12,true,28.9];
知識總結
-
數組的作用是什麼？
數組：一組數據的集合，使用一個變量同時存儲多個數據 -
創建數組我們有哪兩種方式？ 哪一種我們最常用？
創建數組的方式：
var arr = new Array()
var arr = [ 1,2,'demo'];
- 什麼是數組元素？ 數組裏面類型有限制嗎？
數組中的數據成爲數組的元素，元素的數據類型沒有限制
3. 獲取數組元素
3.1 數組的索引
索引 (下標)： 用來訪問數組元素的序號（數組下標從 0 開始）。
var arr = [‘小白’,‘小黑’,‘大黃’,‘瑞奇’];
索引號： 0 1 2 3
數組可以通過 索引 來訪問、設置、修改對應的數組元素，我們可以通過 “數組名[索引]” 的形式來獲取數組中的元素。
這裏的 訪問 就是獲取得到的意思
// 定義數組
var arrStus = [1,2,3];
// 獲取數組中的第2個元素
alert(arrStus[1]); // 2
知識總結
-
如何把數組中的元素取出來？
數組中的每個元素都有編號，編號默認從0開始，稱爲"索引"，“下標”
從數組中取出來指定元素：利用數組的索引值取元素 -
如果獲取數組中不存在的元素時，獲取到的值是什麼？
如果通過索引值獲取數組中沒有的元素，得到的值是undefined
課堂練習：數組練習
定義一個數組，裏面存放星期一、星期二…… 直到星期日（共7天），在控制檯輸出：星期日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-數組的使用</title>
<script>
// 1.數組(Array) ：就是一組數據的集合 存儲在單個變量下的優雅方式
// 2. 利用new 創建數組
var arr = new Array(); // 創建了一個空的數組
// 3. 利用數組字面量創建數組 []
var arr = []; // 創建了一個空的數組
var arr1 = [1, 2, 'pink老師', true];
// 4. 我們數組裏面的數據一定用逗號分隔
// 5. 數組裏面的數據 比如1,2， 我們稱爲數組元素
// 6. 獲取數組元素 格式 數組名[索引號] 索引號從 0開始
console.log(arr1); // Array(4) [ 1, 2, "pink老師", true ]
console.log(arr1[2]); // pink老師
console.log(arr1[3]); // true
var arr2 = ['迪麗熱巴', '古麗扎娜', '佟麗丫丫'];
console.log(arr2[0]); // 迪麗熱巴
console.log(arr2[1]); // 古麗扎娜
console.log(arr2[2]); // 佟麗丫丫
console.log(arr2[3]); // 因爲沒有這個數組元素 所以輸出的結果是 undefined
// 定義一個數組，裏面存放星期一、星期二…… 直到星期日（共7天），在控制檯輸出：星期日
var week = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
console.log(week[6]); // 星期日
</script>
</head>
<body>
</body>
</html>
02 - 遍歷數組
4. 遍歷數組
問：數組中的每一項我們怎麼取出來？
答：可以通過 “數組名[索引號]” 的方式一項項的取出來。
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue
問：怎麼把數組裏面的元素全部取出來？
規律： 從代碼中我們可以發現，從數組中取出每一個元素時，代碼是重複的，有所不一樣的是 索引值在遞增
答案就是 循環
遍歷： 就是把數組中的每個元素從頭到尾都訪問一次（類似我們每天早上學生的點名）。
我們可以通過 for 循環索引遍歷數組中的每一項
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
知識總結
-
什麼是遍歷？
遍歷：把數據的集合中的數據逐個訪問，稱爲遍歷 -
如何遍歷數組？
遍歷數組：通過循環過程中的計數器變量，把數組中的元素從頭到尾訪問一遍，稱爲遍歷數組
遍歷數組的寫法：
for( var i = 0;i < 數組的長度; i++ ){
arr[ i ] ; // 遍歷到的數組的元素
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-遍歷數組</title>
<script>
// 遍歷數組：就是把數組的元素從頭到尾訪問一次
var arr = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
console.log(arr[i]); // red green blue
}
// 1. 因爲我們的數組索引號從0開始 ，所以 i 必須從 0開始 i < 3
// 2. 輸出的時候 arr[i] i 計數器當索引號來用
</script>
</head>
<body>
</body>
</html>
03 - 數組長度
4.1 數組的長度
使用 "數組名.length"可以訪問數組元素的數量（數組長度）。
var arrStus = [1,2,3];
alert(arrStus.length); // 3
注意：
- 此處數組的長度是
數組元素的個數，不要和數組的索引號混淆。 - 當我們數組裏面的元素個數發生了變化，這個 length 屬性跟着一起變化。
課堂案例1：遍歷數組
請將 [“關羽”,“張飛”,“馬超”,“趙雲”,“黃忠”,“劉備”,“姜維”]; 數組裏的元素依次打印到控制檯。
提問？
- 什麼是遍歷？
- 我們通過什麼來遍歷數組裏面的元素？
- for裏面的 i 是什麼？當什麼使用？ for裏面的數組元素怎麼寫？
i是計數器，當索引號使用， arr[i] 是數組元素 第i個數組元素 - 怎麼獲取數組的長度？
- 數組索引號和數組長度有什麼關係？ 索引號從0開始，數組長度是 元素個數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-數組長度</title>
<script>
// 數組長度 數組名.length
var arr = ['關羽', '張飛', '馬超', '趙雲', '黃忠', '劉備', '姜維', 'pink'];
for (var i = 0; i < 7; i++) {
console.log(arr[i]);
}
console.log(arr.length); // 8
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 1. 數組的長度是元素個數 不要跟索引號混淆
// 2. arr.length 動態監測數組元素的個數
</script>
</head>
<body>
</body>
</html>
04 - 計算數組的和以及平均值
課堂案例 2：數組求和及平均值
求數組 [2,6,1,7, 4] 裏面所有元素的和以及平均值。
案例分析
(1) 聲明一個求和變量 sum。
(2) 遍歷這個數組，把裏面每個數組元素加到 sum 裏面。
(3) 用求和變量 sum 除以數組的長度就可以得到數組的平均值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04-計算數組的和以及平均值</title>
<script>
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i]; // 我們加的是數組元素 arr[i] 不是計數器 i
}
average = sum / arr.length;
// 想要輸出多個變量，用逗號分隔即可
console.log(sum, average); // 20 4
</script>
</head>
<body>
</body>
</html>
05 - 求數組中的最大值
課堂案例3：數組最大值
求數組 [2,6,1,77,52,25,7] 中的最大值。
案例分析
- 聲明一個保存最大元素的變量 max。
- 默認最大值可以取數組中的第一個元素。
- 遍歷這個數組，把裏面每個數組元素和 max 相比較。
- 如果這個數組元素大於max 就把這個數組元素存到 max 裏面，否則繼續下一輪比較。
- 最後輸出這個 max。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05-求數組中的最大值</title>
<script>
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0]; // 用來保存最大元素,默認最大值是數組中的第一個元素
// 從0 開始循環數組裏的每個元素
for (var i = 1; i < arr.length; i++) {
// 如果數組裏當前循環的元素大於 max，則保存這個元素和下標
if (arr[i] > max) {
max = arr[i]; // 保存數值到變量 max
}
}
console.log('該數組裏面的最大值是：' + max); // 該數組裏面的最大值是：99
</script>
</head>
<body>
</body>
</html>
06 - 數組轉換爲字符串
課堂案例4：數組轉換爲字符串
要求：將數組 [‘red’, ‘green’, ‘blue’, ‘pink’] 轉換爲字符串，並且用 | 或其他符號分割
輸出： ‘red|green|blue|pink’
案例分析
1.需要一個新變量用於存放轉換完的字符串 str。
2.遍歷原來的數組，分別把裏面數據取出來，加到字符串裏面。
3.同時在後面多加一個分隔符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-數組轉換爲字符串</title>
<script>
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '*';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + sep;
}
console.log(str); // red*green*blue*pink*
</script>
</head>
<body>
</body>
</html>
07 - 新增數組元素
5. 數組中新增元素
5.1 通過修改length長度新增數組元素
- 可以通過修改 length 長度來實現數組擴容的目的
- length 屬性是可讀寫的
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr); // Array(7) [ "red", "green", "blue", "pink", <3 empty slots> ]
console.log(arr[4]); // undefined
console.log(arr[5]); // undefined
console.log(arr[6]); // undefined
其中索引號是 4，5，6 的空間沒有給值，就是聲明變量未給值，默認值就是 undefined。
5.2 通過修改數組索引新增數組元素
- 可以通過修改數組索引的方式追加數組元素
- 不能直接給數組名賦值，否則會覆蓋掉以前的數據
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);
這種方式也是我們最常用的一種方式。
知識總結
- 修改數組的length：
- 如果設置的length的值大於原來的數組長度，則會在數組最後留下空白位置
- 如果設置的length的值小於原來的數組長度，則會讓數組丟失後面的元素
- 增加數組元素：
- 通過“數組[索引值] = 數據 ”來設置數組的元素
- 如果索引值是已經存在的元素的索引值，則會把之前的元素的值覆蓋掉
- 如果索引值是尚未出現的索引值，則會增加一個元素，且如果不與數組之前的最後一個元素的索引值相連的話，
會形成空白位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07-新增數組元素</title>
<script>
// 1. 新增數組元素 修改length長度
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5; // 把我們數組的長度修改爲了 5 裏面應該有5個元素
console.log(arr); // Array(5) [ "red", "green", "blue", <2 empty slots> ]
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined
// 2. 新增數組元素 修改索引號 追加數組元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1); // Array(4) [ "red", "green", "blue", "pink" ]
arr1[4] = 'hotpink';
console.log(arr1); // [ "red", "green", "blue", "pink", "hotpink" ]
arr1[0] = 'yellow'; // 這裏是替換原來的數組元素
console.log(arr1); // Array(5) [ "yellow", "green", "blue", "pink", "hotpink" ]
arr1 = '有點意思';
console.log(arr1); // 不要直接給 數組名賦值 否則裏面的數組元素都沒有了
</script>
</head>
<body>
</body>
</html>
08 - 數組存放1~10個值
課堂案例1：數組新增元素
新建一個數組，裏面存放10個整數（ 1~10），要求使用循環追加的方式輸出： [1,2,3,4,5,6,7,8,9,10]
案例分析
核心原理：使用循環來追加數組。
- 聲明一個空數組 arr。
- 循環中的計數器 i 可以作爲數組元素存入。
- 由於數組的索引號是從0開始的， 因此計數器從 0 開始更合適，存入的數組元素要+1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-數組存放1~10個值</title>
<script>
var arr = [];
for (var i = 0; i < 100; i++) {
// arr = i; 不要直接給數組名賦值 否則以前的元素都沒了
arr[i] = i + 1;
}
console.log(arr); // Array(100) [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, … ]
</script>
</head>
<body>
</body>
</html>
09 - 篩選數組
課堂案例2：篩選數組
要求：將數組 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大於等於 10 的元素選出來，放入新數組。
案例分析
- 聲明一個新的數組用於存放新數據newArr。
- 遍歷原來的舊數組， 找出大於等於 10 的元素。
- 依次追加給新數組 newArr。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-篩選數組</title>
<script>
// 方法1
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 定義一個變量 用來計算 新數組的索引號
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 新數組索引號應該從0開始 依次遞增
newArr[j] = arr[i];
// 索引號 不斷自加
j++;
}
}
console.log(newArr); // Array(3) [ 77, 52, 25 ]
// 方法2
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 剛開始 newArr.length 就是 0
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 新數組索引號應該從0開始 依次遞增
newArr[newArr.length] = arr[i];
}
}
console.log(newArr); // Array(3) [ 77, 52, 25 ]
</script>
</head>
<body>
</body>
</html>
10 - 數組去重(刪除指定數組元素)
課堂案例1：刪除指定數組元素
要求：將數組[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉後，形成一個不包含 0 的新數組。
案例分析
- 需要一個新數組用於存放篩選之後的數據。
- 遍歷原來的數組， 把不是 0 的數據添加到新數組裏面(此時要注意採用數組名 + 索引的格式接收數據)。
- 新數組裏面的個數， 用 length 不斷累加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10-數組去重(刪除指定數組元素)</title>
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空數組的默認的長度爲 0
// 定義一個變量 i 用來計算新數組的索引號
for (var i = 0; i < arr.length; i++) {
// 找出大於 10 的數
if (arr[i] != 0) {
// 給新數組
// 每次存入一個值，newArr長度都會 +1
newArr[newArr.length] = arr[i];
}
}
console.log(newArr); // Array(7) [ 2, 6, 1, 77, 52, 25, 7 ]
</script>
</head>
<body>
</body>
</html>
11 - 翻轉數組
課堂案例2：反轉數組
要求：將數組 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的內容反過來存放。
輸出： [‘purple’, ‘pink’, ‘blue’, ‘green’, ‘red’]
案例分析
- 聲明一個新數組 newArr
- 把舊數組索引號第4個取過來（arr.length - 1)，給新數組索引號第0個元素 (newArr.length)
- 我們採取 遞減的方式 i–
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-翻轉數組</title>
<script>
var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
console.log(newArr); // Array(6) [ "hotpink", "purple", "pink", "blue", "green", "red" ]
</script>
</head>
<body>
</body>
</html>
12 - 複習交換兩個變量
課堂案例3：數組排序（冒泡排序）
我們先複習下如何把2個變量交換數據
// 利用第三個變量
var num1 = 10;
var num2 = 20;
var temp = num1;
num1 = num2;
num2 = temp;
console.log(num1, num2);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12-複習交換兩個變量</title>
<script>
// 交換兩個變量
var num1 = 'pink';
var num2 = 'yellow';
var temp;
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1, num2); // yellow pink
</script>
</head>
<body>
</body>
</html>
13 - 冒泡排序
課堂案例3：數組排序（冒泡排序）
冒泡排序：是一種算法，把一系列的數據按照一定的順序進行排列顯示(從小到大或從大到小）。
例如，我們可以將數組 [5, 4, 3, 2, 1]中的元素按照從小到大的順序排序，輸出： 1，2，3，4，5
案例分析
- 一共需要的趟數 我們用外層for循環
- 每一趟交換次數 我們用裏層for循環
- 交換2個變量就好了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13-冒泡排序</title>
<script>
// 冒泡排序
// var arr = [5, 4, 3, 2, 1];
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i < arr.length - 1; i++) { // 外層循環管趟數
for (var j = 0; j < arr.length - i - 1; j++) { // 裏面的循環管 每一趟的交換次數
// 內部交換2個變量的值 前一個和後面一個數組元素相比較
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); // Array(5) [ 5, 4, 3, 2, 1 ]
</script>
</head>
<body>
</body>
</html>
14 - 什麼是函數
1. 函數的概念
在 JS 裏面，可能會定義非常多的相同代碼或者功能相似的代碼，這些代碼可能需要大量重複使用。
雖然 for循環語句也能實現一些簡單的重複操作，但是比較具有侷限性，此時我們就可以使用 JS 中的函數 。
函數： 就是封裝了一段 可被重複調用執行的代碼塊 。通過此代碼塊可以實現大量代碼的重複使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14 - 什麼是函數</title>
<script>
// 1. 求 1~100的累加和
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
// 2. 求 10~50的累加和
var sum = 0;
for (var i = 10; i <= 50; i++) {
sum += i;
}
console.log(sum); // 1230
// 3. 函數就是封裝了一段可以被重複執行調用的代碼塊 目的： 就是讓大量代碼重複使用
function getSum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100); // 5050
getSum(10, 50); // 1230
getSum(1, 1000); // 500500
</script>
</head>
<body>
</body>
</html>
15 - 函數的使用
2. 函數的使用
函數在使用時分爲兩步：聲明函數和調用函數。
2.1 聲明函數
// 聲明函數
function 函數名() {
//函數體代碼
}
- function 是聲明函數的關鍵字， 必須小寫
- 由於函數一般是爲了實現某個功能才定義的， 所以通常我們將 函數名 命名爲 動詞 ，比如 getSum
2.2 調用函數
// 調用函數
函數名(); // 通過調用函數名來執行函數體代碼
- 調用的時候千萬 不要忘記添加小括號
- 口訣：函數不調用，自己不執行。
注意：聲明函數本身並不會執行代碼，只有調用函數時纔會執行函數體代碼。
知識總結
- 函數的聲明：
function 函數名(參數1，參數2) {
封裝的代碼塊
}
- 函數的調用： 函數名( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 函數的使用</title>
<script>
// 函數使用分爲兩步： 聲明函數 和 調用函數
// 1. 聲明函數
// function 函數名() {
// // 函數體
// }
function sayHi() {
console.log('hi~~');
}
// (1) function 聲明函數的關鍵字 全部小寫
// (2) 函數是做某件事情，函數名一般是動詞 sayHi
// (3) 函數不調用自己不執行
// 2. 調用函數
// 函數名();
sayHi(); // hi~~
// 調用函數的時候千萬不要忘記加小括號
</script>
</head>
<body>
</body>
</html>
16 - 利用函數封裝求1~100的和
2.3 函數的封裝
- 函數的封裝是把一個或者多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數接口
- 簡單理解：封裝類似於將電腦配件整合組裝到機箱中 ( 類似快遞打包）
案例：利用函數計算1-100之間的累加和
2.4 提問
- 函數是做什麼的（作用）？
- 聲明函數用什麼關鍵詞？
- 如何調用函數？
- 封裝是什麼意思？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16 - 利用函數封裝求1~100的和</title>
<script>
// 1. 聲明函數
function getSum() {
var sum = 0; // // 準備一個變量，保存數字和
for (var i = 1; i <= 100; i++) {
sum += i; // // 把每個數值 都累加 到變量中
}
console.log(sum);
}
// 2. 調用函數
getSum(); // 5050
getSum(); // 5050
</script>
</head>
<body>
</body>
</html>
17 - 帶參數的函數
3. 函數的參數
3.1 形參和實參
在 聲明函數時 ，可以在函數名稱後面的小括號中添加一些參數，這些參數被稱爲 形參 ，而在 調用該函數時 ，同樣也需要傳遞相應的參數，這些參數被稱爲 實參 。
| 參數 | 說明 |
|---|---|
| 形參 | 形式上的參數 函數定義的時候 傳遞的參數 當前並不知道是什麼 |
| 實參 | 實際上的參數 函數調用的時候傳遞的參數 實參是傳遞給形參的 |
參數的作用 : 在 函數內部 某些值不能固定，我們可以通過參數在 調用函數時傳遞 不同的值進去。
在 聲明函數時 ，可以在函數名稱後面的小括號中添加一些參數，這些參數被稱爲 形參 ，而在 調用該函數時 ，同樣也需要傳遞相應的參數，這些參數被稱爲 實參 。
// 帶參數的函數聲明
function 函數名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數，用逗號分隔
// 函數體
}
// 帶參數的函數調用
函數名(實參1, 實參2, 實參3...);
知識總結
- 參數的作用：在函數封裝的代碼塊中，使用參數可以在調用函數時修改指定數據，來完成不同的操作
- 形參：在函數定義時，設置用來接收函數調用時傳過來的數據
- 實參：在函數調用時，用戶在小括號中傳入的數據，可被形參接收，運用到函數內部的調用中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17 - 帶參數的函數</title>
<script>
// 1. 函數可以重複相同的代碼
// function cook() {
// console.log('酸辣土豆絲');
// }
// cook(); // 酸辣土豆絲
// cook(); // 酸辣土豆絲
// 2. 我們可以利用函數的參數實現函數重複不同的代碼
// function 函數名(形參1,形參2...) { // 在聲明函數的小括號裏面是 形參 （形式上的參數）
//
// }
// 函數名(實參1,實參2...); // 在函數調用的小括號裏面是實參（實際的參數）
// 3. 形參和實參的執行過程
function cook(aru) { // 形參是接受實參的 aru = '酸辣土豆絲' 形參類似於一個變量
console.log(aru);
}
cook('酸辣土豆絲'); // 酸辣土豆絲
cook('大肘子'); // 大肘子
// 4. 函數的參數可以有，也可以沒有個數不限
</script>
</head>
<body>
</body>
</html>
18 - 利用函數求任意兩個數的和
3.2 函數參數的傳遞過程
// 聲明函數
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 調用函數
getSum(1, 3); // 4
getSum(6, 5); // 11
- 調用的時候實參值是傳遞給形參的
- 形參簡單理解爲：不用聲明的變量
- 實參和形參的多個參數之間用逗號(,)分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18 - 利用函數求任意兩個數的和</title>
<script>
// 1. 利用函數求任意兩個數的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(3, 8); // 11
// 2. 利用函數求任意兩個數之間的和
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100); // 5050
getSums(1, 10); // 55
// 3. 注意點
// (1) 多個參數之間用逗號隔開
// (2) 形參可以看做是不用聲明的變量
</script>
</head>
<body>
</body>
</html>
19 - 函數形參實參個數匹配
3.3 函數形參和實參個數不匹配問題
| 參數個數 | 說明 |
|---|---|
| 實參個數等於形參個數 | 輸出正確結果 |
| 實參個數多於形參個數 | 只取到形參的個數 |
| 實參個數小於形參個數 | 多的形參定義爲undefined，結果爲NaN |
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19 - 函數形參實參個數匹配</title>
<script>
// 函數形參實參個數匹配
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 1. 如果實參的個數和形參的個數一致 則正常輸出結果
getSum(1, 2); // 3
// 2. 如果實參的個數多於形參的個數 會取到形參的個數
getSum(1, 2, 3); // 3
// 3. 如果實參的個數小於形參的個數 多於的形參定義爲undefined 最終的結果就是 NaN
// 形參可以看做是不用聲明的變量 num2 是一個變量但是沒有接受值 結果就是undefined
getSum(1); // NaN
// 建議 我們儘量讓實參的個數和形參相匹配
</script>
</head>
<body>
</body>
</html>
20 - 函數的返回值
4. 函數的返回值
4.1 return語句
有的時候，我們會希望函數將值返回給調用者，此時通過使用 return 語句就可以實現。
return 語句的語法格式如下：
// 聲明函數
function 函數名（）{
...
return 需要返回的值；
}
// 調用函數
函數名(); // 此時調用函數就可以得到函數體內return 後面的值
- 在使用 return 語句時，函數會停止執行，並返回指定的值
- 如果函數 沒有return ，返回的值是 undefined
有的時候，我們會希望函數將值返回給調用者，此時通過使用 return 語句就可以實現。
例如，聲明瞭一個sum()函數，該函數的返回值爲666，其代碼如下：
// 聲明函數
function sum（）{
...
return 666；
}
// 調用函數
sum(); // 此時 sum 的值就等於666，因爲 return 語句會把自身後面的值返回給調用者
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20 - 函數的返回值</title>
<script>
// 1.函數是做某件事或者實現某種功能
// function cook(aru) {
// console.log(aru);
// }
// cook('大肘子');
// 2. 函數的返回值格式
// function 函數名() {
// return 需要返回的結果;
// }
// 函數名();
// (1) 我們函數只是實現某種功能，最終的結果需要返回給函數的調用者函數名() 通過return 實現的
// (2) 只要函數遇到return 就把後面的結果 返回給函數的調用者 函數名() = return後面的結果
// 3. 代碼驗證
function getResult() {
return 666;
}
getResult(); // getResult() = 666
console.log(getResult()); // 666
function cook(aru) {
return aru;
}
console.log(cook('大肘子')); // 大肘子
// 4. 求任意兩個數的和
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2)); // 3
</script>
</head>
<body>
</body>
</html>
21 - 求兩個數的最大值(函數版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21 - 求兩個數的最大值(函數版)</title>
<script>
// 利用函數 求兩個數的最大值
function getMax(num1, num2) {
// if (num1 > num2) {
// return num1;
// } else {
// return num2;
// }
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3)); // 3
console.log(getMax(11, 3)); // 11
</script>
</head>
<body>
</body>
</html>
22 - 求數組中的最大值(函數版)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22 - 求數組中的最大值(函數版)</title>
<script>
// 定義一個獲取數組中最大數的函數
function getArrMax(arr) { // arr 接受一個數組 arr = [5,2,99,101,67,77]
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// getArrMax([5, 2, 99, 101, 67, 77]); // 實參是一個數組送過去
// 在我們實際開發裏面，我們經常用一個變量來接受 函數的返回結果 使用更簡單
var re1 = getArrMax([5, 2, 99, 101, 67, 77]);
var re2 = getArrMax([3, 77, 44, 99, 143]);
console.log('最大值爲 ' + re1); // 最大值爲 101
console.log('最大值爲 ' + re2); // 最大值爲 143
</script>
</head>
<body>
</body>
</html>
23 - 函數返回值注意事項
4.2 return 終止函數
return 語句之後的代碼不被執行。
function add(num1，num2){
//函數體
return num1 + num2; // 注意：return 後的代碼不執行
alert('我不會被執行，因爲前面有 return');
}
var resNum = add(21,6); // 調用函數，傳入兩個實參，並通過 resNum 接收函數返回值
alert(resNum); // 27
4.3 return的返回值
return只能返回一個值 。 如果用逗號隔開多個值，以最後一個爲準。
function add(num1，num2){
//函數體
return num1，num2;
}
var resNum = add(21,6); // 調用函數，傳入兩個實參，並通過 resNum 接收函數返回值
alert(resNum); // 6
案例：創建一個函數，實現兩個數之間的加減乘除運算，並將結果返回
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
函數都是有返回值的
- 如果有return 則返回 return 後面的值
- 如果沒有return 則返回 undefined
4.5 break,continue,return的區別
- break ：結束當前的循環體（如 for、while）
- continue ：跳出本次循環，繼續執行下次循環（如 for、while）
- return ：不僅可以退出循環，還能夠返回 return 語句中的值，同時還可以結束當前的函數體內的代碼
知識總結
- 函數中如果執行了return語句，即結束當前函數，不再繼續向下執行代碼
- 函數中只能有一個返回值，即使寫了多個return，也只能執行第一個return語句
- 函數中只能返回一個具體的數據，如果返回了多個數據，則只會返回最後一個數據
- 函數中通過return關鍵詞指定函數返回值
- 函數中如果沒有指定返回值，則函數默認返回值爲undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23 - 函數返回值注意事項</title>
<script>
// 函數返回值注意事項
// 1. return 終止函數
function getSum(num1, num2) {
return num1 + num2; // return 後面的代碼不會被執行
// alert('我是不會被執行的哦！');
}
console.log(getSum(1, 2)); // 3
// 2. return 只能返回一個值
function fn(num1, num2) {
return num1, num2; // 返回的結果是最後一個值
}
console.log(fn(1, 2)); // 2
// 3. 我們求任意兩個數的 加減乘數結果
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2); // 返回的是一個數組
console.log(re); // Array(4) [ 3, -1, 2, 0.5 ]
// 4. 我們的函數如果有return 則返回的是 return 後面的值，如果函數麼有 return 則返回undefined
function fun1() {
return 666;
}
console.log(fun1()); // 返回 666
function fun2() {
}
console.log(fun2()); // 函數返回的結果是 undefined
</script>
</head>
<body>
</body>
</html>
通過榨汁機看透函數
作業
- 寫一個函數，用戶輸入任意兩個數字的任意算術運算（簡單的計算器小功能），並能彈出運算後的結果。
- 寫一個函數，用戶輸入任意兩個數字的最大值，並能出彈運算後的結果。
- 寫一個函數，用戶輸入任意三個不同數字的最大值，並能彈出運算後的結果。
- 寫一個函數，用戶輸入一個數判斷是否是素數，並返彈出回值(又叫質數，只能被1和自身整數的數)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>作業</title>
<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(); // 不要忘了調用函數
// 2. 寫一個函數，用戶輸入任意兩個數字的最大值，並能出彈運算後的結果。
function getTwoMax() {
var num1 = parseInt(prompt('請輸入第一個數：'));
var num2 = parseInt(prompt('請輸入第二個數：'));
var max = num1 > num2 ? num1 : num2; // max一定要放num後面定義，不然就是undefined
document.write('最大值：' + max + '<br>'); // 前面不要return，不然後面的句子輸出不了
}
getTwoMax();
// 3. 寫一個函數，用戶輸入任意三個不同數字的最大值，並能彈出運算後的結果。
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();
// 4. 寫一個函數，用戶輸入一個數判斷是否是素數，並返彈出回值(又叫質數，只能被1和自身整數的數)
function getPrime() {
var num = Number(prompt('請輸入一個正整數,判斷此數是不是素數')); // 要判斷的數
var flag = true; // 假設變量 值爲true 是素數
for( var i = 2 ; i < num ; i++ ){
if( num % i == 0 ){ // 滿足這個條件 說明有因子了 不是素數
flag = false; // 不是素數
break;
}
}
// 如果假設成立
if( flag && (num != 1 & num != 0) ){ // 1和0不是素數
document.write( num + '是素數' + '<br>');
}else{
document.write( num + '不是素數' + '<br>' );
}
}
getPrime();
</script>
</head>
<body>
</body>
</html>