前端开发工程师博客

强缓存就是浏览器本地根据服务器设置的过期时间来判断是否使用缓存，未过期则从本地缓存里拿资源，已过期则重新请求服务器获取最新资源。协商缓存则是浏览器本地每次都向服务器发起请求，由服务器来告诉浏览器是从缓存里拿资源还是返回最新资源给浏览器使用。

最近遇到一个需求,对于社区里讨论的帖子展示一个访问量的计数显示问题,当超过多少页面访问量时,就让其显示xxx万,xx亿对于后台返回该字段的数据类型是number,需要进行格式化数字的输出下面就一起来看看怎么处理的本文主要记录了一下使用js进行超大数字,金额显示处理,以及日期时间格式化处理的问题,对于这种常用工具类函数,可以自行收集起来的。

includes()方法用来判断一个数组或字符串中是否包含一个指定的值如果包含返回true，否则返回false。是async声明的函数，async函数是构造函数的实例，其中允许使用await关键字。如果你想要添加新的属性，并且在上一行已经使用了尾后逗号，你可以仅仅添加新的一行，而不需要修改上一行padStart()用另一个字符串填充当前字符串。padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充）。在Promise结束的时候，不管是结果是resolved还是rejected，都会调用。

| 仅当左侧为空或 NaN 或 null 或 undefined 或 false 时，如果左侧操作数为假，则将返回右侧操作数，逻辑或运算符 ( || ) 将返回右侧的值。如果我们想根据不同的类型调用不同的方法，我们可以使用多个 else if 语句或开关，但是还有比这更好的简化技巧吗？在其他语言中，此功能被制成可以在数组上调用的方法或函数，但在 JavaScript 中，你必须自己做一些工作。

服务端，又称后端、server 端前端是用户可见、可操作的部分，如树枝树叶服务端为前端提供 “支撑”和 “营养”，如树根狭义：网页广义：各种客户端，如 App、PC 客户端等。

时，你可以将参数括在大括号中，这样可以在控制台输出时同时显示变量的名称和值。😩以至于程序崩溃无法运行。常规情况下，我们想要筛选唯一值，一般会想到遍历数组然后逐个对比，或者使用成熟的库比如。不过，我这里要介绍一种更简单的方法来改变数组长度，我喜欢它的原因是它非常直观且易读。条件判断是代码过程中最常用的，几乎在任何情况下，我们都会快速地敲下它来控制逻辑流程。这样一来，我们就可以更简洁地列出可选值，而不必写一长串的条件判断语句。将浮点数直接截断为整数。语句来检查是可接受的类型，但它会让我们的代码非常臃肿。

要学习一个新的东西我们首先要了解它出现的原因以及作用，这样才能彻底的掌握它。在ES5中对象的属性名都是字符串，这样很容易造成属性名的冲突，从而出现后面的值覆盖前面的值的情况。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法，新方法的名字就有可能与现有方法产生冲突。如果有一种机制保证每个属性的名字都是独一无二的就好了，这样就从根本上防止了属性名的冲突，这就是ES6引入Symbold的原因！Symbol是一种新的原始数据类型，表示独一无二的值。

小王，你的页面白屏了，赶快修复一下。小王排查后发现是服务端传回来的数据格式不对导致，无数据时传回来不是[]而是null, 从而导致forEach方法报错导致白屏，于是告诉测试，这是服务端的错误导致，要让服务端来修改，结果测试来了一句：“服务端返回数据格式错误也不能白屏！！” “好吧，千错万错都是前端的错。” 小王抱怨着把白屏修复了。刚过不久，老李喊道：“小王，你的组件又渲染不出来了。” 小王不耐烦地过来去看了一下，“你这个属性data格式不对，要数组，你传个对象干嘛呢。”老李反驳： “ 就算data。

程序员提升，逃不过的一个话题就是代码的执行效率，后端如此，前端也是如此，所以async/await异步开发就是大家提升自己代码效率的一个重要知识点，Python如此，JS亦如此，那么我们今天基于JS聊聊async/await异步编程。

纯函数可以更容易地进行单元测试和调试，并且可以更好地支持函数式编程的概念。Reflect 是一种对象反射机制，它提供了一系列操作对象的方法，并且可以用来替代一些原来只能通过 Object 上的方法来实现的功能。高阶函数是指接受一个或多个函数作为参数，并/或者返回一个函数的函数。这种技巧可以用于将函数组合起来，实现函数的复用。柯里化是指将一个接受多个参数的函数转换为一个接受一个参数的函数序列的技巧。函数组合是指将多个函数组合成一个函数的技巧。这种技巧可以用于将多个函数的输出传递给下一个函数，实现函数的复用。

