前端中bable是什么

好，今天给大家带来的是 babel 翻译器以及非书表格中间公式翻译执行器的相关原理啊，这几个内容，把它掌握之后呢，同学们一定在呃后面面试的过程中会有更好的表现啊，这也是非常拔高的内容了，基本上呢，呃，往奔着五十万年薪以上的这个水平去走。 然后呢，如果今天是第一次来的同学很多啊，我看很多同学扣一，那我们之前有这么多公开课相关的合集，同学们需要资料的话去找咨询老师去领取一下这些资料，非书文档配套的都有那个对应的视频课程啊，都是免免费分享给大家，希望大家在这个职业近前端的进阶方面啊，能够有呃这个更多的收获。 今天几个点呢？我们主要总结了以下三大重难点啊，一个是背薄的使用跟翻译过程，还有是翻译原理，再就是充分 理解翻译原理之后，我们通过翻译原理相关的这个概念呢，然后呢，去手写一个公式字段的计算这样一个场景，这个其实在很多的产品里面有这个功能，我们等一下给大家演示一下。我们今天主要内容呢，从三部分展开。然后呢，同样啊，老规矩，我们有三个 level 啊，第一个 level 呢，初中级，中高级，再呢专家级，初中级的话， babel， 比如说你去面试的时候，只要涉及到底层原理，就会问你 babel 有 没有了解过啊，然后让你去说一说 babel 相关的基础使用和原理， 这是第一个啊。然后呢，中高级的同学呢，比如在面试的时候被问到有没有了解过翻译原理，翻译原理的底层是什么样子的？有没有详细的去了解过啊？然后第三个问题呢，专家级别，这个就是把前面的原理， babel 这些内容呢全部融汇贯通，以后自己能够通过翻译原理去做一个产品出来。 我挑了一个比落地的场景啊，就是非书表格中间的这个公式字段，翻译执行器来给大家去讲。好， 那背包这个呢，我们稍后来介绍。然后呢翻译原理，刚才其实也给大家简单看了一眼啊，呃，大概的这个内容，同学们呢，可以坚持听到最后一个半小时，一共啊，给大家把这个所有内容给它展开。这是关于翻译器的，刚才其实提到了翻译器一般有两种场景，第一种呢，翻译器是直接生成代码的，那是上面这条路， 这种一般在什么场景下有呢？像 tarot， 多端开发， uni app 这些要去做翻译，做代码转换的这些场景要用到啊，或者说你看 type script 需要转换成 javascript， 它也是走的上面这条念度。好，这是上面这个场景。那下面这个场景呢，就是非输表格中间字段的公式字段的啊，那个 编辑器和执行器需要走下面这条路径，就是他只用做语法分析，词法分析，语义分析完之后产出来的代码能够让他去执行就可以了啊，走下面这条链路。好，这是第二个问题。第三个问题是实现一个非输表格的公式自断变异执行器，这个呢给大家先看一看 做出来的效果是什么样子的啊？大家看完之后呢，会更清晰一点。这个需求 好，我这里创了一个分数表格，然后呢这边我随便输一些数字啊，再在这里呢创一个公式字段，这个公式字段一般在这种多维表的场景下面呢，用的非常多 啊，我选一个公式字段，然后呢可以去编辑这个公式，编辑这公式的时候里面就会有很多语法，大家可以看到了这个公式编辑器其实跟我们代码编辑器是类似的，我们现在写一个什么这个代码呢？我们在后面加一个妙码。 好，我们来看一看它的结果啊，保存，我们把这个 稍等一下，我把这个先插一下啊，重新先确定一下，之后我们从这里点开来编辑，在这儿编辑吧文本，然后呢加上 随便吧，我们就直接 concat 好，确定一下，然后呢就能够计算出来结果啊，就能够计算出来结果，这是一种场景啊，除了这种场景以外呢，还有很多复杂的这个公式的场景，大家可以去自己去研究一下啊，去看一下，比如说这个地方， 我们再做一下其他处理。呃，这个里面呢，你当然可以去加别的数字，或者是呢 拼接字母串啊，确定好，这个时候就可以把前面的这个一和我里面写的那个一拼接上来啊，当然你还可以去计算啊，计算它的值，还能够去求它的平均值等等。这些函数里面呢，还有非常非常多的这个内容，逻辑函数，大家下去之后自己去研究一下，去看一下。那做这样一个 功能需要掌握哪些知识点？这就是我们介绍的第三个知识点，这个里面的所有的内容呢，它都是通过翻译原理来实现的。

