函数参数、展开运算符、箭头函数

函数参数

如果有一个要求，要求传入不同的个数的参数，都要把和求出来

getSum(1, 2)
getSum(1, 2, 3)
getSum(1, 2, 3, 4, 5)

那么形参该怎么写呢？
getSum(???)

动态参数

arguments是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

<script>
    function getSum() {
        // arguments 动态参数 只存在于 函数里面
        // 1. 是伪数组
        // console.log(arguments)
        let sum = 0
        for(let i = 0; i < arguments.length; i++) {
            sum += arguments[i]
        }
        console.log(sum)
    }
    getSum(2, 3, 4) // 9
    getSum(2, 3, 4, 1, 3, 4, 1, 2) // 20
</script>

总结：

1. arguments是一个伪数组，只存在于函数中
2. arguments的作用是动态获取函数的参数
3. 可以通过for循环依次得到传递过来的实参

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

<script>
    function getSum(...arr) {
        console.log(arr) // 使用的时候不需要...
        let sum = 0
        for(let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        console.log(sum)
    }
    getSum(2, 3) // [2, 3]
    getSum(1, 2, 3) // [1, 2, 3]
</script>

总结：

1. ...是语法符号，置于最末函数形参之前，用于获取多余的实参
2. 借助...获取的剩余实参，是个真数组

<script>
	function config(baseURL, ...other) {
		console.log(baseURL) // http://baidu.com
		console.log(other) // ['get', 'json']
	}
	// 调用函数
	config('http://baidu.com', 'get', 'json')
</script>

展开运算符

将一个数组进行展开

<script>
	const arr1 = [1, 2, 3]
	console.log(arr1) // 1 2 3
</script>

运用场景

求最大值（最小值），合并数组等

<script>
	const arr1 = [1, 2, 3]
	// 1. 求数组最大值
	console.log(Math.max(...arr1)) // 3
	console.log(Math.min(...arr1)) // 1
	// 2. 合并数组
	const arr2 = [3, 4, 5]
	const arr = [...arr1, ...arr2] // [1, 2, 3, 3, 4, 5]
	console.log(arr)
</script>

剩余参数 or 展开运算符

1. 剩余参数（在函数内部使用）：函数参数使用，得到真数组
2. 展开运算符：数组中使用，数组展开

箭头函数

目的

引入箭头函数的目的是更简洁的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁。

使用场景

箭头函数更适用于那些本来需要匿名函数的地方

基本语法

语法1：基本写法

<script>
	// 普通函数
	const fn = function () {
	    console.log(123)
	}
	fn()
	
	// 箭头函数
	const fn1 = () => {
	    console.log(123)
	}
	fn1()
</script>

语法2：只有一个参数可以省略小括号

<script>
	// 1. 箭头函数 -- 传参
	const fn2 = (x) => {
	    console.log(x)
	}
	fn2(2)
	
	// 2. 只有一个形参的时候
	const fn3 = x => {
	    console.log(x)
	}
	fn3(1)
</script>

语法3：如果函数体只有一行代码，可以写到一行上，并且无需写return直接返回值

<scsript>
	// 3. 只有一行代码的时候
	const fn4 = x => console.log(x)
	fn4(1)
	
	// 4. 只有一行代码的时候 可以省略return
	const fn5 = x => x + x
	console.log(fn5(1)) // 2
</script>

语法4：加括号的函数体返回对象字面量表达式

<script>
	const fn6 = (uname) => ({ uname: uname })
    console.log(fn6('张三'))
</script>

总结：

1. 箭头函数属于表达式函数，因此不存在函数提升
2. 箭头函数只有一个参数时可以省略圆括号 ()
3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回
4. 加括号的函数体返回对象字面量表达式

箭头函数参数

1. 普通函数由arguments 动态参数
2. 箭头函数没有arguments 动态参数，但是有剩余参数...args

<script>
  // 1. 利用箭头函数来求和
    const getSum = (...arr) => {
        let sum = 0
        for(let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        return sum
    }
    console.log(getSum(2, 3)) // 5
    console.log(getSum(2, 3, 4)) // 9
</script>

箭头函数this指向

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，非常令人讨厌。箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

1. 普通函数 this

<script>
	console.log(this) // window
	const sayHi = function () {
		console.log(this) // 普通函数指向调用者 此处为window
	}
	btn.addEventListener('click', function() {
		console.log(this) // 当前this 指向btn
	})
	// // 对象方法里面的this
    const obj1 = {
        name: 'zhangsan',
        sayHi: function() {
            console.log(this)
        }
    }
    obj1.sayHi() // 调用者为obj1 此处指向obj1
    
</script>

2. 箭头函数 this

<script>
	// 2. 箭头函数的this  是上一层作用域的this 指向
	const fn2 = () => {
	     console.log(this) // 指向上一层作用域，此处为window
	 }
	 fn2()
	
	 // 对象方法的箭头函数 this
	 const obj2 = {
	     uname: 'pink老师',
	     sayHi: () => {
	         console.log(this) // 指向上一层作用域，此处为window
	     }
	 }
	 obj2.sayHi()
	
	 // 对象方法的函数的箭头函数 this
	 const obj3 = {
	     uname: 'pink老师',
	     sayHi: function() {
	         let i = 10
	         const count = () => {
	             console.log(this) // 指向上一层作用域（上一层为普通函数，然后有被obj3调用，所以指向了obj3）
	         }
	         count()
	     }
	 }
	 obj3.sayHi()
</script>