web全栈开发的博客

跨域是指在 Web 开发中，当一个网页的源（origin）与另一个网页的源不同时，就会发生跨域。源由协议、域名和端口号组成。如果两个 URL 的协议、域名和端口号中任何一个不同，就被认为是跨域。跨域限制是由浏览器实施的安全策略，它防止一个网页的脚本通过在其他网页的上下文中执行来窃取敏感信息或执行恶意操作。浏览器会限制跨域请求，例如通过 XMLHttpRequest 或 Fetch API 发送的跨域 HTTP 请求通常会被拒绝，除非目标服务器明确允许这样的请求。

深浅拷贝在JavaScript开发中有着不同的应用场景和实现方式。了解它们的区别对于正确处理对象和数组的赋值是至关重要的。希望通过今天的分享，能够帮助小伙伴们更好的去加深与理解。

今天，我想分享 20 个 令人惊叹的 JavaScript 一行代码，让你的工作更轻松。一起来看看吧！🚀。

通过使用export和import语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前，对项目中所需的依赖项进行预先的处理或构建。

看到这里，希望你已经对Diff 算法有了初步的了解，想要深入了解，可以自行查看Diff 源码。总的来说，Diff 算法是一项关键的技术，为构建响应式和高效的用户界面提供了基础。最后，祝你面试顺利，学习进步！前端面试题库 （

你可能永远不需要强制让你的访客使用独特的光标。至少，对于一般的用户体验目的来说是这样。然而，关于cursor属性的一点值得注意的是，它允许你展示图片。这相当于以照片格式展示工具提示。一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的div元素上，所以它不会干扰到元素之外的其他元素。

在JavaScript中，Object.assign() 是一个用于合并对象属性的常见方法。然而，对于许多开发者来说，关于它是否执行深拷贝的认识可能存在一些混淆。先说答案不属于深拷贝，我们接着往下看。

不知你项目中有没有遇到过这样的情况，反正我的实际工作项目中真的遇到了这种玩意，一个接口获取一份列表，列表中的每一项都有一个属性需要通过另一个请求来逐一赋值，然后就有了这份封装真的是很多功能都是被逼出来的。

作为一个程序员在开发中if else判断在代码中是必不可少的，但是if else判断使用多了嵌套多了不利于代码维护，看起来也头疼难以理解，接下来以为大家介绍一下我是怎么避免过多冗余的if else嵌套的。

对于数组的去重，当我们能在面试中说到这个多方法的话，这道面试题也就过了，虽然这道面试不难，但如果我们想要想到这个多方法的话，还是需要许多知识储备的。

目前为止，我已经介绍了对扁平数据结构转换为树形数据结构的代码进行优化的五个步骤。如果你有其他的优化思路，可以继续进行优化，比如利用 JavaScript 的并发机制来提高代码性能。但是，一般来说，上述的优化已经足够将代码性能提升到很高的水平。

WebSocket 作为一种基于 TCP 协议的实时通信协议，为前端应用提供了强大的双向通信能力。本文将深入探讨前端 WebSocket 的相关问题，包括协议区别、用法、关键技术点等。

!&&||但以上都不是本文要说的内容，本文要说的是另外几种。

同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。如果两个 URL 的协议、主机和端口都相同，我们就称这两个 URL 同源。协议：协议是定义了数据如何在计算机内和之间进行交换的规则的系统，例如 HTTP、HTTPS。主机：是已连接到一个计算机网络的一台电子计算机或其他设备。网络主机可以向网络上的用户或其他节点提供信息资源、服务和应用。使用 TCP/IP 协议族参与网络的计算机也可称为 IP 主机。

大明哥在这里总结了 7 中方式用来解决 if...else 的问题，我相信里面总有一两种方案是你比较满意的，七种方案各有优劣，各自有各自的使用场景，我们需要在实践中不断领悟，在重构中不断进化，总结出适合自己最佳的重构方案。重构之路，任重而道远，各位其行且珍惜前端面试题库 （

JavaScript 的包装类型是指基本数据类型（例如 number、string、boolean）在一些特定场景下会被自动转换为对应的包装对象，从而可以使用对象的方法和属性。这种自动转换是临时性的，仅在需要调用对象方法或属性时发生，操作完成后又会自动转换回基本数据类型。这种特性可以让基本数据类型在某些情况下表现得像对象。Number 对应于基本数据类型 numberString 对应于基本数据类型 stringBoolean 对应于基本数据类型 boolean。

的工作方式是将模板字符串里的所有字符串作为一个数组传递给函数的第一个参数，其余参数则根据相应的表达式直接插入到字符串中，的方法， 此方法提供了一种简单有效的方法来深度克隆对象， 且适用于大多数现代浏览器和 Node.js v17 以上。作为最流行的语言之一，其语法灵活且每年都在不断吸纳新特性，即使是一个从业多年的老手， 偶尔也会有一些被低估的。实际上内置了许多非常有用的方法，帮助您提高调试输出的质量和可读性，掌握它们能使您更轻松地。的产生，flatMap 非常适合在需要灵活性和可读性的情况下使用。