那么前端面试可能会问你，你平时前端开发中，你是怎么运用 ai 的， 对吧？你因为常见的前端开发，除了这种呃八股文，包括问项目以外，也有可能会问一些这样的问题嘛，然后这个面试的这种回答呢？ 那我给一个答案可以参考一下。那就是说啊，在日常的前台开发中，那我会根据不同的场景选不同的 ai 工具，核心是用 ai 提效。那具体用法，比如说在编码补全的方面啊，我在 vs code 里面我装了啊， timeline， 包括 github 的 couple lot， 对 吧？ type line 能够贴合项目的上下文补全代码，比如说业务逻辑啊啊，类型啊等等。 couple lot 擅长框架与语法不一前，对吧？你写 react， hook 呀，五 u 三啊等等。那你说些开头，它能自动补全核心的逻辑，省一些时间。 那第二种就是在一些开发中组建，包括开发这种代码，业务逻辑开发。那我就说我用 coser 去写这个复杂的组建啊等等啊，比如说无忧里面，我写这个指令啊，写这种组建，它能生成完整的呃无忧文件，包括优化性能啊等等， 对吧？然后遇到这种呃逻辑呢，也会通过 coser 来梳理步骤，再生成代码，比如我根据这种 呃项目那种页面的这种原型图， ui 设计稿，对吧？你写 react 也可以。那第三就是在问题排查，包括一些技术的学习方面，那我可以用叉七 p 啊，用通用林码等等，对吧？但我碰到这种打包体积大，然后兼容呃手机 ios 啊， c i s 啊， 包括一些报错呀，对吧？我都可以用它去定位原因给解决方案，包括学一些新的技术的时候，我也可以让它生成一些最小的运行视例，那比你单纯去看这种技术文档要快很多。 那第四就是文档与注视，我可以用 cursor， 对 吧？给一些复杂函数生成 g s doc 规范注视。那我也可以用 notion a n， 对 吧？基于接口 jason 生成 spec 文档 去减减少转写文档的时间，因为有时候我可能要写一些项目的文档，方便别人啊，包去看呀，包括我们去总结。最后呢，就是 我们 ai 生成的东西呢，我自己也会较验逻辑性、兼容性，并且搞懂这个原理，避免对这个 ai 产生依赖。就是通过 ai 帮我去开发题校，对吧？你面试时候差不多这样回答就可以了 啊，当然你也可以自己去回答，对吧？就是当然如果你也需要前端简历面试辅导，前端全是陪保啊，你可以找我报名。

