目录
前面我们知道了变量有提升,函数也有提升,函数提升与变量提升比较类似,是指函数在声明之前即可被调用。 会把代码中具有名字的函数提前解析,解析到当前作用域最前面,但是,只定义,不调用。(函数表达式不存在提升的现象,函数提升出现在相同作用域当中)
- // 声明函数
- function fn() {
- console.log('声明之前即被调用...');
- }
-
-
-
- // 不存在提升现象
- fntwo();
- var fntwo = function () {
- console.log('函数表达式不存在提升现象!!!');
- }

声明函数时为形参赋值即为参数的默认值,如果参数未自定义默认值时,参数的默认值为 undefined,调用函数时没有传入对应实参时,参数的默认值被当做实参传入
- //一个设置参数默认值,一个不设置
- function sayHi(name = "小白", age) {
- document.write(`
大家好,我叫${name},我今年${age}岁了。
`); - }
- // 调用函数
- sayHi();
- sayHi('小绿');
- sayHi('小蓝', 21);
-

arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参。
作用: 的作用是动态获取函数的实参 !(在参数不固定时候使用很好)
我们直接看代码来理解,定义一个sum求和函数,来计算所有参数的和
-
- 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); // 求三个参数的和
... 是语法符号,置于最末函数形参之前,用于获取多余的实参,借助 ... 获取的剩余实参
-
- 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作为一个数组
-

我们也可以用剩余参数像动态参数arguments那样来求参数和:
- //定义求和函数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);
箭头函数是一种声明函数的简洁语法,它与普通函数并无本质的区别,差异性更多体现在语法格式上,能更好更快的帮助我们写函数。
- //定义一个普通函数,下面再用箭头函数的发方式写,观察两者不同
- let fn = function () {
- console.log('箭头函数');
- }
- fn();
-
-
- //下面是箭头函数,少了function,在()和{}之间加上了箭头=>
-
- let foo = () => {
- console.log('箭头函数');
-
- }
- foo();
还有一种更简洁的写法,当参数只有一个,和代码一行时,甚至可以省去()和{}
- // 更简洁的语法
- let form = document.querySelector('form');
- form.addEventListener('click', ev => ev.preventDefault());
- //阻止form表单默认事件,省去了参数的()和{}
箭头函数总结:
箭头函数属于表达式函数,不存在函数提升
箭头函数只有一个参数时可以省略圆括号 ()
箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回
箭头函数中没有 arguments,只能使用 ...(剩余参数)动态获取实参
涉及到this的使用,不建议用箭头函数(容易出错)