JS中的函数详解

JS中的函数详解一、函数基础概念函数是JavaScript中封装一段可重复执行代码的代码块作用是简化重复代码、实现代码复用、拆分复杂逻辑一次定义多次调用。所有函数都是对象属于引用数据类型可以赋值、传参、作为返回值。二、函数的四种创建方式1. 函数声明最常用语法function 函数名(形参){ 代码体; }特点存在函数提升声明写在调用前后都能正常执行。functionsayHi(name){console.log(你好,name)}// 调用sayHi(小明)2. 函数表达式将匿名函数赋值给变量无函数提升必须先定义再调用。constsumfunction(a,b){returnab}sum(1,2)3. 箭头函数ES6新增简化写法没有this、arguments不能作为构造函数。单个参数可省略括号单行return可省略{}和return// 完整写法constmul(a,b){returna*b}// 简写constdoublexx*24. 构造函数创建极少使用new Function(参数1,参数2,函数体)性能差几乎不推荐。constaddnewFunction(a,b,console.log(ab))add(3,4)三、函数调用与参数1. 形参、实参形参定义函数时括号内变量仅作用于函数内部实参调用函数时传入的真实数据JS参数不限制数量实参多于形参多余值无法直接接收实参少于形参未接收的形参值为undefined。2. 默认参数ES6形参直接赋值不传参时使用默认值functionlog(x0){console.log(x)}log()// 0log(9)//93. 剩余参数 …rest接收所有多余实参是数组只能放在最后一个形参functiontotal(a,b,...rest){console.log(rest)// [3,4,5]}total(1,2,3,4,5)4. arguments 类数组对象普通函数内置存储所有传入实参箭头函数无arguments特点可以通过下标取值有length属性但不能使用数组方法。functiontest(){console.log(arguments[0])console.log(arguments.length)}test(10,20)四、返回值 returnreturn终止函数执行后面代码不再运行函数默认返回undefined不写return等同于return undefined一次只能返回一个值多数据可通过数组/对象打包返回functiongetInfo(){return{name:小红,age:16}}letresgetInfo()console.log(res.name)五、作用域与闭包1. 函数作用域函数内部定义的变量为局部变量外部无法访问全局变量全页面可用。2. 闭包内层函数访问外层函数变量内层函数暴露到外部形成闭包。特点外层变量不会被销毁可保存私有数据缺点是容易内存泄漏。functionouter(){letnum10returnfunctioninner(){numconsole.log(num)}}letfouter()f()//11f()//12六、高阶函数满足任一条件即为高阶函数参数接收函数返回值输出函数常见高阶数组map、filter、forEach、sort、定时器、事件处理函数示例functioncompute(a,b,callback){returncallback(a,b)}compute(2,3,(x,y)xy)七、立即执行函数 IIFE定义完立刻调用创建独立局部作用域避免变量污染全局。// 写法1(function(){leta10console.log(a)})()// 箭头函数版((){console.log(立即执行)})()八、递归函数函数内部自己调用自己必须设置终止条件否则无限循环报错。示例求阶乘functionfact(n){if(n1)return1returnn*fact(n-1)}console.log(fact(5))//1209、函数分类总结普通声明函数function关键字有提升、arguments、可做构造函数箭头函数简写、无this/arguments、不能new、无提升匿名函数无函数名多用于表达式、回调、IIFE递归函数自调用处理分层重复逻辑高阶函数操作函数本身构造函数配合new创建实例十、常见易错点箭头函数不能用作构造函数new调用直接报错return换行后会自动补全分号无法返回换行后的对象闭包持续占用内存不用时需手动清空变量释放内存函数提升仅针对函数声明函数表达式不存在提升arguments是类数组要用Array.from转为真数组才能使用forEach、map等方法