在前端面试中，有一组概念几乎是必考题，也常常让很多同学感到困惑，那就是 dns prefetch， pre connect prefetch， 很多人都能答出它们都是通过 link 标签来优化资源加载的。 但是当面试官追问这四个概念具体有什么区别，在什么场景下，该用什么，哪一个的时候，你是否能够清晰的讲出你的决策逻辑呢？那么为什么这个问题会成为面试难点，因为他们的目标看起来是一致的，都是提前去做事，但是他们的分工却是完全不同的。 所以面试官想考察的不是你是否真正背下这个定义，而是你是否真正理解了浏览器加载资源的生命周期，以及能否在复杂的业务场景中去做出更加优秀的性能权衡。 那么大多数人的回答误区都在于把它们混为一谈，或者只知道使用 preload， 而忽略了其他几个的概念。 那么要理解他们的区别，其实要抓住两个核心维度，第一个就是时机，这个资源是为当前页面服务的，还是为 未来可能访问的页面服务的，这是有区别的。第二个就是深度，我们提希望浏览器去做到哪一步，是仅仅解析一下域名，还是建立完整的连接，甚至把整个资源下载回来，这也是有讲究的。那么接下来我们来逐一解析一下这个四个指令的作用。 首先第一个 dns prefetch， 它的作用非常专业，就是提前完成对指定域名的 dns 解析，并且把域名换成 ip 地址，那么这个动作的开销是非常小的， 什么时候我们会用到它呢？当你的页面需要用到一些非关键的第三方域名，比如说数据分析脚本啊，社交插件的域名的时候，你就可以用它，它针对的是未来的请求，执行的动作也是最浅的。 第二个是 prent， 它比 d n s pre fetch 更进一步，它不仅会完成 d n s 解析，还会继续进行 t c p 握手和 d r s 协商，把整个安全连接的通道都建立好。 那么当真正要请求资源的时候，就能直接发请求去省去几百毫秒的连接时间。那么它就适用于我们那些确定很快就会用到，并且对当前页面 很关键的第三方域名。所以最典型的例子就是字体库核心 a p i 或者 c d n 域名。但但是大家要记住的是，建立连接是有成本的，所以我们不能滥用这个提示符。 第三个是 preload， preload 的 指令是强制性的，它会告诉浏览器这个资源对当前页面是事关重要的，请立即以最高优先级去下载它，但是请先不要执行。 所以 prologue 解决的是那些隐藏得很深，但是又对当前页面渲染事关重要的资源加载问题。 比如说 css 文件里面，我们用 fontface 去定义字体或者 lcp 元素的大图，我们用 prologue 就 能让它们在 html 解析时就开始下载，大大地提前这些资源的加载时机。 但是大家要注意的是，这个我们用 preload 的 时候， s 属性是必须设置的，它能帮助浏览器正确地设置请求的优先级。 好，我们来到最后一位 prefetch， 它的目标就是优化未来的一些资源加载体验，所以它会告诉浏览器这个资源当前页面用不上，但是用户很可能在访问下一个页面时会用到。 所以你可以在浏览器空闲的时候用最低优先级把它下载下来，存建缓存。比如说在列表页的第一页， prefetch 第二页会用到的资源。或者在单页应用里面，当用户鼠标悬停在某个链接上时， prefetch 对 应的路由， 这是个非常巧妙的提示符。好，那么我们现在来总结一下 dns prefetch 和 pre connect， 它们处理的是网络连接，主要针对第三方域名， pre connect 会进一步建立 tcp 握手和 trs 协商。 preload 和 prefetch 处理的是资源下载。 preload 用于当前页面的关键资源啊，那么有两个关键词，强制和高优。那么 prefetch 呢？用于未来页面的可能资源，我们同样有两个关键词是空闲和低优。 那么下次在你的项目中进行性能优化，或者在面试中遇到这些问题的时候，就可以基于是为当前还是未来的页面考虑，还是要替 和要提前到哪一步这两个维度去构建你的回答和技术方向。好，那么希望这次分享对你有帮助，我是方格，感谢观看，我们下期再见！拜拜！

各位学前端的同学，如果你想成为三十 k 以上的架构师，那你一定要理解依赖注入。为什么要理解依赖注入？ 因为它能大幅提高附用性，降低业务开发难度。什么意思呢？就比如打印信息这个功能。实际工作中， note 中开发环境的信息一般是直接在控制台输出，而生产环境呢，一般是放在一个日制里， 使用的时候会根据环境来去判断我要用哪个方法。那如果我现在在另一个地方也需要打印，那我就得把这一坨再写一遍。 所以呢，一般来说，我们会把这个东西啊抽成一个公共的方法，这样我在别的地方如果需要打印，我只需要调用这个方法就可以了。好问题来了，如果我当前的项目不是一个工程项目，它没有 process 对 象，或者说我当前的环境是一个浏览器环境，它不支持文件模块， 那你这个方法还能用吗？如果不能用，那这个方法的使用场景就很受限，你必须是工程环境的 note 项目，那这肯定不行啊，作为一个合格的架构师，你肯定是希望我抽出来的这个方法能在任意环境都能正常使用，那这时候就需要依赖注入了。 那什么是依赖注入呢？想理解这个，你就得先理解什么是依赖。依赖就是一个代码单元想要完成其功能所需要的任何外部资源，就比如像这里的 process， write to blog， 还有 console， 这些对象和方法的定义都不在这个方法里，所以它们就是外部资源，也就是依赖。那依赖注入呢？依赖注入就是一种架构模式，对于函数来说，就是通过参数的形式将依赖传进来，从而实现控制反转。 就比如我们经常实现的最简单的求和，还有像组建里的父子传职，都是依赖注入，就是我只关心我要做的逻辑是什么，至于你这个职具体是什么，或者说这逻辑里需要的一些实现，我并不关心你给我什么，我用什么。 那这也太简单了，还用得着讲吗？那就要看你用的复杂程度。咱们再说回咱们的刚才这个系统，假如说我想让公司里的所有前端项目在打印的时候啊，都只用一种写法，就是不管你环境如何，是 node 也好还是 web 也好，我都可以使用。 那这个时候就需要设计一下，像现在的这个方法，它只能在 node 环境里用，外部环境用不了怎么办呢？我们呢可以抽出一个公共的方法，这个方法接收两个参数，然后返回一个对象，而这个对象呢，也对应着两个方法。然后我们不同项目一般都会有一个公共的 utos 文件，对吧？ 我在这里比如说 web 的 utools， 我 导入这个公共方法，并且给这个方法注入 console log 和 console arrow。 因为你是 web 环境嘛，所以基本上你的打印只能用 console， 那 在 node 环境中呢，我就对你的这个 create log 注入 write to log 和 write to arrow 的 方法， 这样我在 no 的 环境中同样是调用 log info 这个方法，这样就实现了不同环境下我的写法完全相同，但是呢，它实际执行的逻辑是完全不同的，所以说依赖注入实际上就是将逻辑 与实现完全的分离，这样就可以让我们同样的写法，但是可以适配多种环境。

