关注我！带你一路 "狂飙" 到底！

但是，当项目的代码量足够大并且有很多 JSX 条件时，事情很快就会失控。过多的 if 语句会导致组件混乱，因此，我们可以将多个条件提取到包含 switch 语句的单独组件中。这是一个可怕的问题，在 React 中，我们经常会编写条件语句来显示不同的视图，比如这个简单的例子。那么，在 React 中，我们可以通过哪些方式编写更具可读性和可维护性的代码呢？可以看到，使用‘switch’可以很方便的表达‘menu’和组件的对应关系。有时我们可以使用“&&”来简化三元表达式，比如下面的代码。

在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试官中，很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。有人没天赋，简单的用20行左右的代码就实现了。很多人只知道它是用来在调用await时接收async函数的返回值的，却不知道async函数它实际上是一个返回promise的函数。catch 函数是在 then 函数返回的处于拒绝状态的 Promise 上调用的，因此它的错误自然可以被捕获。

今天我们分享一些单行代码技巧，了解这些技巧，可以提升我们的工作效率，现在，我们一起来看一下今天的这些单行代码技巧吧。以上内容，就是我今天想与你分享的全部内容，希望这些内容，能够对你有所帮助。

自己之前辛辛苦苦写的代码，过了一段时间自己再去读，发现写的很是一言难尽。但我不太明白这是什么意思，所以我写了这段代码。很多时候，我们的网站会不断调整功能，有新的和废弃的功能，但我总是担心以后会用到它们，所以我只是注释它们，而不是删除它们。因此，今天我想跟你分享 10 个关于 JavaScript的小技巧，希望可以帮助你避免编写我曾经写过的垃圾代码。大多数时候，我们使用.length，判断字符串的长度是安全的，但是在表单输入的情况下要小心使用。与其写无意义的代码注释，还不如不写代码注释，因为它浪费你的时间。

所谓透明性即指我在搭建好开发环境后，随手写代码随手刷新浏览器就能看到最新的效果，而不需要额外地执行任何命令或有任何的等待过程所以一切依赖编译过程的模板引擎并不适合前端使用，编译只能是模板引擎的一个特性，而不能是使用的前提更严格地说，使用FileWatch等手段进行文件变更检测并自动编译也不在我的考虑范围之内，因为这会造成额外的等待，像我这种手速极快的人可能编译速度跟不上由此可以推出，前端的模板引擎应该是具备可在纯前端环境中解析使用的能力的。前端有一个很大的特点，就是到处充斥着异步的流程。

三次握手是网络客户端跟网络服务器之间建立连接，并进行通信的过程。相当于客户端和服务器之间你来我往的3个步骤。第一次握手是建立连接，客户端发送连接请求报文，并传送规定的数据包；第二次握手是服务器端表示接收到连接请求报文，并回传规定的数据包；第三次握手是客户端接收到服务器回传的数据包后，给服务器端再次发送数据包。这样就完成了客户端跟服务器的连接和数据传送。四次挥手表示当前这次连接请求已经结束，要断开这次连接。第一次挥手是客户端对服务器发起断开请求，第二次挥手是服务器表示收到这次断开请求，

闭包：就是能够读取外层函数内部变量的函数。闭包需要满足三个条件：访问所在作用域；函数嵌套；在所在作用域外被调用。优点：可以重复使用变量，并且不会造成变量污染。缺点：会引起内存泄漏使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部，改变父函数内部变量的值。

通过使用 tryCatchFn 包装控制器函数，您可以确保自动捕获这些函数中引发的任何错误并将其传递给全局错误处理程序，从而无需单独添加 try-catch 块。在全局错误处理程序中，您可以根据错误对象的 statusCode、status 和 message 属性来格式化错误响应。如果在包装函数内发生错误，则使用 catch 方法捕获错误，并将错误传递到下一个函数以由全局错误处理程序处理。总体而言，这种方法通过将错误处理集中在一个位置来简化错误处理，从而更轻松地在应用程序中维护和自定义错误响应。

容器的位置设置为相对，第二个框的位置设置为绝对，并且该框向下移动 30 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。移动的框不会影响周围元素（框 1 和框 3）的位置。它的行为类似于相对元素，直到用户滚动到某个位置，之后它相对于其包含元素或视口变得固定。该元素相对于其最近定位的祖先（具有相对、绝对、固定或粘性定位的元素）进行定位。使用此属性，周围的元素不会受到影响，但元素原本处于静态位置的位置将会有空间。在上面的示例中，即使向下滚动页面，第二个框的位置也将是固定的。

当数组执行删除单元操作时,被删除单元,之后的单元,会前移,进而顶替被删除单元,出现在被删除单元的位置上,造成数组长度减少的情况,这样的现象称为数组的坍塌。就是每执行一次删除就执行一次 i-- 操作。我们循环的时候倒着循环。

