做网站需要解析吗网站建设的初期目标

做网站需要解析吗,网站建设的初期目标,wordpress 缩略图截图,做蛋糕网站[toc](初学者必看#xff1a;搞懂 JavaScript map() 和 forEach() 的差异#xff0c;写出更高) 初学者必看#xff1a;搞懂 JavaScript map() 和 forEach() 的差异#xff0c;写出更高效的代码 “我用 map 打印了一串数字#xff0c;结果浏览器给我一摞 undefined#x…[toc](初学者必看搞懂 JavaScript map() 和 forEach() 的差异写出更高)初学者必看搞懂 JavaScript map() 和 forEach() 的差异写出更高效的代码“我用 map 打印了一串数字结果浏览器给我一摞 undefined我怀疑它在嘲笑我。”——某位刚学完 for 循环就冲进函数式世界的同学引言你真的用对了数组遍历方法吗先别急着点头。打开你最近写的那个 Vue 组件搜一下.map(再搜一下.forEach(。如果两行代码之间只差一个单词却一个返回新数组、一个默默把原数组改得妈都不认识——别怀疑这篇长文就是给你写的。我写这篇文章时隔壁工位的后端兄弟凑过来瞄了一眼说“哟前端又在给数组做心理辅导”我回他“对map 是精致利己主义forEach 是躺平打工人得让他们各就各位。”他愣了三秒说“那你写写完发我我也踩坑。”于是就有了下面这五千多字顺带十几段能直接粘进控制台跑的代码。如果你只想看结论直接拉到最后一张“生活例子思维导图”也行但如果你想以后再也不用console.log猜谜建议泡杯咖啡慢慢看。为什么前端新人总在 map 和 forEach 之间犹豫不决故事要从“数组三件套”说起for循环、for...of、for...in。老师刚讲完“旧社会”的遍历方式转头就甩给你两个新伙伴——map 和 forEach。它们长得太像arr.map(itemconsole.log(item));arr.forEach(itemconsole.log(item));都能跑都能打印都能让你顺利通过面试题“怎么遍历数组”。但接下来面试官追问一句“如果我要拿到一个新数组”你犹豫两秒写了forEach顺手在回调里push——恭喜踩坑 1。根本原因教材只告诉你“它们可以遍历”却没告诉你“它们是谁、从哪来、要到哪去”。技术初印象一眼看穿 map() 和 forEach() 的本质区别先上“身份证”方法返回值是否改变原数组能否链式调用核心定位map新数组否能数据转换forEachundefined理论上不碰不能副作用side effect代码说话最直观// 场景把价格从人民币转成美元constlist[{price:70},{price:100}];// map纯函数给你一张新清单constusdListlist.map(item({price:item.price*0.14}));console.log(原数组还在,list);// [{ price: 70 }, { price: 100 }]console.log(新数组诞生,usdList);// [{ price: 9.8 }, { price: 14 }]// forEach直接改原数组不声张list.forEach(itemitem.price*0.14);console.log(原数组被改了,list);// [{ price: 9.8 }, { price: 14 }]看到区别没map 像“复印机”原件纹丝不动forEach 像“涂改液”原件说改就改。前者函数式后者命令式。深入底层机制不只是写法不同执行逻辑也大相径庭map() 如何构建新数组每一步都生成副本的代价与优势V8 源码简化版长这样// %ArrayMap 内部实现伪代码functionArrayMap(callback,thisArg){constlenthis.length;constresultnewArray(len);// 预分配新数组for(let i0;ilen;i){if(i inthis){result[i]callback.call(thisArg,this[i],i,this);}}returnresult;}注意两点预分配长度先知道“我要造多长的数组”避免动态扩容。按索引赋值保证顺序与稀疏数组的正确性。代价内存里同时存在“原数组 新数组”数据量大时峰值内存翻倍。优势 immutable时间旅行调试、React 浅比较、Redux 状态回溯都靠它吃饭。forEach() 为何不能链式调用它只是个“执行者”不是“创造者”看 polyfillArray.prototype.forEachPolyfunction(callback,thisArg){for(leti0;ithis.length;i){if(iinthis)callback.call(thisArg,this[i],i,this);}// 注意没有 return 或者 return undefined;};规范里写着“forEach 始终返回 undefined”。因此arr.forEach(console.log).filter(Boolean);// TypeError: Cannot read property filter of undefined想链也链不起来。它只负责“喊口号”不给你“发鸡蛋”。性能对比实测在不同数据规模下谁更快、更省资源口说无凭跑分见真章。测试机M1 Pro 16GNode 20。代码如下复制就能跑// benchmark.jsconst{performance}require(perf_hooks);functiontest(size){constarrArray.from({length:size},(_,i)i);constt1performance.now();constdoubledarr.map(xx*2);constt2performance.now();constt3performance.now();arr.forEach((x,i,a)a[i]x*2);constt4performance.now();console.log(规模${size} map 耗时${(t2-t1).toFixed(2)}ms内存翻倍 ✓ forEach 耗时${(t4-t3).toFixed(2)}ms原地修改 ✗);}[1e5,1e6,1e7].forEach(test);结果三次平均规模map 耗时forEach 耗时10K0.8 ms0.6 ms100K7.2 ms5.1 ms1000K71 ms49 ms结论forEach 更快毕竟少一次内存分配。但差距在百万级才拉大到 20 ms 级对 99% 的 Web 场景可忽略。若数据量上到千万级map 的 GC 压力才会肉眼可见。内存占用分析map() 创建新数组带来的开销到底值不值继续跑一段 heapdumpconstv8require(v8);constarrnewArray(5e6).fill(1);global.gc();constbeforev8.getHeapStatistics().used_heap_size;constbarr.map(xx1);global.gc();constafterv8.getHeapStatistics().used_heap_size;console.log(map 多占内存 ≈,((after-before)/1024/1024).toFixed(2),MB);// 输出map 多占内存 ≈ 38.15 MB5 百万个数字新建数组额外吃掉 38 M。在 Node 服务里写日志脚本一天跑一次数据量几十万真没必要抠在 React 做虚拟 DOM diffimmutable 带来的可预测性远超这点内存。结论值不值看场景不要拍脑袋。可变性 vs 不可变性现代前端开发推崇哪种风格React、Redux、Zustand、Recoil……都在喊“别改状态拷贝”为什么浅比较才能快。时间旅行调试才能爽。并发渲染才能安全。map 天然 immutableforEach 默认 mutable虽然你可以自律。在团队规范里我们直接写死 ESLint 规则{rules:{array-func/prefer-array-map:error,no-array-for-each/no-array-for-each:warn}}把 forEach 留给“副作用”专用数据转换一律 map。新人进来三天就养成习惯省掉 80% 的“我数组怎么又变了”的 debug 时间。实战场景拆解什么时候该用 map()什么时候非 forEach() 不可数据转换任务首选 map()// 后端给的时间戳前端要展示“多久以前”consttimeList[1690000000000,1690100000000,1690200000000];constfriendlyListtimeList.map(ts{constsecMath.floor((Date.now()-ts)/1000);returnsec60?${sec}秒前:${Math.floor(sec/60)}分钟前;});// 纯函数可单元测试可缓存可预测副作用操作交给 forEach()// 埋点日志只负责上报不返回任何值constbuyList[{id:1},{id:2}];buyList.forEach(item{navigator.sendBeacon(/log,JSON.stringify({event:buy,id:item.id}));});记住口诀“数据变形用 map打洞上报用 forEachmap 像复印forEach 像广播复印留底广播随风。”常见误区盘点那些年我们踩过的坑1. 误以为 forEach 能 return 中断循环[1,2,3,4].forEach(num{if(num3)return;// 想跳出对不起这是回调里的 return只能跳过本次console.log(num);});// 打印 1 2 4循环继续正确姿势用some或every做“找到即停”。[1,2,3,4].some(num{if(num3)returntrue;// 返回真即可终止console.log(num);});2. 试图用 map 做纯副作用导致内存浪费// 错误示范我只想发请求却生成一堆 undefinedconstids[1,2,3];constwasteids.map(idfetch(/api/${id}));// 返回 Promisevoid[]// 内存里平白无故多出一个数组完全没用改成 forEachids.forEach(idfetch(/api/${id}));3. 在 async/await 中错误使用 forEach 引发异步陷阱// 意图等所有请求结束再提示asyncfunctionrun(){constids[1,2,3];ids.forEach(asyncidawaitfetch(/api/${id}));console.log(全部完成);// 实际上同步执行这里会立刻打印}forEach 不会等你的 async 函数它只是把三个 Promise 扔出去就下班了。正确姿势用for...of或Promise.allasyncfunctionrun(){constids[1,2,3];awaitPromise.all(ids.map(idfetch(/api/${id})));console.log(全部完成);}调试技巧当你的数组方法“失灵”时这样排查最有效检查回调函数是否正确返回值尤其在 map 里constcart[10,20,30];constbadcart.map(item{item*2;});// 少写了 returnconsole.log(bad);// [undefined, undefined, undefined]箭头函数花括号包起来时必须显式 return要么去括号constgoodcart.map(itemitem*2);确认是否意外修改了原数组forEach 容易引发副作用constusers[{age:18},{age:20}];users.forEach(uu.age);// 原数组被改console.log(users);// [{ age: 19 }, { age: 21 }]调试技巧在 DevTools 里把对象深度冻结userList.forEach(u Object.freeze(u));一旦误改控制台立刻抛错比console.log追半天快得多。用 console.log 还是用浏览器断点小数组console.log一把梭快速直观。大数组在map回调里打断点配合Call Stack查看是谁传进来的脏数据。性能敏感用console.time()包一圈比到处log更干净。进阶写法推荐结合其他高阶函数玩出花map filter 组合实现数据清洗流水线需求把及格学生的姓名转成大写并拼成新数组。constscores[{name:alice,score:85},{name:bob,score:59},{name:carol,score:92}];consthonorsscores.filter(ss.score60)// 先过滤.map(s({...s,name:s.name.toUpperCase()}));// 再转换console.log(honors);// [{ name: ALICE, score: 85 }, { name: CAROL, score: 92 }]链式调用一眼看清数据流向比嵌套 for 优雅 10 倍。用 forEach 配合 Promise.all 处理批量异步任务需求上传完所有文件后一次性通知后端合并。asyncfunctionuploadAll(files){consttasks[];files.forEach(file{constformnewFormData();form.append(file,file);tasks.push(fetch(/upload,{method:POST,body:form}));});constrespsawaitPromise.all(tasks);awaitfetch(/merge,{method:POST});}forEach 负责收集 PromisePromise.all 负责等待职责分明。避免嵌套地狱把复杂逻辑拆成多个清晰的小函数// before又臭又长constresultdata.map(item{if(item.typevip){item.priceitem.price*0.8;if(item.coupon)item.price-item.coupon;item.priceMath.max(0,item.price);}returnitem;});// after一目了然constapplyVipDiscountpp*0.8;constapplyCoupon(p,coupon)Math.max(0,p-coupon);constcalcVipPriceitem({...item,price:applyCoupon(applyVipDiscount(item.price),item.coupon||0)});constresultdata.filter(itemitem.typevip).map(calcVipPrice);别再死记硬背了用生活例子秒懂两者的区别map 就像复印机你把一沓草稿放进去它“哒哒哒”吐出一份崭新的复印件原件还是原件复印件随便你乱写乱画。forEach 像广播喇叭你站在村头拿着大喇叭喊“大家来领鸡蛋啦”——喊完就完不记录谁领了、领了多少也不留底。下次写代码前先问自己我要复印件还是只要喊一嗓子答案瞬间清晰。写在最后的“懒人锦囊”只要最后需要数组结果立刻想到 map只要执行副作用打日志、发请求、改 DOM立刻想到 forEach遇到中断循环俩都别用去请some/every或for...of遇到异步并发map 生成 Promise 数组然后Promise.all遇到性能瓶颈先量数据量级十万以内别想太多可读性优先。把这张“懒人锦囊”贴在工位下次 reviewer 再给你 comment “为啥用 forEach 还 push”你就可以优雅地指一下小纸条并递上这篇长文。——“兄弟不是我想唠叨是复印机和广播喇叭真不能互换。”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进