hello， 大家好，今天我们来聊一个在前端性能优化面试中几乎是必考，但是很多人又答不全，答不深的问题。面试官通常会这么问你， 既然 h t t p 二的多路复用已经解决了对头主色的问题，那么我们是不是就完全不需要合并 j s 啊， css 这些资源了？那么如果你只是简单的回答是或者不是，那么这道题你可能就危险了， 因为这个问题考察的不仅仅是你知不知道 h t p 二的特性，更加考察的是你对技术的背后眼界，背后一些性能优化，思想变化的一个理解。今天我们就来彻底的把这个问题讲透。 首先要明白啊，面试官问你这个问题，是想看到你对一个技术方案的权衡能力。很多同学他的误区在于，认为 http 二解决了对头堵塞并行请求没有成本了，所以合并资源啊，可以被彻底抛弃了。那么这个逻辑链条其实是不严谨的， 因为 h t p 二它的多路复用让过去那种为了减少请求数的极限打包变得不再必要，甚至有害。但是呢，它并没有让资源合并这个行为啊，完全过时。 那么关键在于啊，我们要在不合并和过度合并之间去找到一个新的平衡点。接下来呢，我们会分布的拆解这个啊，论点它背后的原因。 首先第一步啊，我们要讲清楚 h t p 二多路复用解决了什么老问题啊，要说清楚为什么我们不再需要去过度合并资源，我们得先回顾一下它要解决的老问题是什么，也就是 h t p 一 点一的对头主色 啊，你可以把它想象成一个单行车道，所有请求的车辆必须要排队，前一辆车，也就是前一个请求不走完，后面的车都得等着，哪怕后面的是一个小车啊，比如说一个小文件也得等到前面的一个大卡，大卡车开过去之后才能走。 所以呢，为了绕开这个问题，浏览器想了几个办法，同比如说同时开六条单车道，也就是建立多个 tcp 连接，但是呢，这又带来了新的开销，比如说建立连接的成本。 而 http 二的多路复用的思想就是从根本上解决了这个问题，它把单车道扩展成了一条拥有多个独立车道的一个高速公路。所以我们具体来说，就是每个请求和响应都被拆分成更小的带编号的帧， 这些针呢，在同一个 tcp 连接上去交错的传输，然后在最终它的终点呢，根据编号去重新组装，这样一来呢，一个大文件的传输就不会去再堵塞其他小文件。这就是为什么我们在 h t v 二的环境下，并行请求多个小文件的成本大大降低了。 那么既然并行请求成本降低了，那过去那种把所有 js css 打包成一个巨型文件的做法就会带来新的问题。 什么问题呢？第一，缓存效率非常低啊，想象一下，你把所有的 css 打包进了一个 a p p 点 css 的 文件，现在你只改了其中一个按钮的颜色，你仅仅改一行代码，用户需要去重新下载整个啊，可能是几百 kb 甚至更加大的一个 a a p p 点 css 文件， 所以这对于缓存来说是巨大的浪费。而我们如果想啊，拆分拆分成啊更加模块化的小文件，用户只需要更新那个发生变化的模块，所以啊，这是一个策略问题。然后第二就是影响手屏渲染， 一个合并后的大文件呢，很可能就包含了大量非首屏必需的脚本和样式，浏览器必须下载并且解析完整个文件才开始渲染页面和核心内容，所以这就会严重拖慢我们 f c p 的 时间。 而在 http 二下面呢，呃，代码分割策略和按需加载的优势就被放大了。然后第三就是无法利用优先级啊。 http 二为，我允许我们为不同的资源设置加载的优先级，比如说，我们可以告诉浏览器优先加载啊，首屏渲染必须用的 css， 但是如果你把所有资源都合并到一起呢，服务器就失去了这种进行精细化优先级调度的能力。好，那么讲到这里呢，你已经回答了百分之八十，但是呢，我们要拿到满分啊。你需要指出一个很多人都会忽略，也是最能体现你技术深度的关键点，那就是 tcp 层的对头主色。 因为 htp 二本身是构建在 tcp 协议之上的，而 tcp 协议就为了保证数据传输的可能性，它就要求数据包必须按顺序到达 啊。如果一个 tcp 数据包在网络传输中丢失了，那么即使它后面的数据包已经到达了接收端， tcp 协议站也必须等待那个丢失的包被重传到达之后，才能将数据交给上层应用。 因为 http 二通常只使用一个 tcp 连接，所以一旦网络条件差，丢包率高，那么这个 tcp 连接上发生丢包，就会导致所有并行的 http 二啊被同时堵塞，所以这就是 tcp 层的对头堵塞。 那么反而呢，在某种极端情况下， h c p 一 点一的多个链接还能起到分散风险的作用，一个链接被堵塞不影响其他五个。所以，当项目中存在大量啊，极极其琐碎的小文件的时候， 过多的引发请求，并不啊，在不稳定的网络下，反而会带来一个 tcp 对 头堵塞的负面影响，所以这是你需要去权衡的点。好，那么到这里呢，我们可以给出一个最终结论了， 回到面试官的问题，有了 h t p 二，我们还需要打包资源吗？啊，你可以这样回答他，我们不再需要像 h t p 一 点一时代那样去把这些资源进行提现合并。而是呢，怎么说呢，我们应该转向更加精细化的资源管理策略， 我们可以使用一些代码分割啊和按需加载策略啊，去充分地利用 h t p 二的多路复用优势啊，把代码拆分成独立的可被精细化缓存的模块。哎，同时呢，要通过优先级设置啊，优化关关键的渲染路径。 但是呢，我们也要认识到，请求本身依然是存在开销的啊，并且呢， http 二无法规避底层的 tcp 对 头主侧的问题。因此呢，我们对于大量极小的文件，或者为了提升压缩率，进行适度的策略性的合并，依然是非常必要的优化手段。 所以大家记住啊，最佳实践是在不合并和过度之间，去根据你的项目实际情况找到一个平衡点。 最后呢，你还可以补充一句啊，就是技术的眼镜其实并没有停止的，为了解决彻底的解决 tcp 的 对头主色问题，后来的 http 三协议啊，选择基于 udp 实现了一个 quick 啊，这又是我们另外一个值得深入探讨的议题了。 好，那么希望通过今天的分享对你有所启发。面试是检验技术深度的最好方式啊，我们要把一个点挖深挖透，你就能在面试中脱颖而出。好，我是方格，我们下期视频再见。拜拜。

