return 的使用
- return的使用:
- JS函数默认返回的是undefined,如果有返回值的话,需要加return进行返回输出;
- return 也可以用来终止函数的执行,直接返回空, 即 return;
- return 返回的一定是值;
示例:
function calc(num1, num2) {
if (num1 === undefined || num2 === undefined) {
return;
}
var sum = num1 + num2;
// return的一定是值
return sum;
}
console.log(calc(10)); // undefined
console.log(calc(10, 20)); //30
匿名函数的区分
匿名函数中,变量的作用域只在函数内部
- 函数表达式: 把一个匿名函数本身作为值赋值给其他东西, 这种函数一般不是手动触发执行,而是靠其他程序驱动触发执行(如: 触发某个事件的时候,触发执行)
document.body.onclick = function (){}
setTimeout(function(){},1000); // 设置定时器,1000ms后执行匿名函数
- 自执行函数: 创建完一个匿名函数,紧接着就把当前函数加小括号执行
(function(n){... //此处,n赋值为100
})(100);
自执行函数
没有函数名,通常定义完成后,就会立即执行。写法如下:
(function(n){…})(10)
~function(n){…}(10)
-function(n){…}(10)
!function(n){…}(10)
+function(n){…}(10)
前面加的() ! + - ~ 只有一个目的,让语法符合而已。 自执行函数本身因为没有函数名,所以不进行变量提升。
(function(n){console.log(n)})(10);
!function(n){console.log(n)}(10);
+function(n){console.log(n)}(10);
-function(n){console.log(n)}(10);
~function(n){console.log(n)}(10);
输出结果均为10
箭头函数
箭头函数是为了简便函数的书写。
规则:
- 定义变量为函数名 ;
- 将function 改为=>
- 箭头后书写函数体, 如果只有一条语句,则不用加{}
注: - 如果形参只有一个,则不用加括号()
- 如果函数体中只有一条语句,则不用加{}
例:
function sum(n, m) {
return n + m;
}
// 更改成箭头函数
let sum1 = (n, m) => n + m;
console.log(sum1(12, 23));
箭头函数里没有类数组arguments, 但是有数组…arg(arg是自定义的数组名, 可以为其他的名字)
let sum = (...arg) => {
console.log(arg);
};
sum(1, 2, 3, 4);
输出:
函数实参arguments类数组
- 应用场景: 在确定有多少个形参传入或者数据类型不确定时,可以使用arguments 进行传参的获取。
- arguments 的定义如下:
例: 计算不确定个数、不确定类型的数字之和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入不定个数数字或字符进行求和运算</title>
</head>
<body>
<!-- 每个函数都有一个实参类数组arguments:
1. 不论是否有实参都存在这样一个实参类数组;
2. 在输入的参数个数、类型不定时,可以使用这个arguments(不用定义形参,因为根本不知道有几个形参) -->
<script>
function sum() {
// console.log(arguments);
let res = null;
for (let i = 0; i < arguments.length; i++) {
// 由于存在非数字字符,故先将其全部转为数字后,再判断是否非数字;
let item = Number(arguments[i]);
// 如转换后仍为非数字(AA),则跳出本次继续后面的运算
if (isNaN(item)) {
continue;
} else {
res += item;
}
}
return res;
}
console.log(sum());
console.log(sum(12));
console.log(sum(12, 23));
console.log(sum(12, 23, '45'));
console.log(sum(12, 'AA', '23')); //若不进行数字转换,则为‘12AA23’
</script>
</body>
</html>
结果分别为:
null
12
35
80
35
函数执行底层机制
- 函数是对象,故会开辟堆内存存储函数体语句(以字符串形式);
- 函数执行是另开辟一个私有内存空间执行;
- 每次函数执行都会新开辟一个私有栈内存, 所以函数执行会开辟大量的自由栈,执行完成后需要做释放内存的操作;
- 函数体外的变量和函数体内定义的变量名可以相同,二者不关联,因为一个在堆内存中定义,一个在私有栈内存中定义;
例:
function fn(n, m) {
var res = null;
res = n + m;
return res;
}
var AA = fn(10, 20);
console.log(AA);
底层运行机制: