Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:“最后一行console.log输出了函树的调用”
命名函数
和匿名函数
。上面代码前面3行相当于函数的声明,最后一行
function myAdd(a,b){
return "The value is " + a+b;
}
console.log(myAdd(1, 4));
console.log
输出了函树的调用The value is 14
,传入的两个参数被当作字符串处理了。正确的做法是函数体内给a+b
加上括号,例如:
function myAdd(a, b) {
return "The value is " + (a + b);
}
console.log(myAdd(1, 4));
匿名函数顾名思义就是没有函数名字了,例如:
function (a, b) {
return "The value is " + (a + b);
}
与前面的例子相比,仅仅不再有名字了。
问题随之而来,没有函数名,用户怎样调用呢?有两种方法:
这种方式并没有简化函数的使用,因为省了一个函数名,却多了一个变量。
const myFun = function (a, b) {
return "The value is " + (a + b);
};
console.log(myFun(1, 4));
用小括号包裹整个函数体,再加上参数
(function (a, b) {
return "The value is " + (a + b);
})(1,4)
是不是感觉越来越复杂了?后面会越来越简化,等你熟悉这种方式你会爱上它的。
console.log((function (a, b) {
return "The value is " + (a + b);
})(1,4));
下面开始简化,function
这个单词太长了,将它去掉,用一个形象的=>
箭头代替,注意,可不是在原位置替换。下面是例子。
const myFun2 = (a, b) => {
return "The value is " + (a + b);
};
console.log(myFun2(1,4));
另一种形式如下,还是先用小括号包裹整个函数体,再加上参数:
console.log(
((a, b) => {
return "The value is " + (a + b);
})(1, 4)
);
当只有一个参数的时候还可以更加简化,比如编写一个加1功能的函数:
console.log(
((x)=>{return x+1;})(3)
);
这个函数只有一个参数,那么包裹参数的小括号可以省略;
如果函数体内只有一条代码,那么return
语句和花括号{}
也可以省略;最后变成:
console.log(
(x => x + 1)(3)
);
写成一行就是
console.log( (x => x + 1)(3) );
那如果一个函数不需要参数呢?比如只是输出“hello world”。当然最简单就是直接输出console.log("hello world");
按照匿名函数的写法可以写成下面这样
console.log( ($=>'hello world')() );
那个$
符号什么意思? 其实就是1个参数,你愿意写成x
,_
,arg1
都可以,反正函数体中不需要参数,用不到它,随便写1个合法变量。当然,比较好理解的话还是写成()
,表示参数为空。
console.log( ( ()=>'hello world')() );
console.log(123, typeof 123); // 123 'number'
console.log("hello world", typeof "hello world"); // hello world 'string'
console.log(true, typeof true); // true 'boolean'
console.log(undefined, typeof undefined); //undefined 'undefined'
console.log(null, typeof null); // null 'object'
let a;
console.log(typeof a); undefined
判断arr是不是一个数组不要用typeof了,用Array.isArray()。typeof用于判断原始数据类型。
const arr=[1,"abc", true, [1,2,3]];
console.log(Array.isArray(arr));
对象比数组强大的地方在于,对象中的元素可以是
const obj = {name:"zhangSan", password:"123", math:88, english:90};
console.log(obj);
console.log("平均分是:"+(obj["math"]+obj.english)/2);
函数
上面用到了模板字面量,Esc键下面的那个反引号包裹,${}中的值可以进行运算和取值。obj也可以用this替代,很直观。
const obj2 = {
name: "zhangSan",
password: "123",
math: 88,
english: 90,
total: function(){
//return obj2.name+"的总成绩是:"+(obj.math + obj.english);
return `${obj2.name}的总成绩是:${this.math+this.english}`;
},
};
console.log(obj2.total());
console.log(obj2 instanceof Object); // true
zhangSan的总成绩是:178
instanceof
map()是数组的一个高阶函数,把f(x)作用在Array的每一个元素并把结果生成一个新的Array,所以avg是一个数组,里面装的是平均分。
arrStu = [
{ name: "zhangSan", password: "123", math: 88, english: 90 },
{ name: "liSi", password: "123", math: 80, english: 78 },
{ name: "wangWu", password: "123", math: 60, english: 100 },
];
let avg = arrStu.map(item => (item.math + item.english) / 2);
console.log(avg, Array.isArray(avg)); // [89,79,80] true
let maxAvg = avg.reduce(function (x, y) {
if (x > y) {
return x;
} else {
return y;
}
});
console.log(maxAvg); // 输出最高的平均分是89。
(3)函数
let arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) { return x + y; }); // 25
函数是一种数据类型,可以像字符串,数值类型那样作为参数进行传递
console.log(typeof function(){}); // 输出function
console.log(function(){} instanceof Object); // 输出true
函数的参数除了可以传递数字,还可以传递一个函数。
const sum2num = (x, y) => x + y;
console.log(sum2num(3, 4));
函数返回值是字符串,数字等比较常见,返回值也可以是函数
function fun2(x) {
let a = x();
console.log(a);
}
const fun = ($) => 3;
fun2(fun); // <--这里的fun后面没有括号(),否则,就成fun2(3)了
函数retAfun()中的私有变量x通过返回的函数rfun不断地改变。
function retAfun() {
let x = 1;
return function () {
x = x + 1;
return x;
};
}
const rfun = retAfun();
console.log(rfun()); // 输出2
console.log(rfun()); // 输出3
console.log(rfun()); // 输出4
通过函数的name属性可以查看函数名,length属性可以查看函数个数,例如:
const aa = function fun123(x,y,z){};
console.log(aa.name); // 输出的是fun123
console.log(aa.length); // 输出的是3,表示参数的个数
函数既然是对象,那就可以给它添加属性
console.log(aa instanceof Object); // 输出true
aa.newAtt="fresh attribute";
console.log(aa.newAtt); // 输出fresh attribute