效果图:通用CSS。

本文介绍了前端中数组常用的 API，涵盖了添加、删除、截取、合并、转换等常见操作。熟练掌握这些方法可以提高一定的开发效率。在实际开发中，请根据具体需求选择适合的数组方法。

需求：实现一个在线预览pdf、excel、word、图片等文件的功能。介绍：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代码实现所有功能，建议以下的预览文件标签可以在外层包裹一层弹窗。

i < n;i ++) {根据上面的代码，如果有10个input元素，点击任何一个都会显示。这是因为，当任何一个元素的onclick被调用时，上面的for循环已经结束，i的值已经是10了（对于所有的元素）。i < n;i ++) {是一个外部函数，并返回一个内部函数，这样就会形成一个闭包，num就会调用时传进来的的当时值，这样在点击元素时，就能显示正确的序号。

分支优化在各种语言中都有不同的实现方式和应用场景，本篇通过JavaScript介绍了两种代码分支优化的思想，代码的实现非常简单，重点在于这种思想的应用。观点1：压根不需要多此一举去优化它，并且优化后的代码因为多创建了一个对象/数组，对对象/数组进行检索反而比单纯的if else还是废性能。观点2：分支优化后的代码可读性/可维护性更好，并且引入对象/数组所带来的性能问题在当今时代根本不值一提。

不知道大家项目里面是怎么处理 async/await 的异常，我斗胆在我们项目里翻了一下，发现大量使用 try-catch 来处理 async/await 异常。首先说明一下， try-catch 处理并没有什么问题，我只是觉得这么写代码会有点乱，感觉代码逻辑像是断层了一样，不易理解；其次是代码冗余问题，单个 try-catch 就占了好几行代码，如果每个请求的地方都添加 try-catch，就会显得代码很臃肿。而对于这种大量相同的冗余代码，完全可以用一种通用的函数来替代。

这种方法适用于已经知道width的盒子，实现起来比较简单。这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于多种场景（width不固定）这种方法适用于已经知道width的盒子。这种方法适用于已经知道width的盒子。

slice。

今天给大家安利一波我在做前端开发（crtl+c/v）中的一些提升幸福度js使用小技巧，它可以帮助你书写干净和优雅的JavaScript代码。以上是我大概整理的一些开发中的技巧和方法，可以发现里面涉及到了很多新的es特性和api，使用时可要记得兼容性哦，感兴趣的小伙伴可自行查阅学习，也欢迎小伙伴们一起交流探讨，加油！

package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。package.json对于大部分前端开发者来说，知道dependencies与devDependencies就够了。但对于库开发者或有更高级需求的开发者来说，了解 package.json 的其他字段是非常有必要的。本文介绍的字段分为官方字段与非官方字段。

JavaScript 所有数字都保存成 64 位浮点数，这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位（相当于 16 个十进制位），大于这个范围的整数，JavaScript 是无法精确表示，这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值，JavaScript 无法表示，会返回Infinity。

HTML 属性非常多，除了基本的一些属性外，还有很多很有用的功能性特别强大的属性；本文将介绍24个强大的HTML属性，这些属性可以让你的网站更加动态和交互，让用户感到更加舒适和愉悦。让我们一起来探索这24个强大的HTML属性吧！

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用。// 情况一 function f(x) {return y;} // 情况二 function f(x) {} // 情况三 function f(x) {g(x);上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。

三元表达式默认初始值解构赋值巧取key等，这里就不一一介绍了。我们此次介绍的4个特性，希望可以引起大家的注意，让我们的代码变得更加美好~这些好的习惯，有些可能当时不会给我们带来立竿见影的效果，但是随着时间慢慢迭代，总有一天我们能享受到这些好的习惯带来的长久益处。这些益处主要体现在代码日后的可读性可维护性和可扩展性上。

JS类是一种面向对象的编程方式，它允许我们创建具有相似属性和方法的对象。1.constructor()方法：构造函数，用于创建类的实例对象。3.prototype方法：原型方法，用于在类的原型上定义一个方法。2.static方法：静态方法，用于在类上定义一个静态方法。4.extends关键字：继承关键字，用于创建一个子类。

2.getTime()方法：返回一个表示时间的数字，该数字表示从1970年1月1日00:00:00 UTC到当前时间的毫秒数。9.getMilliseconds()方法：返回一个表示毫秒数的数字，范围从0到999。5.getDate()方法：返回一个表示月份中的某一天的数字，范围从1到31。7.getMinutes()方法：返回一个表示分钟的数字，范围从0到59。8.getSeconds()方法：返回一个表示秒数的数字，范围从0到59。4.getMonth()方法：返回一个表示月份的数字，范围从0到11。

在编程的过程中经常会遇到获取一个值并赋给另一个变量的情况，在获取这个值时需要先判断一下这个对象是否存在，才能进行赋值。ES6的扩展运算符一行就能搞定！去除重复的对象，对象的key值和value值都分别相等，才叫相同对象。有时候网站在某种特定的情况下，需要使整个网站变成黑白的颜色。用于检测当前的环境是否是黑暗模式，返回一个布尔值。将一个字符串进行翻转操作，返回翻转后的字符串。一行代码就能完成的事情，凭什么写两行！在写代码的时候，经常会用到取值的操作。生成一个随机的字符串，包含字母和数字。

如果我们要获取一个不确定是否存在的值时，我们经常会运用if判断先去判断值是否存在，再进行获取。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。值对应一个返回值，这样的结构就类似于我们的对象，也是一个键对应一个值。我们就可以用我们的对象代替我们的。中的每一个元素,不需要我们手动跟更改索引来遍历元素。）取反，来帮助我们来判断,而不用每一个值都用。)的特性，去优化我们的代码。