什么是前端？前端？比如说我们现在刚开放了一个网站，那网站前端是做什么？前端写页面的，比如说相当我们能够看到的一个页面它呈现出来，比如说百度，那百度上面你可以看到它有个框框，这块有个搜索栏，这块有个按钮，那其实这个页面就是前端来做的，那它 有前端有些什么样的要求？比如说目前前端它首先是要有一些框架，第一个它，比如目前最火的是 voe 三，相当于 voe 那之之前会有个 v o 二、 v o e 二二这样一个版本，那其实对于前端整个来说，你会需要会 h t m l， 需要会 d s， 需要会 v o e。 当然如果说框架你多一点也好，比如说你需要会了 v o e 之后，你需要学 react， 需要学安哥拉，当然安哥拉现在好像基本都不太火了。同时你对于这种这是整个技术站的一个要求，比较一些 ts 的 还有一些 ts， 那 学了 ts 之后其实还有一些前端的一些 ui 框架，比如说你既然需要学饿了么，它有一些这样的一些前端框架，前端框架就会促使你更快的去写完成一个页面。 基本上其实你如果说做前端开发这些，其实这些知识基本已经已经够了。当然你比如说我们现在需要前后段的对接，它里面可能需要一些接口上的调用， 接口上调用你就还需要需要类似于 excel， 类似这种的一个前后端的一个调用的一个空间。其实前端做的活里面大概就是这么多事。当然对于前端的他的要求来说，比如说你如果写了这些网页端的，当然我上面说的这些都是网页端的，那对于这种网页端的开发来说， 他可能还需要一些，比如说我现在这个页面，我，我开发这个网页，那我在 chrome 浏览器里面做的，那我是不是需要在火狐浏览器需要做一些适配？那其实最开始的时候有那种浏览器大家做适配还是很痛苦的， 就像这种浏览器的适配，还有就是那种移动端的适配，比如说我现在开发了一个网页端，那是不是需要去移动端进行一个适配？ 那所有的这些适配的工作其实也是在前端。当然这个前端还有一些也属于前端，比如说移动端的开发，比如说安卓的 ios 的 开发，甚至包括现在鸿蒙的开发，那其实也是属于前端的开发，但这块也可以把它单独划出去叫移动端的开发，大概是这样一种形态。

每天一个计算机小知识，什么是 bomb？ b o m 全称 browser object model 浏览器对象模型，是前端开发中用于直接操作浏览器功能的一套 api。 它独立于网页内容 核心是把浏览器本身拆解为可被 javascript 操控的对象集合，相当于给开发者提供了控制浏览器的遥控器。核心特性于组成 一顶层核心对象 window。 它既是浏览器窗口的代表，又是 java script 的 全局对象，全局作用域定义的变量函数都会自动成为 window 的 属性方法调用时可省略 window 前缀，如直接写 alert 而非 window alert。 二、常用子对象功能 location 操作地址栏信息， 可获取 u r o 跳转页面或刷新当前页。 history 控制浏览器历史记录，实现前进后退跳转，因隐私限制无法查看具体历史内容。 navigator 获取浏览器品牌、版本等设备信息，常用于兼容性判断。 screen 获取屏幕分辨率、尺寸等显示信息，适配不同设备的布局。三、关键能力边界 b o m 最初由 netscape 浏览器制定，至今无统一标准。不同浏览器在部分 a p i 实现上存在差异，如弹出框样式事件对象属性，开发时需注意兼容性处理。

同学们好啊，今天咱们来聊聊前端开发中绕不开的 web crop 打包流程。你是不是经常用 web web， 却搞不清它到底是怎么工作的？其实啊， webpap 的 打包就像咱们平时准备一顿大餐，有固定的步骤，每个步骤还有专门的分工呢。 首先， web 打的把包有个雷打不动的顺序，就像咱们做菜得先买菜再烹饪，最后装盘一样，他是先出纸化，再编一构建，最后输出。这三步是严格按顺序来的，不会交叉进行哦， 那具体怎么分工呢？这里有两个核心角色要记住， node 就 像是家里的翻译官，专门负责把那些非 js 的 文件，比如 css 啊，图片啊，翻译成 webcap 能懂的 js 模块。而 plugin 呢，就像是全能助手， 它能在打包的整个过程中帮我们扩展各种功能，比如压缩代码、生成 html 什么的。打包完成后，会生成三个重要的东西， 第一个是依赖图谱，你可以把它想象成一张详细的地图，记录了所有模块之间的依赖关系，谁依赖谁一目了然。 第二个是 round time， 这可是运行时的基石，没有他，打包后的代码就跑不起来。第三个就是我们最终拿到的班的文件了，这就是打包好的物理文件。最后再给大家划几个高频考点， note 的 执行顺序是从右到左的，就像咱们穿衣服，先穿内衣再穿外套一样，处理顺序可不能搞错。还有 chang 和 bun 的 区别， chang 是 逻辑上的代码框，而 bun 是 实实在在的物理文件。另外要记住， webpack 内核可是个专一的家伙，他只认识 gs， 所以其他类型的文件都需要 loser 来帮忙转移怎么样？这样是不是就清楚多了？下次被问到 webback 打包流程可别再含糊了。你们平时在使用 webback 时还遇到过哪些问题呢？欢迎在评论区交流哦！

