day04作業練習
作業01

運行結果：

作業02
假設有三個數a、b、c，求這三個數的平均值的函數為∶
function mean(a, b, c) {
return (a + b + c) / 3;
}
1.如果要求任意個數的數字的平均值，該如何改進這個函數呢?
請編寫改進的mean1()函數,讓該函數可以計算任意個數的數字的平均值。
提示:使用擴展運算符
2.請編寫函數mean2(),使用數組的reduce()函數改寫mean1(),讓代碼更加精簡。
3.請在第二步的基礎上編寫函數mean3(),實現只對數組中的偶數求平均值。
提示:使用回調函數和map()
1
2
3
4
5
6
7
8
9
10
// 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
運行結果:
在這里插入圖片描述

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;//正則表達式字面量,校驗用戶輸入信息的格式
1
2
3
4
5
6
7
8
9
10
11
12
13
函數表達式
// 匿名函數
const hello = function() {//函數賦值給變量
console.log(‘hello, javascript!’);
};
hello();

// 命名函數
const hello = function sayHello(){
console.log(‘hello.js6’);
};
hello();

console.log(typeof hello);// function
1
2
3
4
5
6
7
8
9
10
11
12
13
Function()構造器
const hello = new Function(“console.log(‘hello,javascript!’)”);
1
箭頭函數(ES6新增語法)
const hello = () => {
console.log(‘hello,js’);
};
1
2
3
返回值：所有函數都有返回值，函數賦值給一個變量。
顯式指定，返回值用return語句。
沒有顯式指定，返回undefined。
// 如果沒有return,或者return后面為空，函數的返回值就為undefined。
let sayHello = function() {
return;
};
console.log(sayHello());//undefined

let sayHello2 = function() {
let a = 1;
return a;
};
console.log(sayHello2());
1
2
3
4
5
6
7
8
9
10
11
參數
形式參數(形參，parameter):函數定義時提供的參數。
實際參數(實參，argument):函數調用時提供的參數。
// 如果調用的時候不提供實際參數，那么形參就會被賦值為undefined
let add = function(a,b) {
return a+b;
};
console.log(add());//NaN

const add = function(a,b){
return a+b;
}
console.log(add(1,2,3,4,5));
1
2
3
4
5
6
7
8
9
10
運行結果：
在這里插入圖片描述

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)//false
for (const num of arguments){
sum = num + sum;
}
return sum;
}
b = add3();
console.log(b);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
運行結果：
在這里插入圖片描述

擴展運算符:
// …數組
const add2 = function(…numbers){
let sum = 0;
console.log(typeof numbers)
console.log(numbers instanceof Array)//true
for (const num of numbers){//聲明number里的每個元素
sum = num + sum;
}
return sum;
}
a = add2(1,2,2,3,3,4,4,5);
console.log(a);
1
2
3
4
5
6
7
8
9
10
11
12
運行結果：
在這里插入圖片描述

默認參數:ES6 新增語法
默認形參應該總是出現在非默認形參之后，否則默認值就必須總是要輸入。

const myName = function(b,a = ‘li’){//定義時賦初值
return b + a;//+在字符串之間是連接作用
}
console.log(myName(‘hello’));
1
2
3
4
運行結果：
在這里插入圖片描述

箭頭函數:ES6新增語法 定義簡潔
const sayHello = () => {
return ‘hello,JavaScript’;
}
console.log(sayHello());
1
2
3
4
定義箭頭函數：
如果只有一個參數，可以不用括號。
只有沒有參數，或者有多個參數，需要用括號。
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());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
函數體：函數體也可以不用大括號，但這樣會改變函數的行為。

只能有一行代碼。
省略大括號會隱式返回這行代碼的值。
如果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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
應用:

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的值。
1
2
3
4
5
6
7
8
9
10
11
12
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)});//函數式編程
1
2
3
4
5
6
7
8
9
10
11
12
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);
1
2
3
4
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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
2
3
4
鏈式迭代器
所有迭代器函數都返回一個數組，這就意味著可以把另一個迭代器函數鏈在末尾，并將其應用到新數組上。

總結

以上是生活随笔為你收集整理的2-44钟静雯_day04的全部內容，希望文章能夠幫你解決所遇到的問題。

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