getElementsByClassName 是通过标签的 class 名称来获取标签的，因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素，哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已。getElementsByTagName 是用过标签的 标签 名称来获取标签的，因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素，哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已。

只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的下一个兄弟节点，因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点。只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的上一个兄弟节点，因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点。只获取一个节点，不在是伪数组，获取的是当前这个 li 的父元素节点，因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点。

然后我们将一组可观察对象传递给 combineLatest() 函数，该函数返回一个新的可观察对象，该可观察对象发出一个包含每个源可观察对象发出的最新值的数组。在这种情况下，第一个 observable 每秒发出一个新值，第二个 observable 每半秒发出一个新值，因此组合的 observable 每半秒发出一个新值。在此示例中，merge(obs1, obs2) 用于将两个可观察对象 obs1 和 obs2 合并为一个可观察对象，该可观察对象从两个可观察对象发出值。返回值被忽略，原始值不变。

很多事情，没有什么所谓的对错，我们之所以从没有怀疑过自己对键盘认知的正确性，是因为我们并不了解它的历史，很多所谓的“衬衣下摆必须在西裤里”的真理，可能也不过是我们所有人共同难以改变的习惯罢了。他通过研究字母的使用频率，把英文中出现频率较高的字母分开摆放，形成了现在键盘所用的字母顺序。但是由于当时人们已经习惯于固有的键盘顺序，而且也已经衍生出了一种适用于QWERTY键盘的盲打术，足以满足日常的工作需要，所以我们现在电脑上才出现了此种字母摆放顺序。我们现在所使用的电脑键盘，最早是从打字机键盘发展而来的。

语法: window.sessionStorage.removeItem(名字)语法: window.sessionStorage.setItem(名字,值)语法: window.localStorage.setItem(名字,值)如果 sessionStorage 中有该条数据 获取到的就是该条数据的值。语法: window.localStorage.getItem(名字)如果localStorage 中有这条数据 拿到的就是这个条数据的值。作用: 就是删除 sessionStorage 中的这条数据。

十六进制: 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 ... 19 ... 1a 1b 1c 1d 1e 1f 20 21 ...parseInt() 方法可以在字符串转成数字的时候把字符串当成多少进制转成十进制。返回值：返回一个小数点后有固定的 多少位数字的数字，是一个字符串类型。返回值：转换后的数字 你把数字当做几进制使用, 转换成十进制。语法：parseInt(要转换的字符串，当作几进制来转换)语法：数字.toFixed(要保留的小数点后的位数)转换好的数字是字符串类型。

当你需要将手机号码格式化成xxx-xxxx-xxxx的形式。当你需要在一个数字num不足len位数的时候前面补零操作。当你需要将一段文本中的多个空格合并成一个空格。当你需要将数组中的所有重复的元素只保留一个。当你有一个数组，你需要打乱这个数组的排序。当你需要在一个数组中找到一个最接近的值。当你需要将一个矩阵的行和列进行互相交换。但你需要找到一个数组中的最大值的索引。当你需要找到一个数组中的最小值的索引。当你需要要生成一个0-99的数组。当你需要将多个数组压缩成一个数组。当你需要取多个数组中的交集。

由于其优美的切片语法，Python 可以更简洁地完成同样的事情：​​​​​​​。如上面的示例所示，我们使用了一个简单的三个点的扩展运算符，将leader[“me”]的值分配给名为me的变量，并将其他键值对分配给数组others。例如，如果数组 a 包含一个内部数组（两级深），则浅拷贝无法真正复制它们，并且编辑数组 b 的内部数组也会更改 a 的：​​​​​​​。这个版本引入了许多好的功能。顺便说一句，检查 JavaScript 字符串是否为回文的一个简单方法是将字符串与其反转版本进行比较：​​​​​​​。

跨域（Cross-Origin）指的是在 Web 开发中，一个网页的运行环境（域）与所请求资源的域不一致，即请求的目标资源与当前网页的域名（协议、域名或端口）不同。Web 浏览器遵循同源策略（Same-Origin Policy），这是一种安全策略，旨在防止潜在的恶意网站窃取用户数据或进行其他安全攻击。同源策略要求网页的运行环境和所请求的资源必须拥有相同的协议、域名和端口，否则浏览器会阻止跨域请求的执行。举例来说，每个网站都有一个域名或者IP地址（实际上域名就是对IP地址的别名，方便人们记忆）。

