day04作業練習

作業01

小明和他家人在泰國旅游，到3個不同的飯店吃飯。賬單(bill)分別是124元，48元和268元。為了給服務員小費(tip)，小明創建了一個簡單 的小費計算器函數(tipCalculator)。a. 如果賬單小于50元，他會給賬單的20%作為小費。b. 如果賬單在50到200元之間，他會給賬單的15%作為小費。c. 如果賬單超過200元，他會給賬單的10%作為小費。小明想要2個數組： 1.一個數組包含所有三個小費(每個賬單一個)。2.一個數組包含所有三個最終支付的金額(賬單+小費)。 最后把這2個數組輸出到控制臺。 //方法一:聲明函數 function tipCalculator(bill) {let percentage;if(bill < 50) {percentage = 0.2;}else if(bill >= 50 && bill < 200) {percentage = 0.15;}else {percentage = 0.1;}return percentage * bill; } console.log('The tip is $'+tipCalculator(10));//測試函數const bills = [124,48,268];//賬單數組 //將賬單數組的值傳入函數得出小費 const tips = [tipCalculator(bills[0]),tipCalculator(bills[1]),tipCalculator(bills[2])]; const cost = [bills[0] + tips[0],bills[1] + tips[1],bills[2] + tips[2]];//賬單和消費相加得出最終支付的金額 console.log('The tip is '+ tips,'The cost is ' + cost);//兩個數組輸出到控制臺//方法二:箭頭函數 const tipCalculator = bills => {const tips = [];const costs = [];bills.forEach(bill => {let tip;if(bill < 50) {tip = bill * 0.2;}else if(bill >= 50 && bill < 200) {tip = bill * 0.15;}else {tip = bill * 0.1;}const cost = bill +tip;tips.push(tip);costs.push(cost);})console.log('The tip is '+ tips);console.log('The cost is ' + costs); } tipCalculator([124,48,268]);

運行結果：

作業02

假設有三個數a、b、c，求這三個數的平均值的函數為∶ function mean(a, b, c) {return (a + b + c) / 3; } 1.如果要求任意個數的數字的平均值，該如何改進這個函數呢? 請編寫改進的mean1()函數,讓該函數可以計算任意個數的數字的平均值。 提示:使用擴展運算符 2.請編寫函數mean2(),使用數組的reduce()函數改寫mean1(),讓代碼更加精簡。 3.請在第二步的基礎上編寫函數mean3(),實現只對數組中的偶數求平均值。 提示:使用回調函數和map() // 1...計算任意個數的數字的平均值 const mean1 = function(...arguments) {let sum = 0;for (var i=0;i<arguments.length;i++){sum += arguments[i];}return sum/arguments.length; } avg = mean1(5,9,5,21); console.log("The average is " + avg);// 2數組的reduce()函數 const mean2 = (...array) => array.reduce((acc,val) => acc + val,0) / array.length;//累計求和除長度 console.log("The average is " + mean2(...[5,9,10,28]));// 3使用回調函數和map()只對數組中的偶數求平均值 const oArray1 = [8,10,21,8,10]; const oArray2 = oArray1.filter((x) => x%2===0);//取余 偶數 console.log(oArray2); const mean3 = oArray2.reduce((acc,x) => acc + x)/ oArray2.length//回調 console.log("The average is " + mean3);

運行結果:

day04知識點總結 函數

目錄

• 函數的定義和調用
• 函數參數
• 箭頭函數
• 回調

函數 有助于降低代碼重復，讓代碼更容易讀懂。

定義函數：

• 函數聲明
  關鍵字 函數名 {函數體}

// 聲明函數 函數字面量 function hello() {console.log('Hello, function!');//控制臺輸出 } // 直接調用 hello(); console.log(hello);//[Function: hello] 引用函數名// 字面量 let a = "xiao", b = 'xiao1', c = `adadas`;//字符串字面量 const oArray = [];//數組字面量 const oObject = {};//對象字面量 const oReg = \abc\;//正則表達式字面量,校驗用戶輸入信息的格式

• 函數表達式

// 匿名函數 const hello = function() {//函數賦值給變量console.log('hello, javascript!'); }; hello();// 命名函數 const hello = function sayHello(){console.log('hello.js6'); }; hello();console.log(typeof hello);// function

• Function()構造器

const hello = new Function("console.log('hello,javascript!')");

• 箭頭函數(ES6新增語法)

const hello = () => {console.log('hello,js'); };

返回值：所有函數都有返回值，函數賦值給一個變量。

• 顯式指定，返回值用return語句。
• 沒有顯式指定，返回undefined。

// 如果沒有return,或者return后面為空，函數的返回值就為undefined。 let sayHello = function() {return; }; console.log(sayHello());//undefinedlet sayHello2 = function() {let a = 1;return a; }; console.log(sayHello2());

參數

• 形式參數(形參，parameter):函數定義時提供的參數。
• 實際參數(實參，argument):函數調用時提供的參數。

// 如果調用的時候不提供實際參數，那么形參就會被賦值為undefined let add = function(a,b) {return a+b; }; console.log(add());//NaNconst add = function(a,b){return a+b; } console.log(add(1,2,3,4,5));

運行結果：

Arguments:

• 函數被調用時，所有實參都會被收集到這個變量中。
• Arguments.length確定傳進來多少個實參。
• 函數是用箭頭函數定義的，函數內部是不能訪問 Arguments 的。

