目录
函数提升:
前面我们知道了变量有提升,函数也有提升,函数提升与变量提升比较类似,是指函数在声明之前即可被调用。 会把代码中具有名字的函数提前解析,解析到当前作用域最前面,但是,只定义,不调用。(函数表达式不存在提升的现象,函数提升出现在相同作用域当中)
<script>
// 声明函数
function fn() {
console.log('声明之前即被调用...');
}
// 不存在提升现象
fntwo();
var fntwo = function () {
console.log('函数表达式不存在提升现象!!!');
}
</script>
参数:
默认值:
声明函数时为形参赋值即为参数的默认值,如果参数未自定义默认值时,参数的默认值为 undefined
,调用函数时没有传入对应实参时,参数的默认值被当做实参传入
<script>
//一个设置参数默认值,一个不设置
function sayHi(name = "小白", age) {
document.write(`<p>大家好,我叫${name},我今年${age}岁了。</p>`);
}
// 调用函数
sayHi();
sayHi('小绿');
sayHi('小蓝', 21);
</script>
动态参数:
arguments
是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参。
作用: 的作用是动态获取函数的实参 !(在参数不固定时候使用很好)
我们直接看代码来理解,定义一个sum求和函数,来计算所有参数的和
<script>
function sum() {
let n = 0;
//此处的argumens.length的长度,就是我们动态输入参数个数的位数
for(let i = 0; i < arguments.length; i++) {
n += arguments[i];
}
console.log(s);
}
//调用函数
sum(5, 10); // 求两个参数的和
sum(1, 2, 4); // 求三个参数的和
</script>
剩余参数:
...
是语法符号,置于最末函数形参之前,用于获取多余的实参,借助 ...
获取的剩余实参
<script>
function fun(a, b, ...c) {
console.log(a, b, c);
}
fun(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c');
//由控制台输出结果可看,打印输出a,b,c分别对应的值为1,2,剩下的参数都赋给c作为一个数组
</script>
我们也可以用剩余参数像动态参数arguments那样来求参数和:
<script>
//定义求和函数getsum,用...a来接收动态输入的参数
//a.length就是动态输入参数的个数
function getSum (...a) {
let sum = 0;
for (let i = 0; i < a.length; i++) {
sum = sum + a[i]
}
console.log(sum);
}
getSum(1, 2, 3, 4, 5, 6);
</script>
箭头函数:
箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上,能更好更快的帮助我们写函数。
<script>
//定义一个普通函数,下面再用箭头函数的发方式写,观察两者不同
let fn = function () {
console.log('箭头函数');
}
fn();
//下面是箭头函数,少了function,在()和{}之间加上了箭头=>
let foo = () => {
console.log('箭头函数');
}
foo();
</script>
还有一种更简洁的写法,当参数只有一个,和代码一行时,甚至可以省去()和{}
<script>
// 更简洁的语法
let form = document.querySelector('form');
form.addEventListener('click', ev => ev.preventDefault());
//阻止form表单默认事件,省去了参数的()和{}
</script>
箭头函数总结:
-
箭头函数属于表达式函数,不存在函数提升
-
箭头函数只有一个参数时可以省略圆括号
()
-
箭头函数函数体只有一行代码时可以省略花括号
{}
,并自动做为返回值被返回 -
箭头函数中没有
arguments
,只能使用...
(剩余参数)动态获取实参 -
涉及到this的使用,不建议用箭头函数(容易出错)