今天分享20 个重要的 CSS 技巧，无论你是新手还是老鸟，它都可以提升你的CSS知识技能！这种方法可确保你的导航菜单适应不同的屏幕尺寸并且可供所有用户访问。CSS 框阴影提供了一种简单的方法来增加元素的深度和视觉吸引力。Flexbox 为容器内的元素提供了强大的对齐和分布能力。这允许你使用 CSS 创建自定义设计的复选框和单选按钮。CSS 渐变允许在元素的背景中实现平滑的颜色过渡。CSS 网格简化了适应不同屏幕尺寸的图库的创建。使用 CSS 网格创建复杂的基于网格的布局。

我们还可以单独隐藏特定的视觉属性，例如颜色、背景颜色或边框颜色，而不是使整个元素透明。但是，需要注意的是，即使完全透明，元素仍保留在页面上并且仍然可以触发事件。给覆盖元素分配更高的z-index值，我们可以在视觉上隐藏其下方的元素。通过将其设置为隐藏，我们可以隐藏元素，同时保留它在布局中占用的空间。通过了解每种方法的优点和局限性，我们可以为我们的特定用例选择最合适的方法。隐藏元素最简单的方法之一是调整其不透明度。值得注意的是，这种技术可能不适用于具有图像背景的元素，除非它们是使用线性渐变或类似方法生成的。

作为苦逼的前端开发者，我们无时无刻都要面对产品经理提的各种需求, 比如下图这个场景从首页的点击导航进入列表页,列表页点击列表进入 该 数据详情页从详情页返回，希望列表页缓存，不重新渲染数据，这样会提高用户体验。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，所有列表页和详情页是两个webview，当我们进入详情页，列表页webview，只是会在详情页webview下面，不会销毁。

选中以后，会出现下面这个输入框，假如你想设置.vue文件的模板，可以新建一个vue.json全局代码片段文件，输入vue.json然后回车。很多同学会有疑问，为什么我看到很多大牛的视频里面敲代码的时候，输入一个template，就会出现一大块代码。这里的prefix是你在编辑器里输入的内容，就好像创建html文件的时候，输入的英文感叹号。注意，这里的body是一个数组，每一行的内容都是数组里的每一项，并且需要用引号引起来。好了，接下来你可以把那些没必要的注释删掉，只需要在这个json文件里面输入以下内容。

使用 Array.isArray() 方法：这是一种确定变量是否为数组的最简单、最可靠的方法。该方法返回一个布尔值，如果变量是数组，则返回 true；否则返回 false。使用 Object.prototype.toString() 方法：该方法返回一个表示对象类型的字符串，对于数组对象，返回的字符串为 "[object Array]"。使用 instanceof 运算符：该运算符用于判断一个变量是否为某个类型的实例，可以用于判断变量是否为数组。建议使用第一种方法，因为它最简单、最可靠。

我们现在知道定义（声明）一个变量用的是varlet和const用let声明的变量也叫变量用const声明的变零叫产量。

JavaScript数组中的元素可以通过索引进行访问，索引从0开始，依次递增。可以使用中括号[]和索引来访问数组中的元素。JavaScript数组还提供了一些检索方法，可以在数组中查找元素的位置或进行筛选操作。

●设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的。●当 js 遇到异步代码的时候, 会先拿出来, 放在异步队列内等待, 暂时不执行。●在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器。●同步代码优先执行，执行完了同步代码以后在去执行异步代码。●异步代码在宿主环境中执行 执行完毕以后存放到任务队列中。●时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟。●返回值是，当前这个定时器是页面中的第几个定时器。●返回值是，当前这个定时器是页面中的第几个定时器。

●语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引。●作用：charAt() 是找到字符串中指定索引位置的内容返回。●语法：字符串.repalce(被替换的内容，要替换的内容)●语法：字符串.indexOf(要查找的字符，开始索引)●语法：字符串.indexOf(要查找的字符，开始索引)○(' ') 字符串中有空格 会按照原字符串中的空格切割。●字符串和数组有一个一样的地方，也是按照索引来排列的。○包含开始的索引对应的内容，不包含结束索引对应的内容。

jQuery于2006年1月由John Resig在BarCamp NYC首次发布。它目前由Timmy Wilson领导, 并由一组开发人员维护。jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。使用jQuery可以更容易地编写可维护的JavaScript代码，同时提高了跨浏览器的兼容性。其实 jQuery 就是封装的一个大型开源库而已, 提供了若干的方法供我们使用。

数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了。比如我们想改变一个数组这样肯定是不合理，因为这样不是在改变之前的数组。相当于重新制作了一个数组给到 arr 这个变量了，相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改。所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了。

首先，是以元素以aria- 开头的属性。语法：var(--variable-name, default-value)，--variable-name 表示变量名称，以两个连字符（--）开头，是任何自定义名称。主要的动效就是这些，具体的还有很多细节，比如开关边缘的阴影效果，状态切换时候的贝塞尔曲线效果，等等，我们这篇文章主要解析核心代码，细节的代码也会在全代码文件里，有兴趣的可以去研究！到了这的我们基本就已经搞定了整个按钮的核心功能，实现了交互效果，但有一些细节的阴影，过渡，本塞尔曲线等没有进行具体的介绍。