我们通常使用Array中的concat()方法合并两个数组。用concat()方法来合并两个或多个数组，不会更改现有的数组，而是返回一个新的数组。我们可以通过使用ES6扩展运算符(...

DNS 规定：域名中的标号都由英文字母和数字组成，每一个标号不超过63个字符，也不区分大小写字母。标号中除连字符（-）外不能使用其他的标点符号。级别最低的域名写在最左边，而级别最高的域名写在最右边。由多个标号组成的完整域名总共不超过255个字符。

语法：mapObj = new Map() 备注：集合中的键和值可以是任何类型。如果使用现有密钥向集合添加值，则新值会替换旧值。属性：下表列出了 Map 对象的属性和描述。构造函数指定创建映射的函数。Prototype — 原型为映射返回对原型的引用。size返回映射中的元素数。方法：下表列出了 Map 对象的方法和描述。clear从映射中移除所有元素。delete 从映射中移除指定的元素。forEach对映射中的每个元素执行指定操作。get 返回映射中的指定元素。has。

工作中经常会遇到后台给我们一个扁平化的数据，需要我们转换成树形结构，而且我们操作过这个树形结构后，需要把操作后刚开始的那个扁平化的数据传给后台基于上面的需求开始今天的代码，这个需求看着挺简单，但是真正做起来还是有些难度。

JavaScript中字符串是一种基本数据类型，表示文本数据。以上是JavaScript中字符串常用方法的详细讲解及举例。

在 JavaScript 中，可以使用类来实现继承和多态。

在回调函数中，可以检查当前处理的元素是否符合特定条件，并在找到满足条件的元素时返回该元素。如果没有匹配的元素，则返回 undefined。find() 方法接受一个回调函数作为参数，该回调函数接受三个参数：当前正在处理的数组元素、该元素的索引和原始数组。要编写一个 JavaScript 函数来在数组中查找特定对象并返回它，可以使用。

在上面的代码中，recursiveArray 函数接受一个数组作为参数，并遍历数组中的每个元素。如果当前元素是一个数组，那么就递归调用 recursiveArray 函数来继续遍历这个子数组；否则，就对当前元素做相应的操作，例如在控制台中输出它的值。这将会依次输出数组中的每个元素，包括嵌套的子数组。注意，在实际开发中，可能需要根据具体需求对递归函数进行修改和扩展。递归是一种函数调用自身的技术，对于数组来说，递归可以通过遍历数组的每个元素并对其进行处理来实现。

在前端开发中，JavaScript 是一种非常常用的编程语言。它可以被用来处理各种不同的任务，从响应用户交互到与后台服务器通信和动态更新页面等。

【代码】js 获取两个数组的交集并集。

所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间所谓节流，就是指连续触发事件但是在n秒中只执行一次函数。

js中ajax请求防抖。