// arguments是對象，不是數組 const add1 = function(){if (arguments.length == 0){return 0;} else if (arguments.length == 1){return arguments[0];} else if (arguments.length == 2){return arguments[0] + arguments[1];} }; console.log(add1(9));const add3 = function(){let sum = 0;console.log(typeof arguments)console.log(arguments instanceof Array)//falsefor (const num of arguments){sum = num + sum;}return sum; } b = add3(); console.log(b);

運行結果：

擴展運算符:

// ...數組 const add2 = function(...numbers){let sum = 0;console.log(typeof numbers)console.log(numbers instanceof Array)//truefor (const num of numbers){//聲明number里的每個元素sum = num + sum;}return sum; } a = add2(1,2,2,3,3,4,4,5); console.log(a);

運行結果：

默認參數:ES6 新增語法

默認形參應該總是出現在非默認形參之后，否則默認值就必須總是要輸入。

const myName = function(b,a = 'li'){//定義時賦初值return b + a;//+在字符串之間是連接作用 } console.log(myName('hello'));

運行結果：

箭頭函數:ES6新增語法 定義簡潔

const sayHello = () => {return 'hello,JavaScript'; } console.log(sayHello());

定義箭頭函數：

• 如果只有一個參數，可以不用括號。
• 只有沒有參數，或者有多個參數，需要用括號。

const sayHello1 = () => 'hello,JavaScript';//一條語句{}return可以省略 console.log(sayHello1());const sayHello2 = a => {return 'hello' + a; }const sayHello3 = (a,b) => {return a + b; } console.log(sayHello3());//調用const sayHello4 = (a,b) => a + b; console.log(sayHello4());

函數體：函數體也可以不用大括號，但這樣會改變函數的行為。

• 只能有一行代碼。
• 省略大括號會隱式返回這行代碼的值。
• 如果return是唯一的語句，可以省略return。

箭頭函數：

• 箭頭函數不能使用arguments、super和new.target，也不能用作構造函數。此外，箭頭函數也沒有prototype屬性。

• this對象。

回調(callback)

JavaScript中的函數可以像其它數據類型一樣使用，一個函數也可以作為另一個函數的形參給出。

// 用命名函數作為回調 function dance(){//定義函數dance()console.log('我在跳舞！'); }; const dance = () => {console.log('我在跳舞！'); };function sing(song,callback){console.log('我在唱'+ song);if ((typeof callback) == 'function'){callback();} }; const sing = (song, callback) => {console.log('我在唱' + song);if ((typeof callback) == 'function') {callback();} }; sing('國歌',dance);//dance()作為實參傳入sing()函數 //我在唱國歌 我在跳舞！// 用箭頭函數作為回調 const sing = (song, callback) => {console.log('我在唱' + song);callback();//顯式調用 };sing('生日快快樂歌', () => {console.log('我在跳舞！')});//我在唱生日快快樂歌 我在跳舞！

應用:

1.數組排序 Array.sort()

const a1 = [1,3,2,10,22,8]; const a2 = a1.sort();//沒有參數，字母表排序后賦值給另一個數組 console.log(a2);//[ 1, 10, 2, 22, 3, 8 ]//定義函數 const num = (a,b) => a-b;//回調函數:用于說明這兩個值的相對順序的數字 const a3 = a1.sort(num); console.log(a3);//[ 1, 2, 3, 8, 10, 22 ] //若a小于b，在排序后的數組中a應該出現在b之前，則返回一個小于0的值。 //若a等于b，則返回0。 //若a大于b，則返回一個大于0的值。

2.數組迭代

• forEach()函數
  作用：對數組中的每個元素執行一次給定的函數。
  語法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])。

const oArray1 = [1,2,2,4]; for (let i = 0; i < oArray1.length; i++) {//數組中每個元素遍歷輸出console.log(oArray[i]); }const oArray2 = [1,2,2,4]; for (const i of oArray2) {console.log(i); }const oArray3 = [1,2,2,4]; oArray3.forEach((arr1) => {console.log(arr1)});//函數式編程

• map()函數
  作用：創建一個新數組，其結果是該數組中的每個元素是調用一次提供的函數后的返回值。
  語法：const new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])。

const oArray4 = [1,2,2,4]; const sum = (a) => a * a; const oArray5 = oArray4.map(sum);//把一個數組的元素映射到另一個數組 console.log(oArray5);

• reduce()函數:統計
  作用：對數組中的每個元素執行一個提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
  語法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])。

const oArray1 = [1,2,3,4,5].reduce((acc,val) => acc + val);//累加求和 console.log(oArray1);const oArray1 = [1,2,3,4,5] //回調函數 const oArray2 = oArray1.reduce((acc,curVal) => acc + curVal ) console.log(oArray2);const oArray3 = [1,2,3,4,5].reduce((acc,val) => acc + val, 10);//初始值 console.log(oArray3);//統計字符 const sentence = 'The quick brown fox jumped over the lazy dog'; const words = sentence.split(" "); console.log(words); const total = words.reduce((acc, word) => acc + word.length, 0); console.log(total);

• filter()函數:過濾
  作用：創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
  語法： var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])。

const a1 = [1,2,3,12,8]; const a2 = a1.filter((x) => x%2===0);//取余 偶數 回調 console.log(a2); console.log([1,2,3].map( x => x*x ).reduce((acc,x) => acc + x ));//鏈式迭代器

鏈式迭代器

所有迭代器函數都返回一個數組，這就意味著可以把另一個迭代器函數鏈在末尾，并將其應用到新數組上。

總結

以上是生活随笔為你收集整理的1_01李婉玲_函数_1019的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。