Session是服务器端技术，在服务器端,利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的session对象，由于session为用户浏览器独享，所以用户在访问服务器的web资源时，可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时，其它web资源再从用户各自的session中取出数据为用户服务。4.如果创建了一个cookie，并将他发送到浏览器，默认情况下它是一个会话级别的cookie（即存储在浏览器的内存中），用户退出浏览器之后即被删除。

分组就是使用小括号将多个单独的字符或字符类组合成子表达式，以便可以像处理一个独立的单元那样，用"|"、"*"、"+"或者"?如果不设置这个标志，那么^只能匹配字符串的开头，$只能匹配字符串的结尾；如果设置了这个标志，那么^可以匹配多行字符串的 每一行的开头，$可以匹配多行字符串的每一行的结尾。否则返回一个数组，这个数组的第一个元素包含与正则表达式相匹配的字符串，其他元素包含的是匹配的各个分组（用括号括起来的子表达式）正则表达式的选择匹配符只有一个"|"，使用"|"可以匹配指定的多个选项中的任意一项。

过滤器分为两种，一种是局部过滤器，一种全局过滤器。所有的过滤器都是函数，并且参数为要过滤的数据。

只要在300ms连续触发键盘事件，新的定时器总是会替代旧的定时器那么，连续过快的键盘输入，将不会触发多次请求而是在键盘输入结束后（300ms内不再输入）发出一次请求回过头来，我们再看代码//每次触发，都把前面的定时器关闭，尽管第一次定时器并不存在t = setTimeout(function(){ //开启新的定时器发送请求到服务器}, 300);})是不是好理解一些了呢不过这段代码，我们显然写的不够完美为了解决防抖问题，我们引入了全局变量t，造成了全局变量污染。

依次将字符串中从左到右的数字部分转为整数,一旦转换失败，返回NaN。关于JS的手动类型转换，parseInt是我们最早接触的函数之一。(3) 其它数据类型：只要开头不包含有效数字，结果都转为NaN。它有两个参数，第二个可以省略，我们先展示常见的用法。是将参数（通常为字符串）强制转换为整数。

初学者在学JavaScript这门语言的时候，最害怕看到的，应该就是控制台出现的红色错误信息！其实解决这些错误并不难，这是大多数初学者难以跨越的一个心理障碍而已。因为obj.test是可以访问的，打印它的值，是undefined，这是源于JS的特殊设计。这不难理解，你引用的变量没定义，连undefined都没有，找不到任何内容。也就是说，系统判定你错误的把test当成了函数，因此是类型错误。你只要认真看一看错误信息，其实解决错误是非常简单的。这应该是刚开始写代码最容易出现的错误了。错误原因，a未定义以上。

幼儿园所有的小朋友每天都要做3件事：吃饭、睡觉、打豆豆。只有一个小朋友例外，他的名字叫豆豆。后来，有一位善良勇敢的小朋友站出来说：你们不能这样打他了，这么打下去，会把他打死的那我们以后就只能吃饭睡觉了！！所以从现在开始，我们每隔72小时，只能打1次豆豆于是大家都纷纷表示赞同并流出了感动的泪水豆豆挨打的频率被降低了，这就叫节流。列举一个实际的应用场景一般情况下，当网页向下滑动的距离越来越长的时候在右下角会出现一个回到顶部的按钮。它的实现非常的简单。

严格模式（Strict mode）是由ECMA-262规范定义的新兴JavaScript标准，发布于2009年12月第五版。旨在改善错误检查功能并且标识可能不会延续到未来JavaScript版本的脚本。ES5严格模式是限制性更强的JavaScript变体，它与常规JavaScript的语义不同，其分析更为严格。目前，除了IE6-9，其它浏览器均已支持ES5严格模式。一、严格模式的使用严格模式的使用很简单，只有在代码首部加入字符串 “use strict”。有两种应用场景，一种是全局模式，一种是.

不过m3可以访问变量a这种规则，并不是在所有编程语言里都生效的。因此，这也算是JS的特性之一。除非这个变量，已经无人引用，即是说，它已经无法再内存里被找到。m3可以正常访问a，接下来我们增加一个return操作。在JS当中，一个函数可以访问其外部的变量资源。垃圾回收器显然不会回收一个依然被引用的变量。首先，我们可以在m1的内部创建一个函数m3。函数是等价的，即它们是同一个函数。执行完成的时候，内部的变量。当然，那就是使用let。，理论上应该被回收掉了。此时才可以当做垃圾处理。间接的，访问到了变量。