JavaScript进阶-函数（参数，箭头函数）

目录

函数提升：

参数：

        默认值：

动态参数：

剩余参数：

箭头函数：

---

函数提升：

        前面我们知道了变量有提升，函数也有提升，函数提升与变量提升比较类似，是指函数在声明之前即可被调用。 会把代码中具有名字的函数提前解析，解析到当前作用域最前面，但是，只定义，不调用。（函数表达式不存在提升的现象，函数提升出现在相同作用域当中）

<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>

箭头函数总结：

1. 箭头函数属于表达式函数，不存在函数提升

2. 箭头函数只有一个参数时可以省略圆括号 ()

3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

4. 箭头函数中没有 arguments，只能使用 ...（剩余参数）动态获取实参

5. 涉及到this的使用，不建议用箭头函数（容易出错）