2026/2/12 2:09:01
网站建设
项目流程
网页网站免费,做关键字要改网站,wordpress版本可以恢复旧版本,网站开发项目的心得体会别再搞混了#xff01;arguments对象和rest参数到底有啥不一样#xff1f;别再搞混了#xff01;arguments对象和rest参数到底有啥不一样#xff1f;开场白#xff1a;当年我把面试官聊懵了先给俩货拍个证件照#xff0c;省得脸盲老古董 arguments新生代 rest现场翻车实录…别再搞混了arguments对象和rest参数到底有啥不一样别再搞混了arguments对象和rest参数到底有啥不一样开场白当年我把面试官聊懵了先给俩货拍个证件照省得脸盲老古董 arguments新生代 rest现场翻车实录一行代码看出亲妈和保姆的区别箭头函数里根本没有 arguments对但故事得补全类数组转真数组的三板斧面试常问性能深坑别再在热路径里访问 arguments递归场景rest 爽到飞起但爆栈别怪我arguments.callee 被禁之后匿名递归怎么苟动态获取参数个数length 行为大不同模拟函数重载可以但真的值得吗TypeScript 写 rest不加类型让你怀疑人生class 方法里别乱用 argumentsthis 可能让你哭实战小技巧rest 解构前几个我要剩下的打包非严格模式下改 arguments会反向污染实参把 arguments 当普通对象遍历隐藏属性在盯着你兼容老浏览器又想用 restBabel 教你做人调试小贴士控制台自动展开 arguments 别慌谣言终结arguments 真的被废弃了吗一张脑图总结语音转文字脑图在脑子里彩蛋用 rest 写个“任意参数管道”玩玩收尾别再傻傻分不清别再搞混了arguments对象和rest参数到底有啥不一样——深夜语音转文字版边吐槽边把坑填平开场白当年我把面试官聊懵了先交代背景免得你以为我在吹牛逼。三年前我拎着半桶水的 JS 去面试对面小哥邪魅一笑“说说 arguments 和 rest 区别。”我张嘴就来“不都是收参数的吗rest 就是语法糖吧”小哥没说话默默在纸上写了两行代码推到我面前。十秒后我社死。今天把那段社死经历翻出来揉碎喂给你们能救一个是一个。先给俩货拍个证件照省得脸盲老古董 arguments出生年份上古ES1身份类数组对象长得跟数组撞脸但没护照原型链上没 Array脾气怪异非严格模式下还能改成员一不留神就把实参带沟里隐藏技能arguments.callee指向自己可惜被 strict 模式拉黑了新生代 rest出生年份ES6带光环身份真 · 数组全家桶方法都能用脾气佛系只读不乱动外层变量隐藏技能想拿几个就拿几个剩余的全打包搭配解构食用更佳现场翻车实录一行代码看出亲妈和保姆的区别// 场景老板让把收到的参数翻倍后求和functionoldWay(){// 1. arguments 先冒充数组constnumsArray.prototype.slice.call(arguments);// 老手艺又叫“借刀杀人”returnnums.reduce((s,n)sn*2,0);}functionnewWay(...nums){// 2. rest 天生就是数组直接开干returnnums.reduce((s,n)sn*2,0);}console.log(oldWay(1,2,3));// 12console.log(newWay(1,2,3));// 12看着结果一样但老Way里那句slice.call就是脱裤子放屁——多此一举。而且slice在 V8 里会触发一次完整的对象复制参数一多性能肉眼可见往下掉。面试官当初就给我甩了 1w 个数字老Way直接卡成 PPTnewWay 还丝滑得像个渣男。箭头函数里根本没有 arguments对但故事得补全constfoo()console.log(arguments);// 报错arguments is not defined箭头函数没自己的arguments它用的是外层函数或全局的。想偷懒直接 restconstfoo(...args)console.log(args);// 完美args 是真数组记住箭头函数 rest 参数才是现代前端人的基本修养别再写const self this那种考古代码了。类数组转真数组的三板斧面试常问老派刀法Array.prototype.slice.call(arguments)兼容 IE 6但慢且 strict 下 callee 拿不到。ES6 语法糖const arr [...arguments]一句话颜值高性能比 slice 好一丢丢。官方外挂Array.from(arguments)专治各种类数组还能顺便 mapArray.from({length: 5}, (_, i) i * i) // [0, 1, 4, 9, 16]性能深坑别再在热路径里访问 argumentsV8 的“优化杀手”名单里arguments高挂榜首。只要你在函数里对arguments有“不规矩”操作——比如arguments[i]、.length、或者把它当对象塞到另一个函数——TurboFan 直接躺平回退到字节码解释器性能雪崩。rest 参数因为天生数组JIT 能提前做类型推导反而一路绿灯。口说无凭跑个分// benchmark累加 100 万个数字functionwithArguments(){lets0;for(leti0;iarguments.length;i)sarguments[i];returns;}functionwithRest(...args){lets0;for(constnofargs)sn;returns;}constdataArray.from({length:1e6},()Math.random());console.time(arg);withArguments(...data);console.timeEnd(arg);console.time(rest);withRest(...data);console.timeEnd(rest);Node 20 下差距 3~5 倍自己玩去吧。递归场景rest 爽到飞起但爆栈别怪我写个累加递归感受一下// rest 版颜值 100 分constsum(first,...rest)rest.length0?first:firstsum(...rest);console.log(sum(1,2,3,4));// 10优雅是优雅可 JS 没有尾递归优化1w 个数字直接Maximum call stack size exceeded。真要在生产里玩递归老老实实改循环或者上 trampoline 蹦床模式别拿业务数据开玩笑。arguments.callee 被禁之后匿名递归怎么苟strict 模式里arguments.callee被枪毙-named 匿名函数表达式了解一下constfactorialfunctionf(n){returnn1?1:n*f(n-1);};给函数起个内部名f作用域内永远指向自己就算外部变量被覆盖也稳如老狗。不想起名那就别写匿名递归代码可读性第一。动态获取参数个数length 行为大不同functionfoo(a,b,c){}console.log(foo.length);// 3 形参个数functionbar(...args){}console.log(bar.length);// 0 rest 不参与计数arguments.length是实际传了几个func.length是定义时写了几人rest 参数在定义阶段不算人头面试常考记住喽。模拟函数重载可以但真的值得吗Java 党最爱重载JS 党没有于是有人拿arguments.length硬拗functionload(){if(arguments.length1)returnloadUser(arguments[0]);if(arguments.length2)returnloadUserWithRole(arguments[0],arguments[1]);thrownewTypeError(参数不对);}功能能跑但维护起来想打人。TypeScript 时代直接上联合类型 泛型编译期就把错误拍死不香吗TypeScript 写 rest不加类型让你怀疑人生functionpush(...args){// 报错Parameter implicitly has an any typeconsole.log(args);}正解functionpushT(...args:T[]):T[]{returnargs;}一行泛型世界清静。别偷懒写any[]那样还不如回 JS 放羊。class 方法里别乱用 argumentsthis 可能让你哭classCounter{count0;inc(){// 这里如果写成 [...arguments]this 指向没问题// 但你要是手贱把 arguments 传给外部函数this 就丢了[].slice.call(arguments).forEach(nthis.countn);}}正确姿势直接 rest少碰瓷thisinc(...nums){nums.forEach(nthis.countn);}实战小技巧rest 解构前几个我要剩下的打包functionlogFirstTwoAndRest(first,second,...others){console.log(老大,first);console.log(老二,second);console.log(小弟们,others.join( | ));}logFirstTwoAndRest(a,b,c,d,e);// 老大a// 老二b// 小弟们c | d | e写中间件、拦截器时这招超香前面拿配置后面传可变参数代码干净得像刚洗的袜子。非严格模式下改 arguments会反向污染实参真的童叟无欺functionsneaky(a,b){arguments[0]100;console.log(a);// 100}sneaky(1,2);strict 模式下相安无事非严格模式直接改原变量老项目里这种黑魔法一抓一把升级 TS 记得加strict: true不然半夜被坑哭。把 arguments 当普通对象遍历隐藏属性在盯着你functionshowHidden(){for(constkeyinarguments){console.log(key);// 0 1 2 ...}console.log(Object.keys(arguments));// [0, 1, 2]console.log(arguments.hasOwnProperty(callee));// true非 strict}callee、caller这些属性平时隐身一for...in就蹦出来很容易踩雷。Object.keys不会拿不可枚举属性但for...in会写工具库时别混用。兼容老浏览器又想用 restBabel 教你做人安装一条龙npmi -D babel/preset-env.babelrc 里写{presets:[[babel/preset-env,{targets:{ie:11}}]]}写最潮的语法让 Babel 帮你翻译成 IE 能看懂的古代汉语。打包体积会大一点但业务要兼容没办法。调试小贴士控制台自动展开 arguments 别慌Chrome DevTools 里console.log(arguments)会直接展开成数组样式那是浏览器 UI 在帮你不等于它是真数组。想看庐山真面目console.dir(arguments);隐藏属性、原型链一目了然面试时现场演示对面小姐姐直呼专业。谣言终结arguments 真的被废弃了吗ECMA 规范里从没写“deprecated”只是不推荐使用。某些极端场景比如高性能模板引擎、代码混淆器仍然靠arguments省字节。再说一遍不是不能用而是“大部分场景你有更好的选择”。一张脑图总结语音转文字脑图在脑子里新代码默认 rest真数组、无性能坑、结合解构爽歪歪。老库维护、强依赖 callee、要跑 IE8再请 arguments 出山。箭头函数里没得选只能 rest。递归、重载、动态参数个数想清楚再下手别为了装逼把栈爆掉。非严格模式改 arguments 会反噬记得开 strict 或用 TS。彩蛋用 rest 写个“任意参数管道”玩玩constpipe(first,...fns)fns.reduce((acc,fn)fn(acc),first);constadd2xx2;constmul3xx*3;constpowxx**2;console.log(pipe(3,add2,mul3,pow));// (32)*3 然后平方 - 225一行代码把函数式玩出花rest 参数就是灵魂。收尾别再傻傻分不清当年我面试挂得冤今天把话都摊开了arguments 是老臣rest 是新王老臣还没死透新王已登基。写业务——优先 rest抠性能——测了再说维护屎山——看懂 arguments 才能不踩雷。把这篇文章甩进微信群下次谁再跟你说“这俩差不多”直接把性能测试链接糊他脸上。好了我去撸串你们慢慢消化记得多写代码多console.log坑踩多了自然就胖……哦不就强了。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进