这篇文章分享了如何调试线上代码，主要的点是 webpack 的配置和 浏览器自动添加 add sourcemap 的功能，当然，这两点都归结于 sourcemap 的映射能力。前端面试题库 （

最近工作中需要用到数组对象去重的方法，我是怎么想也没想出来，今天稍微研究了一下，总算找到了2种方法。分享一下，希望对大家有帮助！采用数组中的reduce方法，遍历数组，也是通过对象访问属性的方法。采用对象访问属性的方法，判断属性值是否存在，如果不存在就添加。

为什么要做性能优化？性能优化到底有多重要？性能优化是为了提供更好的用户体验加快网站加载速度提高搜索引擎排名节省服务器资源适应多种设备和网络环境等方面的需求。通过不断优化性能，可以提高用户满意度、增加网站流量提高业务效果。同时性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是可以能提升网站性能，坏的一面就是配置多，代码复杂，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，所以也并不是一味的追求性能优化，而是需要谨慎使用。防抖和节流是JavaScript中常用的两种性能优化方式。

当你看到这里的时候，几乎前端面试中常见的手写题目基本都覆盖到了，对于社招的场景下，其实手写题的题目是越来越务实的，尤其是真的有hc的情况下，一般出一些常见的场景题的可能性更大，所以最好理解➕记忆，最后欢迎评论区分享一些你遇到的题目至此，手写题系列分享结束，希望对你有所帮助。

地址：web前端面试题库节流是一种常用的性能优化技术，它可以限制函数的执行频率，避免过多的重复操作，提升页面的响应速度。函数在 n 秒内只执行一次，如果多次触发，则忽略执行。应用场景：防抖防抖函数可以将多次高频率触发的函数执行合并成一次，并在指定的时间间隔后执行一次。通常在处理输入框、滚动等事件时使用，避免频繁触发事件导致页面卡顿等问题。函数在 n 秒后再执行，如果 n 秒内被触发，重新计时，保证最后一次触发事件 n 秒后才执行。应用场景：SPA首屏为什么加载慢？首屏加载慢可能有以下原因

方法会将获取到的数组或对象整合到一个对象中，并将他们编排成一个带索引序号和元素内容的一个数组，通过访问对象内数组的第一个元素即可得到索引序号，访问第二个元素即可得到数组中包含的内容。此循环会将集合中的每一个元素创建对应的索引，通过索引来遍历整个数组中的元素。Object.values()方法会将每个获取到的属性对象封装📦到一个数组中，通过数组访问索引的方式可以依次将属性对应的值和内容取出。循环同样可以遍历对象内部的属性。方法获取到的键值会将他们集成到一个数组中，因此对数组可以进行的操作，同样适用于此。

总之，我们可以通过一些其他的方法来进一步优化图片懒加载，而且除了图片外，还有其他类型的资源也可以使用懒加载技术来优化性能。我们可以使用类似于图片懒加载的方法来实现懒加载，例如使用 HTML5 的video和audio标签来实现视频和音频懒加载，使用IFrame标签来实现嵌入式网页的懒加载等，通过使用懒加载技术，来提高网页的加载速度、减少后台服务器压力，并提升用户体验，从而实现优化。那么这篇文章就到这里结束啦~

for...in和for...of循环都是 JavaScript 中用于迭代的有用工具，但它们有不同的用途和适用场景。了解它们的区别可以帮助你更好地选择合适的迭代方式。使用for...in循环遍历对象的属性，但要注意遍历原型链上的属性。使用for...of循环遍历可迭代对象的元素，例如数组、字符串、Map、Set 等，它更直观且不会遍历原型链属性。

本篇文章略微介绍一下前端中常见的加密算法。前端中常见的加密算法主要形式包括——哈希函数，对称加密和非对称加密算法。前端使用非对称加密原理很简单，平时用的比较多的也是非对称加密，前后端共用一套加密解密算法，前端使用公钥对数据加密，后端使用私钥将数据解密为明文。中间攻击人拿到密文，如果没有私钥的话是没办法破解的。

在箭头函数中，this关键字引用的是定义该函数时所在的对象。在普通函数中，this关键字引用的是调用该函数的对象。如果需要确保this关键字的作用域正确，可以使用bind()方法来绑定函数的作用域。但是，在使用普通函数或箭头函数作为参数时，方法会等待异步函数完成并返回结果，因此我们可以正确地处理异步函数。方法来绑定函数的作用域，或使用箭头函数来定义回调函数。方法中使用普通函数时，该函数的作用域并不是调用。方法来绑定函数的作用域，将该函数的作用域绑定到。关键字引用的是定义该函数时所在的对象。

金九银十过了大半，笔者最近也面了一些公司，现将一些自己遇到的和收集的基础题目整理出来，后续会整理分享一些其他的信息，希望对你能有所帮助。4.1. 如果是引用类型，直接返回，比如构造函数主动返回了一个对象：function T(){return {x: 1}}这里简单实现一下，可以参考一下其他的Promise A+规范的实现，主要包含then,all,race。创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。让函数的this指向这个对象，执行构造函数的代码（为空白对象添加属性）

