函数进阶
函数进阶
函数提升
函数提升与变量提升比较类似,是指函数在声明之前即可被调用。
总结:
-
函数提升能够使函数的声明调用更灵活
-
函数表达式不存在提升的现象
-
函数提升出现在相同作用域当中
// 函数提升 fn() function fn () { console.log(123) } // 函数表达式不能提升,需要先声明,再使用 // // const f = function () { // console.log(222) // } // f() // 函数优于变量 // 变量与函数同名时,函数优于变量 /* a:函数 a:变量 */ console.log(a) /* 控制台打印 ƒ a () { console.log('a') } */ function a () { console.log('a') } var a = 1 console.log(a)//1
函数参数
动态参数
arguments 是函数内部内置的伪数组变量,它包含/接收了调用函数时传入的所有实参
使用场景:
如果参数个数不确定,无法设置形参个数
此时不用写形参,可在函数中使用动态参数arguments
总结:
- arguments 是一个伪数组,只存在于函数中
- arguments 的作用是动态获取函数调用时传入的所有实参
- 可以通过for循环依次得到传递过来的实参
function fn () { let sum = 0 for (let i = 0; i < arguments.length - 1; i++) { sum += arguments[i] console.log(arguments[i]) } console.log('总和为:' + sum) } fn(1,3,5,8,10)
剩余参数
剩余参数
允许我们将一个不定数量的参数表示为一个数组
... 是语法符号,置于函数最后一个形参之前,用于获取多余的实参
借助 ... 获取的剩余实参,是个真数组
function fn (a, b , ...c) { console.log(a, b, c)//1 3 [5,8,10] } fn(1,3,5,8,10) function getSum (...arr) { let sum = 0 for (let i = 0; i < arr.length ; i++) { sum += arr[i] } console.log(sum)//27 } getSum(1,3,5,8,10)
展开运算符
const arr = [1, 3, 5, 8, 10] console.log(...arr) // 求最大值 console.log(Math.max(...arr)) // 合并数组 const arr1 = [1, 3, 5, 8, 10] const arr2 = ['a', 'b', 'c'] const arr3 = [11, 31, 51, 81, 100] const array = [...arr1, ...arr2, ...arr3] console.log(array)
注意:
剩余参数:用在函数最后一位形参前加...,在函数内部使用,作用:接收剩余实参,是个真数组
展开运算符:使用数组时,在数组前添加,作用:展开数组,使用场景有:
求数组最大/小值
合并数组
注:...不会修改原数组
箭头函数
基本语法
简单地说:箭头函数是函数语法简写
目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁
使用场景:箭头函数更适用于那些本来需要匿名函数的地方或者说回调函数
语法1:基本写法
/* //普通函数 const fn = function () { console.log(123) } */ // 箭头函数 const fn = () => { console.log(123) }
语法2:只有一个参数可以省略小括号
/* //普通函数 const fn2 = function (x) { return x } */ // 箭头函数 const fn2 = x => { return x * x } console.log(fn2(2))
语法3:如果函数体只有一行代码,可以写到一行上,并且无需写 return 直接返回值
/* //普通函数 const fn3 = function (x, y) { return x + y } */ // 箭头函数 const fn3 = (x, y) => x + y console.log(fn3(1, 2))
语法4:加括号的函数体返回对象字面量表达式
/* //普通函数 const fn4 = function (uname) { return {uname:uname} } */ // 箭头函数 const fn4 = uname => ({uname: uname}) console.log(fn4('小明'))
总结:
-
箭头函数属于表达式函数,因此不存在函数提升
-
箭头函数只有一个参数时可以省略圆括号 (),其他情况不可省略
-
箭头函数函数体只有一行代码时可以省略花括号 {},并自动做为返回值被返回
-
加小括号的函数体返回对象字面量表达式
箭头函数参数
-
普通函数有arguments 动态参数
-
箭头函数没有 arguments 动态参数,但是有 剩余参数 ..args
const getSum = (...other) => { let sum = 0 for (let i = 0; i < other.length; i++) { sum += other[i] } console.log(sum) } getSum(1, 4, 6)
箭头函数this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
- 普通函数中,this是指调用者
- 箭头函数中,this是沿用自己的作用域链的上一层的this
在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此
DOM事件回调函数为了简便,还是不太推荐使用箭头函数
<input type="button" value="点击">
//普通函数 const btn = document.querySelector('input') btn.addEventListener('click',function () { console.log(this)//调用者 }) let obj = { name : '小明', fei : function () { console.log(this)//调用者 } } obj.fei()
//箭头函数 btn.addEventListener('click',() => { console.log(this)//window }) //箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。 let obj = { name : '小明', fei : () => { console.log(this)//window } } obj.fei()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性