呃，前段时间啊，那个有小伙伴遇到这样一个面试题啊，说说你对这个 airfield 方法的理解啊及使用场景。呃，我们来讲一下啊，这个 airfield 他问两问啊，一个理解，一个应用场景。第我们先来看一下这个。呃呃， error 啊，这个 error。 这个方法呢是 es 六新增的数组方法，用于将一个特定的值填充数组， 然后他接，呃，他有三个接收三个参数啊，第一个参数是 v 六，他是必须的，是用什么值去填充，哪怕是一个空值也得是必须要有这个空值啊。第二个值是开始的位置，呃，默认是零， 嗯，第三个参数啊，是停止天窗的位置啊，啊，也是可选的，默认是这个受阻长度，我们看一下啊，这个是默认的受阻长度，而并不是下标啊。 好，我们来那个通过我们这个视力啊，也是还是。嗯，写个小视力来看一下啊。我们这里 有一个数组啊，里边只是零一二三四，然后我这里呢用 x 啊，字母 x 去填充，我们来打印一下看看啊， 我直接刷新一下啊，这里是四个 x， 嗯，他有第二第三个参数，默认第二个参数是零。第三个参数是，嗯，数组的长度啊， 所以这两个我把。呃，把这两个写上也是同样效果，但是这里一定要注意这第三个，它是数组的长度，而不是下标。如果我们换成下标会怎么样呢？如果换成下标三，我们这是零一二三吗？对，三是最后一个，对吧？ 然后我们再来刷新，我们看最后那最右边这个十三是没有被填充上啊，这是需要注意的一点。然后我们再来看一个应用场景啊，我这里也是举举了这么一个应用场景啊，这个场景是什么呢？获取一天二十四小时。 嗯，获取二十四小时这种场景。来，我们在我们的这个，呃，把这个代码刨起来，大家看一下，把这个格式调，把这个代码，嗯，放开，它是什么呢？ 先用这个，嗯，妞，艾瑞啊，二十四，我们定义了一个二十四的，有二十四个值的数值，然后用空去填充它，如果我们不填充啊，我们再先来看一下这个啊， 嗯， 这样吧，这样我们分开来看一下啊，光打印这个， 先把这个先出示掉啊， 它是有二有长度，二十四个，但是它是空的啊。呃，假如说我们它有了它的长度了，我们直接来便利，是可不可以呢？ 用点 map 啊，去便利， 嗯，这样吧，把下标也加上， 返回下标，然后再打印啊，把每个下标返回了啊， 我们看他还是依旧是空的啊，因为里边虽然有了长度，但是他没有东西，这时候呢就需要我们去把这个，呃， 用 fill 啊，这个方法，添添填充的啊，添满的，然后一样。我们再来看一下这个效果啊，它是空，但是它有东西，这回呢它就可以去便利了啊，然后便利到每个，呃，每个 item， 然后把下边返回， 这时候呢它就有值了啊，里边就是零到二十三，一共二十四个长度。好知道这一点啊，利用这一点， 嗯，我们这里填充了空字符，它所所以有了 item 才能便利，然后里边再去判断，用下标啊，用下标，然后去做从零到二十三啊，一共二，他一共是二十四，便利，二十四结束就结束了， 然后这里我们打印一下，我们结果啊得到了从零点到二十四，二十三点啊，一共是二十四个小时。 好，这就是对这个 airfield 啊的一个呃，作为做了一个详情。好，就到这里啊，下课。