但这样我们会发现在写布局的时候会非常复杂，也就是你需要自己手动去计算一下对应的rem值，比如上面的font-size设计稿上是20px，那我们就要计算一下20px对应的rem是多少，按我们上面的规则，1px = 1/37.5rem，所以20px应该对应20/37.5 = 0.53rem。块级格式上下文(block format context)是页面一块独立的渲染区域，具有一套独立的渲染规则。keyframes规则用于定义动画的每个阶段。通过keyframe规则，可以指定动画的每个关键帧。

以上就是本篇文章分享的全部内容了。这里是 Xekin（/zi:kin/）。

Firefox 对它识别为追踪型脚本的脚本实施额外的节流，当在前台运行时，节流的最小延迟仍然是 4ms，然而，在后台标签中，节流的最小延迟是 10000 毫秒，即 10 秒，在文档首次加载后 30 秒开始生效。到这里，我们似乎已经找到了 4ms 的出处，并且对于 setTimeout 的最小延迟有了更加精确的定义 - 需要同时满足嵌套层级超过 5 层，timeout 小于 4ms，才会设置 4ms。方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段，但是需要注意的是，

严格模式：是以浏览器支持的最高标准运行混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为。

我们公司平时在开发的时候，总是会需要开发一些组件库，去提供给组内其他人通用，这样大大提高了复用性，当然大厂会有自己的组件库，不过学无止境嘛，大家可以根据本文学会如何发布npm包！04、entry point: 设置入口文件，如果不设置会默认为index.js文件。05、test command: 设置测试指令，默认值就是一句不能执行的话，可不设置。01、package name: 设置包名，也就是下载时所使用的的命令，设置需谨慎。02、version: 设置版本号，如果不设置那就默认版本号。

这让你可以创建一个复合表达式，其中多个表达式被评估，复合表达式的最终值是其成员表达式中最右边的值。这里只会收集一些大多数人不知道的用法，但是确实能提高自己的编码技巧，像ES6那些基础的简写语法或者是三目运算符代替。比如想要拿到接口返回的特定字段的值，可以用解构赋值和对象的简写方法对map方法简写，详细解释请移步。分享一些自己常用的js简写技巧，长期更新，会着重挑选一些实用的简写技巧，使自己的代码更简洁优雅~如果是，那你应该知道一下es6的。的返回值是修改后数组的长度，这时候可以用逗号运算符简化成一行代码。

在现代Web应用程序中，埋点上报是一种重要的数据收集和分析手段。本文将介绍前端埋点上报的几种常见方式，并详细阐述如何在项目中运用这些方式进行数据上报，以帮助开发者更好地进行数据收集和分析。优点可以根据具体需求和业务逻辑进行灵活的定制和扩展。可以完全控制数据的处理和存储方式。缺点需要额外开发和维护自定义接口。需要考虑安全性、性能和可扩展性等方面的问题。根据具体需求和项目情况，选择适合的埋点上报方式非常重要。

在函数定义时，就确定了函数内部可以访问的变量，不会受到函数调用位置的影响。每当 JavaScript 代码执行时，都会创建一个执行上下文（是 JavaScript 引擎内部的一种数据结构，用于管理代码的执行环境、变量的作用域），并按照特定的规则进行管理和销毁。执行上下文的管理和切换由 JavaScript 引擎自动完成，开发者可以通过了解执行上下文的概念和规则，更好地理解代码的执行过程，以及变量和函数的作用范围。是指在函数定义时确定的作用域，而不是在函数调用时确定的作用域。

从我个人理解来看，设计模式其实就藏在我们平时的代码中，只是有人把它们提、炼出来，赋予了一些专业的名词和定义，下面给大家介绍一个日常项目开发中非常实用的设计模式，也就是策略模式。定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。简单来说就是有多种选择，然后一般只会选择一种。从代码的角度来说就是，定义一系列的if和elseif，然后只会命中其中一个。

答案是：是不是一定是函数，得看场景。并且，也无需担心什么时候该将data写为函数还是对象，因为vue内部已经做了处理，并在控制台输出错误信息。场景一这种场景主要为项目入口或者多个html页面各实例化一个Vue时，这里的data即可用对象的形式，也可用工厂函数返回对象的形式。因为，这里的data只会出现一次，不存在重复引用而引起的数据污染问题。场景二：组件场景中的选项在生成组件vnode// data合并策略parentVal,childVal,vm) {if (!vm) {vm。

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。执行结果如下：当我修改了s1的play属性的时候，s2的play属性也跟着变了，因为两个实例使用的是同一个原型对象。它们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行了变化，这就是使用原型链继承方式的一个缺点。

1.函数外面的this，即全局作用域的this指向window**2.函数里面的this总是指向直接调用者；如果没有直接调用者，隐含的调用者是window ****3.用new调用一个函数，这个函数即为构造函数。构造函数里面的this是和实例对象沟通 的桥梁，它指向实例对象 ****4.事件回调里面，this指向绑定事件的对象，而不是触发事件的对象。当然这两个可以是一样的 **5.箭头函数内的this由外层作用域决定。