[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fkGMNjubK0ShL-AKeyy-nVnsu07po9zBnuz9Xw3dMdMQ":3,"donations-sidebar":8,"posts-{\"page\":1,\"pageSize\":10,\"tagId\":\"9a74300d-06f7-46d0-80d9-8fe67ec0539b\"}":9,"sidebar-data":88},{"id":4,"name":5,"slug":5,"createdAt":6,"updatedAt":7},"9a74300d-06f7-46d0-80d9-8fe67ec0539b","数组","2022-05-21T09:59:56.000Z","2023-02-08T02:49:14.000Z",[],{"list":10,"total":85,"page":86,"pageSize":87},[11,31,45,57,72],{"id":12,"title":13,"slug":13,"content":14,"excerpt":13,"coverImage":15,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":19,"publishedAt":20,"createdAt":20,"updatedAt":21,"category":22,"author":26,"tags":29},"ddc8e702-419f-45b3-b53e-53e3025c40ff","数组转树形数据","\n## 解决方案\n\n```js\nconst nodes = [\n    { id: 3, name: '节点C', pid: 1 },\n    { id: 6, name: '节点F', pid: 3 },\n    { id: 0, name: 'root', pid: null },\n    { id: 1, name: '节点A', pid: 0 },\n    { id: 8, name: '节点H', pid: 4 },\n    { id: 4, name: '节点D', pid: 1 },\n    { id: 2, name: '节点B', pid: 0 },\n    { id: 5, name: '节点E', pid: 2 },\n    { id: 7, name: '节点G', pid: 2 },\n    { id: 9, name: '节点I', pid: 5 }\n];\n\nfunction convert(data) {\n    if (!Array.isArray(data)) {\n        new Error('data must be an array');\n        return;\n    }\n\n    let result;\n    let map = {};\n    data.forEach(item => {\n        \u002F\u002Fid作为key\n        map[item.id] = item;\n    });\n    data.forEach(item => {\n        \u002F\u002F item.pid 为0时 返回underfined\n        let parent = map[item.pid];\n        if (parent) {\n            \u002F\u002F如果用children，就直接push,没有就初始化数组\n            (parent.children || (parent.children = [])).push(item);\n        } else {\n            \u002F\u002F 这里push的item是pid为0的数据\n            result = item;\n        }\n    });\n    return result;\n}\n\nconsole.log(convert(nodes));\n\n```\n\n## 运行结果\n\n```js\n{\n    id: 0,\n    name: 'root',\n    pid: null,\n    children: [\n      { id: 1, name: '节点A', pid: 0, children: [Array] },\n      { id: 2, name: '节点B', pid: 0, children: [Array] }\n    ]\n  }\n```\n\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F4adae0ee52160ffb81ce2080ea576359.webp","PUBLISHED",false,null,627,"2022-11-13T03:29:26.000Z","2026-05-24T20:13:44.000Z",{"id":23,"name":24,"slug":25},"da130ba9-d4f4-49f3-aa0f-149078097ef0","JavaScript","javascript",{"id":27,"name":28,"avatar":18},"f9d0f2de-c700-4f90-b535-afd3dbe78128","Admin",[30],{"id":4,"name":5,"slug":5},{"id":32,"title":33,"slug":33,"content":34,"excerpt":33,"coverImage":35,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":36,"publishedAt":37,"createdAt":37,"updatedAt":38,"category":39,"author":42,"tags":43},"fda0217b-70e8-4814-b058-e395939da4c0","数组相同分组","> 将数组里相同的值放进一个一个小数组,然后再将这些小数组push进一个大的数组里\n\n```js\nlet arr = [0, 2, 3, 1, 3, 1, 1, 4, 5];\nlet obj = {};\nlet _newArr = [];\n\n\u002F\u002FforEach() 方法用于调用数组的每个元素，并将元素传递给回调函数,通过对象的key判断，有key就push，没有就创建key\narr.forEach(item => (obj[item] ? obj[item].push(item) : (obj[item] = [item])));\n\n\u002F\u002FObject.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object表面可直接枚举属性。\nObject.keys(obj).forEach(key => _newArr.push(obj[key]));\n\nconsole.log(obj);\nconsole.log(_newArr);\n\u002F\u002F直接使用Object.values也可以，逼格高\nconsole.log(Object.values(obj));\n\n```\n\n```json\n{\n  '0': [ 0 ],\n  '1': [ 1, 1, 1 ],\n  '2': [ 2 ],\n  '3': [ 3, 3 ],\n  '4': [ 4 ],\n  '5': [ 5 ]\n}\n[ [ 0 ], [ 1, 1, 1 ], [ 2 ], [ 3, 3 ], [ 4 ], [ 5 ] ]\n[ [ 0 ], [ 1, 1, 1 ], [ 2 ], [ 3, 3 ], [ 4 ], [ 5 ] ]\n```\n\n\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F1657981317175.png",638,"2022-07-16T14:22:08.000Z","2026-05-25T03:04:28.000Z",{"id":40,"name":41,"slug":41},"c0f0561e-a47a-4ecd-8caa-cc1df2315d57","算法",{"id":27,"name":28,"avatar":18},[44],{"id":4,"name":5,"slug":5},{"id":46,"title":47,"slug":47,"content":48,"excerpt":47,"coverImage":49,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":50,"publishedAt":51,"createdAt":51,"updatedAt":52,"category":53,"author":54,"tags":55},"a14b5625-090d-458c-b56f-1d4fc17b3db3","html2canvas海报生成","\n\n## 引用方法\n\n### vue\n\n```shell\nnpm i -S html2canvas file-saver\n```\n\n```shell\nimport html2canvas from \\\"html2canvas\\\";\n\u002F\u002Fimport FileSaver from \\\"file-saver\\\";\n```\n\n\n\n## 使用方法\n\n```language\n  \u003Cdiv class=\\\"invitation\\\" id=\\\"invitation\\\" v-if=\\\"!showImg\\\">\n    \u003Cimg\n      src=\\\"https:\u002F\u002Fcdn.aicl.space\u002Faici_space_service_img\u002Finvites1.jpg\\\"\n      class=\\\"bg-img\\\"\n    \u002F>\n    \u003Cdiv class=\\\"personal\\\">\n      \u003Cvan-image\n        round\n        width=\\\"35px\\\"\n        height=\\\"35px\\\"\n        :src=\\\"userInfo.collectionImgUrl\\\"\n      \u002F>\n      \u003Cspan>{{ userInfo.username }}\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\\\"qrcode-img\\\">\n      \u003Cqrcode-vue\n        :value=\\\"`${url}?inviteCode=${loginInfo.userId}`\\\"\n        :size=\\\"80\\\"\n        level=\\\"H\\\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n```\n\n\n\n\n```js\nonMounted(() => {\n  handleExport();\n});\n\n\u002F\u002F屏幕截图\nconst handleExport = () => {\n  nextTick(() => {\n    \u002F\u002F 校正截图不全问题\n    window.pageYOffset = 0;\n    document.documentElement.scrollTop = 0;\n    document.body.scrollTop = 0;\n    const postersDom = document.getElementById(\\\"invitation\\\") as HTMLElement;\n    let width = postersDom.offsetWidth;\n    let height = postersDom.offsetHeight;\n    let canvas = document.createElement(\\\"canvas\\\");\n    \u002F\u002F定义任意放大倍数 支持小数,默认获取浏览器缩放比例\n    const scale = window.devicePixelRatio;\n    \u002F\u002F定义canvas 宽度 * 缩放   高度 * 缩放\n    canvas.width = width * scale;\n    canvas.height = height * scale;\n    let opts = {\n      \u002F\u002F 注意：  allowTaint: true  和 useCORS: true 不能同时设置，两者只有一个起作用\n      scale: scale,\n      canvas: canvas, \u002F\u002F自定义 canvas\n      \u002F\u002F allowTaint: true, \u002F\u002F 允许污染，允许画布上有跨域图片 不建议使用 后面详细补充\n      logging: true, \u002F\u002F日志开关，便于查看html2canvas的内部执行流程\n      width: width, \u002F\u002Fdom 原始宽度\n      height: height,\n      dpi: 300,\n      useCORS: true, \u002F\u002F 【重要】开启跨域配置\n      letterRendering: true,\n    };\n\n    html2canvas(postersDom, opts).then((canvas) => {\n      posterUrl.value = canvas.toDataURL(\\\"image\u002Fpng\\\");\n      showImg.value = true;\n    });\n  });\n};\n```\n\n## 常见问题\n\n### 图片模糊\n> 不要使用背景图片，改用img显示\n\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F51cec6556e8e54eb03c49a5d52439c34.jpg",1356,"2022-05-31T02:24:11.000Z","2026-05-24T20:39:34.000Z",{"id":23,"name":24,"slug":25},{"id":27,"name":28,"avatar":18},[56],{"id":4,"name":5,"slug":5},{"id":58,"title":59,"slug":59,"content":60,"excerpt":59,"coverImage":61,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":62,"publishedAt":63,"createdAt":63,"updatedAt":64,"category":65,"author":69,"tags":70},"0a6dc39b-6004-45f5-94f3-f8c3e775395c","常见面试题","> 主要纪录面试过程中的面试题，对自己知识的查漏补缺\n\n# 说一下深拷贝与浅拷贝以及他们的区别\n## 浅拷贝\n### 概念\n> 概念: 对于字符串类型，浅拷贝是对值的复制，对于对象来说，浅拷贝是对对象地址的复制, 也就是拷贝的结果是两个对象指向同一个地址\n\n### 方法\n> Object.assign或者(...)展开运算符\n\n## 深拷贝\n### 概念\n> 概念: 深拷贝开辟一个新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性\n\n> JSON.parse(JSON.stringify(object))或者递归\n```js\nlet a = {\n    age: 1,\n    jobs: {\n        first: 'FE'\n    }\n}\nlet b = JSON.parse(JSON.stringify(a))\na.jobs.first = 'native'\nconsole.log(b.jobs.first) \u002F\u002F FE\n```\n> 该方法也是有局限性:(1)会忽略 undefined(2)不能序列化函数(3)不能解决循环引用的对象\n\n## 闭包\n\n- 闭包就是能够读取其他函数内部变量的函数\n\n- 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域\n\n### 闭包的特性：\n\n- 函数内再嵌套函数\n- 内部函数可以引用外层的参数和变量\n- 参数和变量不会被垃圾回收机制回收\n\n### 说说你对闭包的理解\n\n> 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念\n\n- 闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中\n\n- 闭包的另一个用处，是封装对象的私有属性和私有方法\n\n- 好处：能够实现封装和缓存等；\n\n- 坏处：就是消耗内存、不正当使用会造成内存溢出的问题\n\n使用闭包的注意点\n\n- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露\n- 解决方法是，在退出函数之前，将不使用的局部变量全部删除\n\n\n## 请描述一下 cookies，sessionStorage 和 localStorage 的区别？\n- cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）\n\n- cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递\n\n- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存\n\n### 存储大小：\n\n- cookie数据大小不能超过4k\n- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大\n\n### 有期时间：\n\n- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据\n- sessionStorage 数据在当前浏览器窗口关闭后自动删除\n- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭\n\n## JS的基本数据类型和引用数据类型\n- 基本数据类型（6种）：undefined、null、boolean、number、string、symbol\n- 引用数据类型（3种）：object、array、function\n\n## 说一下浏览器的缓存机制\n> 浏览器缓存机制有两种，一种为强缓存，一种为协商缓存\n\n- 对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。\n\n- 对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存\n协商缓存相关设置\n\n> Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。\nCache-control：max-age：表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，\nIf-None-Match\u002FETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。\nLast-modified\u002FIf-Modified-Since：第一次请求的时候服务端返回Last-modified表明请求的资源上次的修改时间，第二次请求的时候客户端带上请求头If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比\n\n\n#  Vue面试题\n\n## 请详细说下你对vue生命周期的理解\n> 总共分为8个阶段创建前\u002F后，载入前\u002F后，更新前\u002F后，销毁前\u002F后,Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是Vue的生命周期\n\n## 各个生命周期的作用\n| 生命周期 | 描述 |\n| - | - |\n| beforeCreate | 组件实例被创建之初，组件的属性生效之前 |\n| created | 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用 |\n| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用 |\n| mounted | el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 |\n| beforeUpdate | 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 |\n| update | 组件数据更新之后 |\n| activated | keep-alive专属，组件被激活时调用 |\n| deactivated | keep-alive专属，组件被销毁时调用 |\n| beforeDestroy | 组件销毁前调用 |\n| destroyed | 组件销毁后调用 |\n\n## Vue实现数据双向绑定的原理：Object.defineProperty()\n- vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter\u002Fsetter。用户看不到 getter\u002Fsetter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。\n\n- vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。\n\n\n## Proxy 相比于 defineProperty 的优势\n\n### Object.defineProperty() 的问题主要有三个：\n\n- 不能监听数组的变化\n- 必须遍历对象的每个属性\n- 必须深层遍历嵌套的对象\n### Proxy 在 ES2015 规范中被正式加入，它有以下几个特点\n\n>针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题\n支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。\n除了上述两点之外，Proxy 还拥有以下优势：\n\n> Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富\nProxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法。\n\n\n## v-for和v-if为什么不建议同时用\n> vue2中会优先执行 v-for, 当 v-for 把所有内容全部遍历之后 , v-if 再对已经遍历的元素进行删除 , 造成了加载的浪费 , 所以应该尽量在执行 v-for 之前优先执行 v-if , 可以减少加载的压力。(在vue3中v-if的优先级高于v-for)\n> 解决方案：\n(1)、外部条件放到遍历的父级元素上，没有父级可以使用\u003Ctemplate>\u003C\u002Ftemplate>。注意 key 不能放 template 标签上。\n(2)、在计算属性中先用内\u002F外部条件处理数据，再遍历处理后的数据\n\n\n\n\n##  说说Vue2.0和Vue3.0有什么区别\n\n- 重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：\n> 可直接监听数组类型的数据变化\n 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升\n可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行\n直接实现对象属性的新增\u002F删除\n\n- 新增Composition API，更好的逻辑复用和代码组织\n- 重构 Virtual DOM\n> 模板编译时的优化，将一些静态节点编译成常量\nslot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件\n模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）\n\n- 代码结构调整，更便于Tree shaking，使得体积更小\n- 使用Typescript替换Flow\n\n## 介绍一下Vue中的Diff算法\n> 在新老虚拟DOM对比时\n\n- 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换\n- 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)\n- 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。 匹配时，找到相同的子节点，递归比较子节点\n在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n^3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。\n\n15 说一说keep-alive实现原理\n> keep-alive组件接受三个属性参数：include、exclude、max\n\n- include 指定需要缓存的组件name集合，参数格式支持String, RegExp, Array。当为字符串的时候，多个组件名称以逗号隔开。\n- exclude 指定不需要缓存的组件name集合，参数格式和include一样。\n- max 指定最多可缓存组件的数量,超过数量删除第一个。参数格式支持String、Number。\n原理\n\n- keep-alive实例会缓存对应组件的VNode,如果命中缓存，直接从缓存对象返回对应VNode\n\nLRU（Least recently used） 算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。(墨菲定律：越担心的事情越会发生)\n\n\n\n## 关于宏任务\u002F微任务，同步\u002F异步的执行顺序的面试题\n\n```language\nasync function promise1() {\n    console.log(\\\"promise1  start\\\")\n    await promise2()\n    console.log(\\\"promise1  end\\\")\n}\nfunction promise2() {\n    console.log(\\\"promise2\\\")\n}\nsetTimeout(function () {\n    console.log(\\\"setTimeout\\\")\n}, 0)\nconsole.log(\\\"script start\\\")\npromise1()\nnew Promise((resolve, reject) => {\n    console.log(\\\"Promise\\\")\n    resolve()\n}).then(function () {\n    console.log(\\\"Promise then\\\")\n})\nconsole.log(\\\"script end\\\")\n\n```\n\n### 宏任务\n```language\nscript(整体代码)\nsetTimeout\nsetInterval\nI\u002FO\nUI交互事件\npostMessage\nMessageChannel\nsetImmediate(Node.js 环境)\n```\n\n### 微任务\n```language\nPromise.then\nObject.observe（将要废弃）\nMutaionObserver（新特性）\nprocess.nextTick(Node.js 环境)\n```\n\n### 事件循环\n- js是单线程，一个线程拥有唯一一个时间循环，但任务队列可以有多个。\n- 任务队列又分为宏任务和微任务。\n- 来自不同任务源的任务会进入到不同的任务队列。（setTimeout与setInterval是同源的）\n- 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始进入第一次循环，代码一行一行执行，执行过程中遇到宏任务，把宏任务加到宏任务队列中， 遇到微任务放到微任务队列中，当宏任务的函数调用栈执全部执行后，去看有没有微任务， 如果有，去执行微任务， 微任务全部执行完成后，循环再次从宏任务开始，这样循环。\n- 浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程：宏任务->微任务->渲染->宏任务->微任务->渲染->...\n\n\n### promise, async\u002Fawait\n\n- promise是同步的，它里面的代码会同步执行。\n- promise.then是微任务，promise.then里面的代码放到微任务队列中，等宏任务执行完成之后执行。\n- async\u002Fawait 是同步语法，解决异步回调问题，promise.then.catch 链式调用，但也是基于回调函数的。\n- await会等待一个函数的执行结果，这个函数式同步的\n- await下面的代码相当于promise.then也会放到微任务队列中。\n\n### 揭晓答案\n```language\nasync function promise1() {\n    console.log(\\\"promise1  start\\\")\n    await promise2()\n    console.log(\\\"promise1  end\\\")\n}\nfunction promise2() {\n    console.log(\\\"promise2\\\")\n}\nsetTimeout(function () {\n    console.log(\\\"setTimeout\\\")\n}, 0)\nconsole.log(\\\"script start\\\")\npromise1()\nnew Promise((resolve, reject) => {\n    console.log(\\\"Promise\\\")\n    resolve()\n}).then(function () {\n    console.log(\\\"Promise then\\\")\n})\nconsole.log(\\\"script end\\\")\n\n------------------------------------\nscript start\npromise1  start\npromise2\nPromise\nscript end\npromise1  end\nPromise then\nsetTimeout\n\n```\n\n\n# h5性能优化\n### 1、APP内嵌页面\n> APP预加载网页，点击的时候直接调用页面(缺点，造成app资源浪费，占用内存)\n> css 使用原子css\n\n\n### 1、文件优化： 通过压缩CSS、JavaScript和HTML文件大小，减少网络传输时间。同时，将多个CSS和JavaScript文件合并成一个可以减少请求次数，加快页面加载速度。\n\n###  2、图片优化： \n> 使用图片压缩工具（如TinyPNG）来减小图像文件的大小，采用适当的压缩格式（如JPEG、WebP），并合理使用CSS Sprite或者Base64编码来减少对图片的请求次数，查看图片是否可以服用\n\n###  3、资源缓存优化： \n> 设置合适的缓存策略，利用浏览器缓存机制，尽量减少重复请求，提高页面加载速度。可以通过设置HTTP响应头中的Cache-Control和Expires来控制静态资源的缓存时间。\n\n### 4、延迟加载： \n> 对于非关键内容，如图片、广告等，可以使用懒加载技术，延迟加载这些资源，当用户滚动到它们所在的位置时再进行加载，减少首次加载的时间。\n\n### 5、预加载：\n> 对于可能会在后续页面中使用到的资源（如下一页的CSS、JavaScript等），可以通过预加载机制提前加载这些资源，以减少后续页面的加载时间。\n\n### 6、DOM操作优化： \n> 减少不必要的DOM操作，尽量使用批处理和缓存DOM查询结果来提高性能。避免频繁的重排和重绘操作，可以使用CSS3动画代替JavaScript动画。\n\n### 7、使用Web Workers和Service Worker： \n> 将一些耗时的计算或网络请求任务放到Web Workers中进行并行处理，利用Service Worker实现离线缓存、消息推送等功能，提高应用的响应速度和离线体验。\n\n### 8、减少重定向和请求次数： \n> 避免不必要的重定向和请求，合理使用缓存、本地存储等技术来减少服务器请求次数。\n\n### 9、清理无用资源： \n>定期清理不再使用的资源，如未使用的JavaScript库、样式表和图片等，以减少应用的体积。\n\n### 10、性能监测和优化： \n> 使用工具对H5应用进行性能监测和分析，发现性能瓶颈，并针对性地进行优化，保持应用的高性能状态。\n\n### 11、使用SSR服务端渲染\n\n \n\n\n\n\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F2dd5c54711c1b1586ecc879243bf46ee.jpg",961,"2022-05-25T09:31:20.000Z","2026-05-25T04:31:30.000Z",{"id":66,"name":67,"slug":68},"5ed5cc62-43ea-49a2-b0b2-38bc7aae52a0","Vue3","vue3",{"id":27,"name":28,"avatar":18},[71],{"id":4,"name":5,"slug":5},{"id":73,"title":74,"slug":75,"content":76,"excerpt":74,"coverImage":77,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":78,"publishedAt":79,"createdAt":79,"updatedAt":80,"category":81,"author":82,"tags":83},"31c5fa65-e615-4f67-9259-ba931d906c88","JavaScript 常用数组操作方法","javascript-常用数组操作方法","\n\n## 一、concat()\n> 用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本\n```js\nvar arr1 = [1,2,3];\nvar arr2 = [4,5];\nvar arr3 = arr1.concat(arr2);\nconsole.log(arr1); \u002F\u002F[1, 2, 3]\nconsole.log(arr3); \u002F\u002F[1, 2, 3, 4, 5]\n```\n\n## 二、join()\n> 用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用','号分割，不改变原数组。\n```js\nvar arr = [2,3,4];\nconsole.log(arr.join());  \u002F\u002F2,3,4\nconsole.log(arr);  \u002F\u002F[2, 3, 4]\n```\n\n## 三、push()\n> 可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组。可以一次添加多个元素push(data1,data2....)\n```js\nvar a = [2,3,4];\nvar b = a.push(5);\nconsole.log(a);  \u002F\u002F[2,3,4,5]\nconsole.log(b);  \u002F\u002F4\n```\n\n## 四、pop()\n> 用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。\n```js\nvar arr = [2,3,4];\nconsole.log(arr.pop()); \u002F\u002F4\nconsole.log(arr);  \u002F\u002F[2,3]\n```\n\n## 五、shift()\n> 用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。\n```js\nvar arr = [2,3,4];\nconsole.log(arr.shift()); \u002F\u002F2\nconsole.log(arr);  \u002F\u002F[3,4]\n```\n\n## 六、unshift()\n> 可向数组的开头添加一个或更多元素，并返回新的长度。返回新长度，改变原数组。tip:该方法可以不传参数,不传参数就是不增加元素。\n```js\nvar arr = [2,3,4,5];\nconsole.log(arr.unshift(3,6)); \u002F\u002F6\nconsole.log(arr); \u002F\u002F[3, 6, 2, 3, 4, 5]\n```\n\n## 七、slice()\n> 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。返回选定的元素，该方法不会修改原数组。\n```js\nvar arr = [2,3,4,5];\nconsole.log(arr.slice(1,3));  \u002F\u002F[3,4]\nconsole.log(arr);  \u002F\u002F[2,3,4,5]\n```\n\n## 八、splice()\n> 可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改。\n```js\nvar arr = [2, 3, 4, 5];\nconsole.log(arr.splice(1, 3)); \u002F\u002F[3,4,5]\nconsole.log(arr); \u002F\u002F[2]\n```\n\n## 九、sort 排序\n> 按照 Unicode code 位置排序，默认升序\n```js\nvar fruit = ['cherries', 'apples', 'bananas'];\nfruit.sort(); \u002F\u002F ['apples', 'bananas', 'cherries']\n\nvar scores = [1, 10, 21, 2];\nscores.sort(); \u002F\u002F [1, 10, 2, 21]\n```\n\n## 十、reverse()\n> 用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。\n```js\nvar arr = [2,3,4];\nconsole.log(arr.reverse()); \u002F\u002F[4, 3, 2]\nconsole.log(arr);  \u002F\u002F[4, 3, 2]\n```\n\n## 十一、indexOf 和 lastIndexOf\n> 都接受两个参数：查找的值、查找起始位置不存在，返回 -1 ；存在，返回位置。\n```js\nvar arr = [2,3,4];\nconsole.log(arr.reverse()); \u002F\u002F[4, 3, 2]\nconsole.log(arr);  \u002F\u002F[4, 3, 2]\n```\n\n### indexOf\n> 是从前往后查找;\n```js\nvar a = [2, 9, 9];\na.indexOf(2); \u002F\u002F 0\na.indexOf(7); \u002F\u002F -1\n\nif (a.indexOf(7) === -1) {\n  \u002F\u002F element doesn't exist in array\n}\n```\n\n### lastIndexOf\n> 是从后往前查找;\n```js\nvar numbers = [2, 5, 9, 2];\nnumbers.lastIndexOf(2); \u002F\u002F 3\nnumbers.lastIndexOf(7); \u002F\u002F -1\nnumbers.lastIndexOf(2, 3); \u002F\u002F 3\nnumbers.lastIndexOf(2, 2); \u002F\u002F 0\nnumbers.lastIndexOf(2, -2); \u002F\u002F 0\nnumbers.lastIndexOf(2, -1); \u002F\u002F 3\n```\n\n## 十二、every\n> 对数组的每一项都运行给定的函数，每一项都返回 ture,则返回 true\n```js\nfunction isBigEnough(element, index, array) {\n  return element \u003C 10;\n}\n[2, 5, 8, 3, 4].every(isBigEnough);   \u002F\u002F true\n```\n\n## 十四、filter\n> 对数组的每一项都运行给定的函数，返回 结果为 ture 的项组成的数组\n```js\nvar words = [\\\"spray\\\", \\\"limit\\\", \\\"elite\\\", \\\"exuberant\\\", \\\"destruction\\\", \\\"present\\\", \\\"happy\\\"];\nvar longWords = words.filter((word)=>{\n  return word.length > 6;\n});\n\u002F\u002F Filtered array longWords is [\\\"exuberant\\\", \\\"destruction\\\", \\\"present\\\"]\n```\n\n## 十五、map\n> 对数组的每一项都运行给定的函数，返回每次函数调用的结果组成一个新数组\n```js\nvar numbers = [1, 5, 10, 15];\nvar doubles = numbers.map((x)=> {\n   return x * 2;\n});\n\u002F\u002F doubles is now [2, 10, 20, 30]\n\u002F\u002F numbers is still [1, 5, 10, 15]\n```\n\n## 十六、forEach 数组遍历\n\n```js\nconst items = ['item1', 'item2', 'item3'];\nconst copy = [];\nitems.forEach((item)=> {\n  copy.push(item);\n});\n```\n\n# ES6 新增新操作数组的方法\n\n## 1、find()\n> 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。\n```js\nconst arr = [1, \\\"2\\\", 3, 3, \\\"2\\\"]\nconsole.log(arr.find(n => typeof n === \\\"number\\\")) \u002F\u002F 1\n```\n\n## 2、findIndex()\n> 传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。\n```js\nconst arr = [1, \\\"2\\\", 3, 3, \\\"2\\\"]\nconsole.log(arr.findIndex(n => typeof n === \\\"number\\\")) \u002F\u002F 0\n```\n\n## 3、fill()\n> 用新元素替换掉数组内的元素，可以指定替换下标范围。\n```js\narr.fill(value, start, end)\n```\n\n## 4、copyWithin()\n> 选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。\n```js\narr.copyWithin(target, start, end)\nconst arr = [1, 2, 3, 4, 5]\nconsole.log(arr.copyWithin(3))\n \u002F\u002F [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2\nconst arr1 = [1, 2, 3, 4, 5]\nconsole.log(arr1.copyWithin(3, 1))\n\u002F\u002F [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3\nconst arr2 = [1, 2, 3, 4, 5]\nconsole.log(arr2.copyWithin(3, 1, 2))\n\u002F\u002F [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2\n```\n\n## 5、from\n> 将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组\n```js\nconst bar = [\\\"a\\\", \\\"b\\\", \\\"c\\\"];\nArray.from(bar);\n\u002F\u002F [\\\"a\\\", \\\"b\\\", \\\"c\\\"]\n\nArray.from('foo');\n\u002F\u002F [\\\"f\\\", \\\"o\\\", \\\"o\\\"]\n```\n## 6、of\n> 用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。\n```js\nArray() \u002F\u002F []\nArray(3) \u002F\u002F [, , ,]\nArray(3, 11, 8) \u002F\u002F [3, 11, 8]\nArray.of(7);       \u002F\u002F [7]\nArray.of(1, 2, 3); \u002F\u002F [1, 2, 3]\n\nArray(7);          \u002F\u002F [ , , , , , , ]\nArray(1, 2, 3);    \u002F\u002F [1, 2, 3]\n```\n\n## 7、entries() 返回迭代器：返回键值对\n\n```js\n\u002F\u002F数组\nconst arr = ['a', 'b', 'c'];\nfor (let v of arr.entries()) {\n  console.log(v);\n}\n\u002F\u002F [0, 'a'] [1, 'b'] [2, 'c']\n\n\u002F\u002FSet\nconst arr = new Set(['a', 'b', 'c']);\nfor (let v of arr.entries()) {\n  console.log(v);\n}\n\u002F\u002F ['a', 'a'] ['b', 'b'] ['c', 'c']\n\n\u002F\u002FMap\nconst arr = new Map();\narr.set('a', 'a');\narr.set('b', 'b');\nfor (let v of arr.entries()) {\n  console.log(v);\n}\n\u002F\u002F ['a', 'a'] ['b', 'b']\n```\n\n## 8、values() 返回迭代器：返回键值对的 value\n\n```js\n\u002F\u002F数组\nconst arr = ['a', 'b', 'c'];\nfor (let v of arr.values()) {\n  console.log(v);\n}\n\u002F\u002F'a' 'b' 'c'\n\n\u002F\u002FSet\nconst arr = new Set(['a', 'b', 'c']);\nfor (let v of arr.values()) {\n  console.log(v);\n}\n\u002F\u002F 'a' 'b' 'c'\n\n\u002F\u002FMap\nconst arr = new Map();\narr.set('a', 'a');\narr.set('b', 'b');\nfor (let v of arr.values()) {\n  console.log(v);\n}\n\u002F\u002F 'a' 'b'\n```\n\n## 9、keys() 返回迭代器：返回键值对的 key\n\n```js\n\u002F\u002F数组\nconst arr = ['a', 'b', 'c'];\nfor (let v of arr.keys()) {\n  console.log(v);\n}\n\u002F\u002F 0 1 2\n\n\u002F\u002FSet\nconst arr = new Set(['a', 'b', 'c']);\nfor (let v of arr.keys()) {\n  console.log(v);\n}\n\u002F\u002F 'a' 'b' 'c'\n\n\u002F\u002FMap\nconst arr = new Map();\narr.set('a', 'a');\narr.set('b', 'b');\nfor (let v of arr.keys()) {\n  console.log(v);\n}\n\u002F\u002F 'a' 'b'\n```\n\n## 10、includes\n> 判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。\n```js\nvar a = [1, 2, 3];\na.includes(2); \u002F\u002F true\na.includes(4); \u002F\u002F false\n```\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F9a2a13b13e4f629cf1240b2fad00a9b3.webp",761,"2022-05-24T02:22:25.000Z","2026-05-24T20:28:07.000Z",{"id":23,"name":24,"slug":25},{"id":27,"name":28,"avatar":18},[84],{"id":4,"name":5,"slug":5},5,1,10,{"categories":89,"tags":166,"postCount":347,"tagCount":348,"hotPosts":349},[90,97,103,110,116,120,123,127,134,138,142,147,153,158,160],{"id":91,"name":92,"slug":93,"description":94,"sortOrder":95,"createdAt":96,"updatedAt":96,"postCount":86},"e8d0bd45-d10c-46d3-8afb-0c072df7f8a7","技术","tech","技术文章",0,"2026-06-27T04:18:37.371Z",{"id":98,"name":99,"slug":100,"description":99,"sortOrder":86,"createdAt":101,"updatedAt":7,"postCount":102},"15ac46ad-edf7-4435-9a64-ff78117d58c5","Vue3 生态","vue3-生态","2022-05-21T08:05:39.000Z",6,{"id":104,"name":105,"slug":106,"description":105,"sortOrder":107,"createdAt":108,"updatedAt":7,"postCount":109},"11d4d397-685c-4180-a7b3-9b0e3a1e411e","Css","css",2,"2022-05-23T07:19:37.000Z",9,{"id":111,"name":112,"slug":112,"description":112,"sortOrder":113,"createdAt":114,"updatedAt":7,"postCount":115},"d10456a5-e649-4741-a38f-f07f266ce5f2","开发环境",3,"2022-05-24T01:52:41.000Z",13,{"id":66,"name":67,"slug":68,"description":67,"sortOrder":117,"createdAt":118,"updatedAt":7,"postCount":119},4,"2022-05-24T01:55:05.000Z",8,{"id":23,"name":24,"slug":25,"description":24,"sortOrder":85,"createdAt":121,"updatedAt":7,"postCount":122},"2022-05-24T02:22:57.000Z",18,{"id":124,"name":125,"slug":125,"description":125,"sortOrder":102,"createdAt":126,"updatedAt":7,"postCount":86},"d8cbe380-54b3-4a61-a12d-5438c2918574","限时优惠","2022-05-25T07:18:03.000Z",{"id":128,"name":129,"slug":130,"description":129,"sortOrder":131,"createdAt":132,"updatedAt":7,"postCount":133},"e0f3b8d8-cfe7-41fb-802b-a79699d95968","JavaScript插件","javascript插件",7,"2022-06-01T14:08:31.000Z",16,{"id":135,"name":136,"slug":136,"description":136,"sortOrder":119,"createdAt":137,"updatedAt":7,"postCount":102},"4ea3d8af-9cc3-49bb-a9cd-34dbcdc3bd85","构建工具","2022-06-02T07:28:13.000Z",{"id":139,"name":140,"slug":140,"description":140,"sortOrder":109,"createdAt":141,"updatedAt":7,"postCount":119},"9ed9827c-9cbb-42da-80e4-d04c7fdba886","开发工具","2022-06-21T03:35:05.000Z",{"id":143,"name":144,"slug":145,"description":144,"sortOrder":87,"createdAt":146,"updatedAt":7,"postCount":85},"6b9179c3-17b2-43ff-a431-a03d6eb32d89","Vue2 生态","vue2-生态","2022-07-16T13:14:29.000Z",{"id":148,"name":149,"slug":150,"description":149,"sortOrder":151,"createdAt":152,"updatedAt":7,"postCount":85},"73a5f62c-3c47-45b9-9ae2-f29953ae8dc0","Node","node",11,"2022-07-16T13:15:39.000Z",{"id":154,"name":155,"slug":155,"description":155,"sortOrder":156,"createdAt":157,"updatedAt":7,"postCount":107},"2b696c16-48ef-403b-a88b-6e57cfc79596","开发问题",12,"2022-07-16T14:06:54.000Z",{"id":40,"name":41,"slug":41,"description":41,"sortOrder":115,"createdAt":159,"updatedAt":7,"postCount":86},"2022-07-16T14:22:34.000Z",{"id":161,"name":162,"slug":163,"description":162,"sortOrder":164,"createdAt":165,"updatedAt":7,"postCount":113},"a629c1f7-29f1-439e-be3c-29670b17ba20","Vue2","vue2",15,"2022-07-16T14:41:51.000Z",[167,173,178,181,186,191,195,199,204,209,214,218,221,226,230,234,239,244,249,254,258,262,266,268,272,277,282,285,288,291,294,297,301,304,306,308,311,315,316,320,324,327,330,332,335,337,341,344],{"id":168,"name":169,"slug":170,"createdAt":171,"updatedAt":172},"076bd8b9-293e-45cb-9dc3-e162007ca474","Axios","axios","2022-06-05T07:41:56.000Z","2025-12-30T07:26:21.000Z",{"id":174,"name":175,"slug":176,"createdAt":177,"updatedAt":7},"2aa7f6d0-1fac-4ed1-b9bb-f3afc813f42c","Axure","axure","2022-06-21T03:35:15.000Z",{"id":179,"name":105,"slug":106,"createdAt":180,"updatedAt":7},"b084ddd8-09be-4e57-98f0-cf4e376aecd7","2022-05-21T09:59:55.000Z",{"id":182,"name":183,"slug":184,"createdAt":185,"updatedAt":7},"78a62bff-ff77-4878-8c25-3e6aae18c668","Docker","docker","2022-07-16T14:34:37.000Z",{"id":187,"name":188,"slug":189,"createdAt":190,"updatedAt":7},"2de16806-ef3f-4e54-a259-d1e1e182468c","Git","git","2022-07-16T14:25:15.000Z",{"id":192,"name":193,"slug":194,"createdAt":180,"updatedAt":7},"994cc226-578b-4a72-a57e-a47a63d2793e","JavaScript生态","javascript生态",{"id":196,"name":197,"slug":198,"createdAt":180,"updatedAt":7},"5086e93c-23b9-43d3-9643-cc87f0e9ee94","JenKins","jenkins",{"id":200,"name":201,"slug":202,"createdAt":203,"updatedAt":7},"b73007a8-bb5c-42a8-9fd9-163033a5b45d","Linux","linux","2022-07-16T14:40:17.000Z",{"id":205,"name":206,"slug":207,"createdAt":208,"updatedAt":7},"0b658b92-dd6b-4db3-a398-9f6d69950a02","Markdown","markdown","2022-07-16T14:39:25.000Z",{"id":210,"name":211,"slug":212,"createdAt":213,"updatedAt":7},"ab034d3a-6e5b-4db5-a2dc-faf4ccbb63f5","Nest","nest","2022-07-16T13:15:49.000Z",{"id":215,"name":216,"slug":217,"createdAt":6,"updatedAt":7},"52c41978-da06-4962-9636-45bbaeedda80","Nginx","nginx",{"id":219,"name":220,"slug":220,"createdAt":6,"updatedAt":7},"0f1cc678-40e4-44b1-b2cf-a6fd8a1c867a","npm",{"id":222,"name":223,"slug":224,"createdAt":225,"updatedAt":7},"a4370d78-70e1-4073-a8f6-3dc5d81fd8fd","Nuxt","nuxt","2022-06-01T13:07:07.000Z",{"id":227,"name":228,"slug":229,"createdAt":180,"updatedAt":7},"d232e01f-048e-4151-8a0a-fff9561f946f","Pinia","pinia",{"id":231,"name":232,"slug":233,"createdAt":6,"updatedAt":7},"14e9ab02-b0bb-4c85-8604-fe6f1f0f33cd","Pnpm","pnpm",{"id":235,"name":236,"slug":237,"createdAt":238,"updatedAt":238},"399d1d38-cc0d-43ce-8baf-c769447a2ebd","React生态","react生态","2023-02-21T02:03:09.000Z",{"id":240,"name":241,"slug":242,"createdAt":243,"updatedAt":7},"c95bbe84-bdd0-410a-86a9-e87958c55f4f","Redis","redis","2022-10-05T05:14:14.000Z",{"id":245,"name":246,"slug":247,"createdAt":248,"updatedAt":7},"6d05f9df-e116-450f-af57-85ed710c4870","Swiper","swiper","2022-06-01T14:08:46.000Z",{"id":250,"name":251,"slug":252,"createdAt":253,"updatedAt":7},"66f3aeb0-84ef-45f6-a43a-944eefc9895a","Vite","vite","2022-06-02T07:28:24.000Z",{"id":255,"name":256,"slug":257,"createdAt":180,"updatedAt":7},"bf5b94d3-090b-4098-a03c-4bc69781fb2d","Vue","vue",{"id":259,"name":260,"slug":261,"createdAt":6,"updatedAt":7},"2f7fb1be-b9c5-4606-b54f-e9f66f2653b2","Vue-Router","vue-router",{"id":263,"name":264,"slug":265,"createdAt":180,"updatedAt":7},"2fef3b91-1c1c-4ae8-b2c1-0e04b4f9b3a2","Vue2生态","vue2生态",{"id":267,"name":67,"slug":68,"createdAt":180,"updatedAt":7},"62b94c93-724f-488d-8fc5-0449971d9204",{"id":269,"name":270,"slug":271,"createdAt":180,"updatedAt":7},"20bff9cd-7848-4c16-8775-42cf12b44b30","Vue3生态","vue3生态",{"id":273,"name":274,"slug":275,"createdAt":276,"updatedAt":7},"c807b2c6-cb12-4409-a1f1-6bea9f330a6b","Vuex","vuex","2022-07-16T13:14:59.000Z",{"id":278,"name":279,"slug":280,"createdAt":281,"updatedAt":7},"5782dff5-2ea2-4427-9696-d4363a7fd5bc","Webpack","webpack","2022-07-16T14:33:41.000Z",{"id":283,"name":284,"slug":284,"createdAt":180,"updatedAt":7},"d0aa41f4-68f8-48d4-a4ed-3a503ea90451","下载",{"id":286,"name":287,"slug":287,"createdAt":180,"updatedAt":7},"a046060c-39ef-474a-8c85-2546aca0e2e5","代码片段",{"id":289,"name":290,"slug":290,"createdAt":180,"updatedAt":7},"fee73435-b2be-4b55-85b1-d133ea96aea4","伪元素",{"id":292,"name":293,"slug":293,"createdAt":180,"updatedAt":7},"436bd369-8c57-4869-8827-e88e50e5e0ab","伪类",{"id":295,"name":296,"slug":296,"createdAt":180,"updatedAt":7},"4c6be544-8a00-4445-92a3-e3dcbaf6142e","动画",{"id":298,"name":299,"slug":299,"createdAt":300,"updatedAt":7},"9321a12e-ea72-49a9-a32d-5566149f812f","图片压缩","2022-08-02T00:37:47.000Z",{"id":302,"name":303,"slug":303,"createdAt":6,"updatedAt":7},"512b16fb-576a-4397-a7c5-dd20e6a8f9ca","布局",{"id":305,"name":140,"slug":140,"createdAt":180,"updatedAt":7},"f32faa96-f2ec-45c6-9a17-2c76062edcb0",{"id":307,"name":112,"slug":112,"createdAt":180,"updatedAt":7},"3c46ed3f-6d6b-4f91-bcb3-af5112860bf5",{"id":309,"name":310,"slug":310,"createdAt":180,"updatedAt":7},"dbfc086a-73a6-4560-814d-593acb61cf98","性能优化",{"id":312,"name":313,"slug":313,"createdAt":314,"updatedAt":7},"1831cd06-0d6b-48f7-94fa-324782fe23cb","拖拽","2022-07-28T12:39:13.000Z",{"id":4,"name":5,"slug":5,"createdAt":6,"updatedAt":7},{"id":317,"name":318,"slug":318,"createdAt":319,"updatedAt":7},"19ac8998-7e0a-459b-9702-bb1adca70e8c","文本复制","2022-07-17T01:54:45.000Z",{"id":321,"name":322,"slug":322,"createdAt":323,"updatedAt":7},"5ff33473-71a4-4e02-8c82-f9ea369a768f","时间","2022-07-17T01:51:12.000Z",{"id":325,"name":326,"slug":326,"createdAt":180,"updatedAt":7},"aa47ca4d-d3f6-4cac-b495-2c67c9592c36","最新优惠",{"id":328,"name":329,"slug":329,"createdAt":6,"updatedAt":7},"f6766d54-54fc-405e-932d-b7d550559125","服务器",{"id":331,"name":136,"slug":136,"createdAt":180,"updatedAt":7},"d856559a-03ff-40b4-980d-3f272b998c3c",{"id":333,"name":334,"slug":334,"createdAt":180,"updatedAt":7},"692d5d68-b188-4e5c-aca8-65d0229399a1","渐变",{"id":336,"name":41,"slug":41,"createdAt":180,"updatedAt":7},"38e1fd6b-d7c6-4d62-bf70-7bacc175bea9",{"id":338,"name":339,"slug":339,"createdAt":340,"updatedAt":7},"be7b10bc-49eb-4a03-bea7-ceb915d500fe","规范","2022-07-16T14:41:06.000Z",{"id":342,"name":343,"slug":343,"createdAt":6,"updatedAt":7},"b42e2916-ad62-4b8a-a863-cd8c19a829de","面试",{"id":345,"name":346,"slug":346,"createdAt":6,"updatedAt":7},"7069add9-b636-44f1-9cd4-ea3a6d2b85d3","面试题",104,48,[350,362,374,387,400],{"id":351,"title":352,"slug":352,"content":353,"excerpt":352,"coverImage":354,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":355,"publishedAt":356,"createdAt":356,"updatedAt":357,"category":358,"author":359,"tags":360},"a1bd1f49-6f6d-4fea-9789-b5636e19a6b3","uni-app瀑布流","## 实现思路\n> 获取父组件的列表数组，watch监听数组长度变化，截取后面新的数据，创建两个左右数组，比较左右dom的长度，哪个短，就push一条数据进去，源数组删除一条数据。利用img的load（加载成功）和error方法（加载失败），触发数组的push，实现瀑布流\n\n## 代码实现\n\n```language\n\u003Ctemplate>\n    \u003Cview class=\\\"waterfall\\\">\n        \u003Cview class=\\\"waterfall_left\\\">\n            \u003Cview class=\\\"waterfall_list\\\" v-for=\\\"(item, index) in leftList\\\" :key=\\\"index\\\">\n                \u003CSearch\n                    :name=\\\"item.name\\\"\n                    :image=\\\"item.src\\\"\n                    :label=\\\"item.label\\\"\n                    :item=\\\"item\\\"\n                    @considerPush=\\\"considerPush\\\"\n                >\n                \u003C\u002FSearch>\n            \u003C\u002Fview>\n        \u003C\u002Fview>\n        \u003Cview class=\\\"waterfall_right\\\">\n            \u003Cview class=\\\"waterfall_list\\\" v-for=\\\"(item, index) in rightList\\\" :key=\\\"index\\\">\n                \u003CSearch\n                    :name=\\\"item.name\\\"\n                    :image=\\\"item.src\\\"\n                    :label=\\\"item.label\\\"\n                    :item=\\\"item\\\"\n                    @considerPush=\\\"considerPush\\\"\n                >\n                \u003C\u002FSearch>\n            \u003C\u002Fview>\n        \u003C\u002Fview>\n    \u003C\u002Fview>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport Search from '@\u002Fcomponents\u002Fsearch\u002Fsearch.vue';\nexport default {\n    components: { Search },\n    props: {\n        list: {\n            type: Array,\n            default: () => []\n        }\n    },\n    data() {\n        return {\n            \u002F\u002F 左侧列表\n            leftList: [],\n            \u002F\u002F 右侧列表\n            rightList: [],\n            \u002F\u002F 组件数据备份\n            newList: [],\n            \u002F\u002F默认请求数,主要为了正常排序\n            interceptNumber: 10\n        };\n    },\n    created() {\n        this.touchOff(); \u002F\u002F 触发排列\n    },\n    mounted() {},\n    watch: {\n        list(newValue, oldValue) {\n            this.interceptNumber = newValue.length - oldValue.length;\n            this.touchOff();\n        }\n    },\n    computed: {},\n    methods: {\n        \u002F\u002F 触发重新排列\n        touchOff() {\n            this.newList = [...this.list.slice(-this.interceptNumber)];\n            if (this.newList.length !== 0) {\n                this.leftList.push(this.newList.shift()); \u002F\u002F触发排列\n            }\n        },\n        \u002F\u002F 计算排列\n        considerPush() {\n            this.$nextTick(() => {\n                if (this.newList.length == 0) return; \u002F\u002F没有数据了\n                let leftH = 0;\n                let rightH = 0; \u002F\u002F左右高度\n                let query = uni.createSelectorQuery().in(this);\n                query.selectAll('.waterfall_left').boundingClientRect();\n                query.selectAll('.waterfall_right').boundingClientRect();\n                query.exec(res => {\n                    leftH = res[0].length != 0 ? res[0][0].height : 0; \u002F\u002F防止查询不到做个处理\n                    rightH = res[1].length != 0 ? res[1][0].height : 0;\n                    if (leftH == rightH || leftH \u003C rightH) {\n                        \u002F\u002F 相等 || 左边小\n                        this.leftList.push(this.newList.shift());\n                    } else {\n                        \u002F\u002F 右边小\n                        this.rightList.push(this.newList.shift());\n                    }\n\n                    \u002F\u002F console.log('左右高度：', leftH, rightH, leftH == rightH || leftH \u003C rightH);\n                });\n            });\n        }\n    }\n};\n\u003C\u002Fscript>\n\n\u003Cstyle scoped lang=\\\"scss\\\">\n.waterfall {\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    .waterfall_left {\n        flex: 1;\n    }\n\n    .waterfall_right {\n        flex: 1;\n    }\n}\n\u003C\u002Fstyle>\n\n```\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F7d4fa8d1d2775177b882a4656e3a5ed5.png",1817,"2022-11-22T07:54:41.000Z","2026-06-26T10:25:05.932Z",{"id":23,"name":24,"slug":25},{"id":27,"name":28,"avatar":18},[361],{"id":192,"name":193,"slug":194},{"id":363,"title":364,"slug":364,"content":365,"excerpt":364,"coverImage":366,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":367,"publishedAt":368,"createdAt":368,"updatedAt":369,"category":370,"author":371,"tags":372},"b2c46bf6-d971-4cce-b21b-052dbea8e8a2","v-html使用img点击实现放大效果","## 代码实现\n```js\n\u002F**\n * JS获取html代码中所有的图片地址\n * @param htmlstr\n * @returns arr 数组\n *\u002F\n\nexport function getimgsrc(htmlstr) {\n    let reg = \u002F\u003Cimg.+?src=('|\\\")?([^'\\\"]+)('|\\\")?(?:\\s+|>)\u002Fg;\n    let arr = [];\n    let tem = 0;\n    \u002F\u002Feslint-disable-next-line\n    while ((tem = reg.exec(htmlstr))) {\n        arr.push(tem[2]); \u002F\u002F eslint-disable-line\n    }\n\n    return arr;\n}\n\n```\n\n\n\n```vue\n\u003Ctemplate>\n    \u003Cdiv class=\\\"image-expansion\\\" :class=\\\"classArr\\\">\n        \u003Cdiv @click.stop=\\\"hanldeImage($event)\\\" v-html=\\\"formatHtmlData\\\">\u003C\u002Fdiv>\n\n        \u003Cel-image-viewer\n            v-if=\\\"imgPreviewUrl\\\"\n            :initial-index=\\\"subscript\\\"\n            :src=\\\"imgPreviewUrl\\\"\n            :on-close=\\\"closeViewer\\\"\n            :url-list=\\\"imgList\\\"\n        >\u003C\u002Fel-image-viewer>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { getimgsrc } from '..\u002F..\u002Futils\u002Fgetimgsrc';\nimport ElImageViewer from 'element-ui\u002Fpackages\u002Fimage\u002Fsrc\u002Fimage-viewer';\nexport default {\n    components: {\n        ElImageViewer\n    },\n    props: {\n        htmlData: {\n            type: String,\n            default: () => {\n                return '';\n            }\n        },\n        classArr: {\n            type: Array,\n            default: () => {\n                return ['min'];\n            }\n        },\n\n        isArticle: {\n            type: Boolean,\n            default: () => {\n                return false;\n            }\n        }\n    },\n    data() {\n        return {\n            imgList: [],\n            formatHtmlData: '',\n            imgPreviewUrl: '',\n            subscript: 0\n        };\n    },\n    computed: {},\n\n    watch: {\n        \u002F\u002F监听数据，防止数据不更新\n        htmlData: {\n            handler(newName, oldName) {\n                \u002F\u002F判断是否为文章\n                if (this.isArticle) {\n                    newName ? (this.formatHtmlData = newName.replace(\u002F(\u003C([^>]+)>)\u002Fgi, '').replace(\u002F[\\\r\\\n]\u002Fg, '')) : '';\n                } else {\n                    \u002F\u002F剔除strong和p标签\n                    newName ? (this.formatHtmlData = newName.replace(\u002F(\u003C\\\u002F?strong.*?>)|(\u003C\\\u002F?p.*?>)\u002Fg, '')) : '';\n\n                    \u002F\u002F获取html全部图片，push成图片数组\n                    this.imgList = Object.values(getimgsrc(this.formatHtmlData));\n                    \u002F\u002F获取图片下标\n                    let subscript = this.imgList.indexOf(this.imgPreviewUrl);\n                    this.subscript = subscript > -1 ? subscript : 0;\n                }\n            },\n\n            immediate: true\n        }\n    },\n\n    mounted() {},\n\n    methods: {\n        \u002F\u002F监听点击事件\n        hanldeImage(event) {\n            if (event.target.nodeName === 'IMG' || event.target.nodeName === 'img') {\n                \u002F\u002F获取点击的图片url,decodeURIComponent转码一下，防禁url转码\n                this.imgPreviewUrl = decodeURIComponent(event.target.currentSrc);\n\n                \u002F\u002F获取图片下标\n                let subscript = this.imgList.indexOf(this.imgPreviewUrl);\n                this.subscript = subscript > -1 ? subscript : 0;\n\n                \u002F\u002F禁止遮罩层后面的内容滚动\n                document.documentElement.style.overflowY = 'hidden';\n            } else {\n                this.$emit('goDetail');\n            }\n        },\n\n        \u002F\u002F关闭弹框\n        closeViewer() {\n            this.imgPreviewUrl = '';\n            \u002F\u002F恢复遮罩层后面的内容滚动\n            document.documentElement.style.overflowY = 'auto';\n        }\n    }\n};\n\u003C\u002Fscript>\n\n\u003Cstyle lang=\\\"scss\\\" scoped>\n.image-expansion {\n}\n\n.min {\n    \u002Fdeep\u002F img {\n        cursor: pointer;\n        height: 28px;\n        padding: 0 10px 3px;\n    }\n}\n\n.max {\n    \u002Fdeep\u002F img {\n        cursor: pointer;\n    }\n}\n\n.class1 {\n    \u002Fdeep\u002F div {\n        font-size: 15px;\n        font-family: Microsoft YaHei;\n        font-weight: 400;\n        color: #888888;\n        line-height: 30px;\n    }\n}\n\u003C\u002Fstyle>\n\n\n```\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002Fc77c3fb113d1ab2f67e7afba1ca33b95.png",1571,"2023-01-10T07:22:29.000Z","2026-06-26T10:25:07.650Z",{"id":143,"name":144,"slug":145},{"id":27,"name":28,"avatar":18},[373],{"id":298,"name":299,"slug":299},{"id":375,"title":376,"slug":377,"content":378,"excerpt":376,"coverImage":379,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":380,"publishedAt":381,"createdAt":381,"updatedAt":382,"category":383,"author":384,"tags":385},"9f33b49b-0785-4404-9a4e-d85937e7fc92","在 vue3 中优雅的使用 jsx\u002Ftsx","在-vue3-中优雅的使用-jsx-tsx","## 安装插件（@vitejs\u002Fplugin-vue-jsx）\n```shell\npnpm add @vitejs\u002Fplugin-vue-jsx -D\n```\n\n## 配置vite.config.ts\n```ts\nimport vueJsx from \\\"@vitejs\u002Fplugin-vue-jsx\\\";\n\nexport default defineConfig({\n  plugins: [\n    vueJsx(),\n  ]\n})\n```\n\n## 插值\n```language\n\u002F\u002F vue3模板语法\n\u003Cspan>{{ a + b }}\u003C\u002Fspan>\n\n\u002F\u002F jsx\u002Ftsx\n\u003Cspan>{ a + b }\u003C\u002Fspan>\n```\n\n\n## class与style 绑定\n\n```ts\n\u002F\u002F 模板字符串\n\u003Cdiv className={`header ${ isBg ? 'headerBg' : '' }`}>header\u003C\u002Fdiv>\n\u002F\u002F数组\n\u003Cdiv class={ [ 'header', isBg && 'headerBg' ] } >header\u003C\u002Fdiv>\n```\n\n```ts\nconst color = 'red'\nconst element = \u003Csapn style={{ color, fontSize: '16px' }}>style\u003C\u002Fsapn>\n```\n\n## 条件渲染\n\n```ts\n   setup() {\n       const isShow = false\n       const element = () => {\n           if (isShow) {\n               return \u003Cspan>我是if\u003C\u002Fspan>\n           } else {\n               return \u003Cspan>我是else\u003C\u002Fspan>\n           }\n       }\n       return () => (\n           \u003Cdiv>\n               \u003Cspan v-show={isShow}>我是v-show\u003C\u002Fspan>\n               {\n                   element()\n               }\n               {\n                   isShow ? \u003Cp>我是三目1\u003C\u002Fp> : \u003Cp>我是三目2\u003C\u002Fp>\n               }\n           \u003Cdiv>\n       )\n   }\n```\n\n## 列表渲染\n```language\nsetup() {\n   const listData = [\n       {name: 'Tom', age: 18},\n       {name: 'Jim', age: 20},\n       {name: 'Lucy', age: 16}\n   ]\n   return () => (\n       \u003Cdiv>\n           \u003Cdiv class={'box'}>\n               \u003Cspan>姓名\u003C\u002Fspan>\n               \u003Cspan>年龄\u003C\u002Fspan>\n           \u003C\u002Fdiv>\n           {\n               prop.listData.map(item => {\n                   return \u003Cdiv class={'box'}>\n                       \u003Cspan>{item.name}\u003C\u002Fspan>\n                       \u003Cspan>{item.age}\u003C\u002Fspan>\n                   \u003C\u002Fdiv>\n               })\n           }\n       \u003C\u002Fdiv>\n   )\n}\n\n```\n\n## 事件处理\n\n```language\nsetup() {\n    const clickBox = val => {\n        console.log(val)\n    }\n    return () => (\n        \u003Cdiv class={'box1'} onClick={() => clickBox('box1')}>\n            \u003Cspan>我是box1\u003C\u002Fspan>\n            \u003Cdiv class={'box2'} onClick={() => clickBox('box2')}>\n                \u003Cspan>我是box2\u003C\u002Fspan>\n                \u003Cdiv class={'box3'} onClick={withModifiers(() => clickBox('box3'), ['stop'])}>我是box3\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    )\n}\n```\n\n## v-model\n\n```ts\n\u002F\u002F 正常写法\n\u003Cinput v-model=\\\"value\\\" \u002F> \u002F\u002F vue\n\u003Cinput v-model={value} \u002F> \u002F\u002F jsx\n\n\u002F\u002F 指定绑定值写法\n\u003Cinput v-model:modelValue=\\\"value\\\" \u002F> \u002F\u002F vue\n\u003Cinput v-model={[value,'modelValue']} \u002F> \u002F\u002F jsx\n\n\u002F\u002F 修饰符写法\n\u003Cinput v-model:modelValue.trim=\\\"value\\\" \u002F> \u002F\u002F vue\n\u003Cinput v-model={[value,'modelValue',['trim']]} \u002F> \u002F\u002F jsx\n```\n\n## slot插槽\n\n### 定义插槽\n```ts\nimport { renderSlot } from \\\"vue\\\"\nexport default defineComponent({\n    \u002F\u002F 从ctx中解构出来 slots\n    setup(props, { slots }) {\n        return () => (\n            \u003Cdiv>\n                { renderSlot(slots, 'default') }\n                { slots.title?.() }\n            \u003C\u002Fdiv>\n        )\n    }\n})\n\n```\n\n### 使用插槽\n\n```ts\nimport Vslot from '.\u002FslotTem'\nexport default defineComponent({\n    setup() {\n        return () => (\n            \u003Cdiv class={'box'}>\n                \u003CVslot v-slots={{\n                    title: () => {\n                        return \u003Cp>我是title插槽\u003C\u002Fp>\n                    },\n                    default: () => {\n                        return \u003Cp>我是default插槽\u003C\u002Fp>\n                    }\n                }} \u002F>\n            \u003C\u002Fdiv>\n        )\n    }\n})\n\n```\n\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F3e4cb0d3df611ee3f57b8ed503e1015e.png",1391,"2023-04-19T09:23:27.000Z","2026-06-26T09:54:47.369Z",{"id":66,"name":67,"slug":68},{"id":27,"name":28,"avatar":18},[386],{"id":267,"name":67,"slug":68},{"id":388,"title":389,"slug":390,"content":391,"excerpt":389,"coverImage":392,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":393,"publishedAt":394,"createdAt":394,"updatedAt":395,"category":396,"author":397,"tags":398},"1dcdd755-0e46-45a3-8998-9a213fd3fcd5","Vue3 导入导出Excel","vue3-导入导出excel","## 安装\n```shell\npnpm add -S XLSX\n```\n\n\n## 方法封装\n```js\nimport * as XLSX from 'xlsx';\n\n\u002F\u002F参数说明\n\u002F\u002Fconfiguration: {\n\u002F\u002F  data: [], \u002F\u002F 导出的数据\n\u002F\u002F  head: {}, \u002F\u002F 导出的数据对应的表头\n\u002F\u002F  name: '', \u002F\u002F 导出的文件名\n\u002F\u002F  label: '', \u002F\u002F 导出的表单名\n\u002F\u002F  widthArr: [], \u002F\u002F 导出的表单列宽\n\u002F\u002F}\n\n\u002F\u002F 导出excel\nexport const ExportXlsx = (configuration) => {\n  const { data, head, name, label, widthArr } = configuration;\n\n  const list = data.map((item) => {\n    const obj = {};\n    for (const k in item) {\n      if (head[k]) {\n        obj[head[k]] = item[k];\n      }\n    }\n    return obj;\n  });\n\n  \u002F\u002F 创建工作表\n  const xLSXData = XLSX.utils.json_to_sheet(list);\n  \u002F\u002F 创建工作簿\n  const wb = XLSX.utils.book_new();\n  \u002F\u002F 将工作表放入工作簿中\n  XLSX.utils.book_append_sheet(wb, xLSXData, label);\n  xLSXData['!cols'] = [];\n  \u002F\u002F 设置列宽\n  widthArr.forEach((item) => {\n    xLSXData['!cols'].push({ wpx: item });\n  });\n\n  \u002F\u002F 生成文件并下载\n  XLSX.writeFile(wb, `${name}.xlsx`);\n};\n\n\u002F\u002F 导入excel\nexport const ImportXlsx = (e) => {\n  const file = e.target.files[0];\n  const reader = new FileReader();\n  reader.readAsArrayBuffer(file);\n  reader.onload = (e) => {\n    const data = e.target.result;\n    const workbook = XLSX.read(data, { type: 'binary', cellDates: true });\n    const wsname = workbook.SheetNames[0];\n    const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);\n    console.log(outdata);\n  };\n};\n\n```\n","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F80231a326d3846b895a7d46c99e738ce.png",1334,"2023-03-14T06:18:59.000Z","2026-06-26T09:54:47.798Z",{"id":23,"name":24,"slug":25},{"id":27,"name":28,"avatar":18},[399],{"id":192,"name":193,"slug":194},{"id":401,"title":402,"slug":403,"content":404,"excerpt":402,"coverImage":405,"status":16,"isPinned":17,"pinnedAt":18,"viewCount":406,"publishedAt":407,"createdAt":407,"updatedAt":408,"category":409,"author":413,"tags":414},"80920598-a452-4357-bf53-842b200560e8","React18入门到精通教程","react18入门到精通教程","\n## JSX实现列表渲染\n> 使用`map()`方法遍历数组，必须添加`key`属性提高性能\n```jsx\nconst songs = [\n  { id: 1, name: \\\"helo1\\\" },\n  { id: 2, name: \\\"helo2\\\" },\n  { id: 3, name: \\\"helo3\\\" },\n];\n\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003Cul>\n        {songs.map((song) => (\n          \u002F\u002F 关键：添加唯一key标识符（避免使用索引）\n          \u003Cli key={song.id}>  \n            {song.id}-{song.name}\n          \u003C\u002Fli>\n        ))}\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**最佳实践：**\n1. 使用`\u003Cul>`包裹列表项\n2. `key`应使用稳定唯一标识（如ID），避免数组索引\n3. 空列表处理：`{songs.length > 0 && ...}` 或 `{songs.map(...) || \u003CEmptyView\u002F>}`\n\n## JSX实现条件渲染\n### 简单逻辑\n```jsx\n\u002F\u002F 三元表达式\n{isLoggedIn ? \u003CDashboard \u002F> : \u003CLoginForm \u002F>}\n\n\u002F\u002F 逻辑短路\n{hasNotification && \u003CNotificationBadge count={5} \u002F>}\n\n\u002F\u002F 空值处理\n{userProfile?.avatar || \u003CDefaultAvatar \u002F>}\n```\n\n### 复杂逻辑\n```jsx\nconst renderContent = (type) => {\n  switch(type) {\n    case 'success': \n      return \u003CSuccessAlert \u002F>;\n    case 'error':\n      return \u003CErrorAlert \u002F>;\n    default:\n      return \u003CInfoAlert \u002F>;\n  }\n}\n\nfunction App() {\n  return (\n    \u003Cdiv className=\\\"container\\\">\n      {renderContent(status)}\n      \n      {\u002F* 另一种模式：立即执行函数 *\u002F}\n      {(() => {\n        if (isLoading) return \u003CSpinner \u002F>;\n        if (isEmpty) return \u003CEmptyState \u002F>;\n        return \u003CDataTable \u002F>;\n      })()}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## JSX样式处理\n### 行内样式\n```jsx\n\u002F\u002F 直接对象\n\u003Cdiv style={{ \n  color: 'white', \n  backgroundColor: 'teal',\n  padding: '1rem'\n}}>\n\n\u002F\u002F 样式对象复用\nconst alertStyle = {\n  padding: '15px',\n  borderRadius: '4px',\n  margin: '10px 0'\n};\n\nfunction Alert({ type }) {\n  return (\n    \u003Cdiv style={{\n      ...alertStyle,  \u002F\u002F 扩展运算符合并样式\n      background: type === 'error' ? '#f8d7da' : '#d4edda'\n    }}>\n      {message}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### 类名控制（推荐）\n```css\n\u002F* styles.module.css *\u002F\n.card {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.highlight {\n  background-color: #ffffe0;\n}\n```\n\n```jsx\nimport styles from '.\u002Fstyles.module.css';\n\nfunction ProductCard({ featured }) {\n  return (\n    \u003Cdiv className={`${styles.card} ${featured ? styles.highlight : ''}`}>\n      {\u002F* 内容 *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## React 18新特性\n### 并发模式（Concurrent Mode）\n```jsx\nimport { startTransition } from 'react';\n\n\u002F\u002F 非紧急状态更新\nfunction handleSearch(query) {\n  startTransition(() => {\n    setSearchQuery(query); \u002F\u002F 可中断的渲染\n  });\n}\n```\n\n### 自动批处理（Automatic Batching）\n```jsx\n\u002F\u002F React 17及之前：两次渲染\n\u002F\u002F React 18：自动批处理，一次渲染\nfunction handleClick() {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n}\n```\n\n## Redux状态管理（现代写法）\n### 安装依赖\n```bash\nnpm install @reduxjs\u002Ftoolkit react-redux\n```\n\n### 创建Store\n```js\n\u002F\u002F store.js\nimport { configureStore, createSlice } from '@reduxjs\u002Ftoolkit';\n\nconst counterSlice = createSlice({\n  name: 'counter',\n  initialState: { value: 0 },\n  reducers: {\n    increment: state => { state.value += 1 },\n    decrement: state => { state.value -= 1 },\n    incrementByAmount: (state, action) => {\n      state.value += action.payload\n    }\n  }\n});\n\n\u002F\u002F 异步操作示例\nexport const fetchUserData = () => async (dispatch) => {\n  const response = await fetch('\u002Fapi\u002Fuser');\n  dispatch(setUser(await response.json()));\n};\n\nexport const store = configureStore({\n  reducer: {\n    counter: counterSlice.reducer,\n    \u002F\u002F 其他reducer...\n  }\n});\n\nexport const { increment, decrement } = counterSlice.actions;\n```\n\n### 组件集成\n```jsx\n\u002F\u002F index.js\nimport { Provider } from 'react-redux';\nimport { store } from '.\u002Fstore';\n\nroot.render(\n  \u003CProvider store={store}>\n    \u003CApp \u002F>\n  \u003C\u002FProvider>\n);\n\n\u002F\u002F Counter.js\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment, decrement } from '.\u002Fstore';\n\nfunction Counter() {\n  const count = useSelector(state => state.counter.value);\n  const dispatch = useDispatch();\n\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => dispatch(decrement())}>-\u003C\u002Fbutton>\n      \u003Cspan>{count}\u003C\u002Fspan>\n      \u003Cbutton onClick={() => dispatch(increment())}>+\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## 最佳实践总结\n1. **组件设计**：遵循单一职责原则，拆分智能组件（容器组件）和展示组件\n2. **状态管理**：\n   - 局部状态用`useState`\u002F`useReducer`\n   - 全局共享状态用Redux\n   - 避免过度使用状态提升\n3. **性能优化**：\n   - 使用`React.memo`记忆组件\n   - 使用`useCallback`\u002F`useMemo`避免不必要的重渲染\n   - 虚拟化长列表（react-window）\n4. **Hooks规范**：\n   - 避免在循环\u002F条件中使用Hook\n   - 自定义Hook以`use`前缀命名\n5. **TypeScript集成**：\n   ```tsx\n   interface UserCardProps {\n     name: string;\n     age: number;\n     onSelect: (id: string) => void;\n   }\n   \n   const UserCard: React.FC\u003CUserCardProps> = ({ name, age }) => (\n     \u003Cdiv>{name} ({age})\u003C\u002Fdiv>\n   )\n   ```\n\n下面为您完善教程，增加React路由和生命周期相关内容：\n\n## React路由管理（React Router v6）\n\n### 安装与基础配置\n```bash\nnpm install react-router-dom@6\n```\n\n### 路由基础结构\n```jsx\n\u002F\u002F index.js\nimport { BrowserRouter } from 'react-router-dom';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \u003CBrowserRouter>\n    \u003CApp \u002F>\n  \u003C\u002FBrowserRouter>\n);\n\n\u002F\u002F App.js\nimport { Routes, Route, Link } from 'react-router-dom';\n\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003Cnav>\n        \u003CLink to=\\\"\u002F\\\">首页\u003C\u002FLink>\n        \u003CLink to=\\\"\u002Fabout\\\">关于\u003C\u002FLink>\n        \u003CLink to=\\\"\u002Fusers\\\">用户列表\u003C\u002FLink>\n      \u003C\u002Fnav>\n      \n      \u003CRoutes>\n        \u003CRoute path=\\\"\u002F\\\" element={\u003CHome \u002F>} \u002F>\n        \u003CRoute path=\\\"\u002Fabout\\\" element={\u003CAbout \u002F>} \u002F>\n        \u003CRoute path=\\\"\u002Fusers\\\" element={\u003CUserList \u002F>} \u002F>\n        \u003CRoute path=\\\"\u002Fusers\u002F:id\\\" element={\u003CUserDetail \u002F>} \u002F>\n        \u003CRoute path=\\\"*\\\" element={\u003CNotFound \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### 嵌套路由\n```jsx\n\u002F\u002F Dashboard.js\nimport { Outlet } from 'react-router-dom';\n\nfunction Dashboard() {\n  return (\n    \u003Cdiv>\n      \u003Ch2>仪表盘\u003C\u002Fh2>\n      \u003COutlet \u002F> {\u002F* 子路由渲染位置 *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F 路由配置\n\u003CRoutes>\n  \u003CRoute path=\\\"\u002Fdashboard\\\" element={\u003CDashboard \u002F>}>\n    \u003CRoute index element={\u003CDashboardHome \u002F>} \u002F>\n    \u003CRoute path=\\\"settings\\\" element={\u003CDashboardSettings \u002F>} \u002F>\n    \u003CRoute path=\\\"analytics\\\" element={\u003CDashboardAnalytics \u002F>} \u002F>\n  \u003C\u002FRoute>\n\u003C\u002FRoutes>\n```\n\n### 编程式导航\n```jsx\nimport { useNavigate, useParams, useLocation } from 'react-router-dom';\n\nfunction UserCard({ user }) {\n  const navigate = useNavigate();\n  \n  return (\n    \u003Cdiv onClick={() => navigate(`\u002Fusers\u002F${user.id}`)}>\n      {user.name}\n    \u003C\u002Fdiv>\n  );\n}\n\nfunction UserDetail() {\n  const { id } = useParams(); \u002F\u002F 获取URL参数\n  const location = useLocation(); \u002F\u002F 获取位置对象\n  \n  return (\n    \u003Cdiv>\n      \u003Ch2>用户ID: {id}\u003C\u002Fh2>\n      \u003Cp>当前路径: {location.pathname}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### 路由守卫（认证保护）\n```jsx\nimport { Navigate } from 'react-router-dom';\n\nfunction ProtectedRoute({ children }) {\n  const { isAuthenticated } = useAuth();\n  \n  if (!isAuthenticated) {\n    return \u003CNavigate to=\\\"\u002Flogin\\\" replace \u002F>;\n  }\n  \n  return children;\n}\n\n\u002F\u002F 使用\n\u003CRoute \n  path=\\\"\u002Fdashboard\\\" \n  element={\n    \u003CProtectedRoute>\n      \u003CDashboard \u002F>\n    \u003C\u002FProtectedRoute>\n  } \n\u002F>\n```\n\n## React生命周期\n\n### 类组件生命周期方法\n\n```jsx\nclass LifecycleDemo extends React.Component {\n  \u002F\u002F 1. 初始化阶段\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n    console.log('Constructor');\n  }\n\n  \u002F\u002F 2. 挂载阶段\n  componentDidMount() {\n    console.log('Component did mount');\n    \u002F\u002F 适合进行API调用、事件订阅\n    this.timer = setInterval(() => {\n      this.setState(prev => ({ count: prev.count + 1 }));\n    }, 1000);\n  }\n\n  \u002F\u002F 3. 更新阶段\n  shouldComponentUpdate(nextProps, nextState) {\n    console.log('Should component update?');\n    return nextState.count !== this.state.count;\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    console.log('Component did update');\n  }\n\n  \u002F\u002F 4. 卸载阶段\n  componentWillUnmount() {\n    console.log('Component will unmount');\n    \u002F\u002F 清理操作\n    clearInterval(this.timer);\n  }\n\n  render() {\n    console.log('Render');\n    return \u003Cdiv>Count: {this.state.count}\u003C\u002Fdiv>;\n  }\n}\n```\n\n### 函数组件生命周期（Hooks实现）\n\n```jsx\nimport { useState, useEffect } from 'react';\n\nfunction FunctionLifecycle() {\n  const [count, setCount] = useState(0);\n  const [data, setData] = useState(null);\n\n  \u002F\u002F 相当于componentDidMount + componentDidUpdate\n  useEffect(() => {\n    console.log('每次渲染后执行');\n  });\n\n  \u002F\u002F 相当于componentDidMount\n  useEffect(() => {\n    console.log('组件挂载后执行');\n    \n    \u002F\u002F 数据获取\n    fetch('\u002Fapi\u002Fdata')\n      .then(res => res.json())\n      .then(setData);\n    \n    \u002F\u002F 相当于componentWillUnmount\n    return () => {\n      console.log('组件卸载前执行');\n    };\n  }, []); \u002F\u002F 空依赖数组\n\n  \u002F\u002F 依赖变化时执行\n  useEffect(() => {\n    console.log('count变化时执行:', count);\n    \n    document.title = `Count: ${count}`;\n    \n    return () => {\n      console.log('清理count效果');\n    };\n  }, [count]); \u002F\u002F count依赖\n\n  return (\n    \u003Cdiv>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={() => setCount(c => c + 1)}>增加\u003C\u002Fbutton>\n      {data && \u003Cpre>{JSON.stringify(data, null, 2)}\u003C\u002Fpre>}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### 生命周期阶段对比\n\n| 阶段 | 类组件方法 | 函数组件Hook |\n|------|------------|--------------|\n| **挂载** | constructor | useState初始化 |\n|       | render      | 函数体执行    |\n|       | componentDidMount | useEffect(() => {}, []) |\n| **更新** | shouldComponentUpdate | React.memo, useMemo |\n|       | render      | 函数体执行    |\n|       | componentDidUpdate | useEffect(() => {}) |\n| **卸载** | componentWillUnmount | useEffect返回函数 |\n| **错误处理** | componentDidCatch | 暂无直接等效，需错误边界组件 |\n\n### 现代React开发建议\n\n1. **优先使用函数组件+Hooks**：\n   - 90%的场景可替代类组件\n   - 更简洁的代码结构\n   - 更好的逻辑复用\n\n2. **关键生命周期替代**：\n   - `componentDidMount` → `useEffect(() => {}, [])`\n   - `componentDidUpdate` → `useEffect(() => {})` 或带依赖的 `useEffect`\n   - `componentWillUnmount` → `useEffect(() => { return cleanup }, [])`\n   - `shouldComponentUpdate` → `React.memo` 或 `useMemo`\n\n3. **数据获取最佳实践**：\n```jsx\nuseEffect(() => {\n  let isMounted = true;\n  \n  const fetchData = async () => {\n    try {\n      const result = await api.getData();\n      if (isMounted) setData(result);\n    } catch (error) {\n      if (isMounted) setError(error);\n    }\n  };\n  \n  fetchData();\n  \n  return () => {\n    isMounted = false; \u002F\u002F 避免组件卸载后设置状态\n  };\n}, []);\n```\n\n## 路由与生命周期整合示例\n\n```jsx\nfunction UserProfile() {\n  const { id } = useParams();\n  const [user, setUser] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    let isActive = true;\n    \n    const fetchUser = async () => {\n      try {\n        setLoading(true);\n        const data = await fetchUserById(id);\n        if (isActive) {\n          setUser(data);\n          setLoading(false);\n        }\n      } catch (error) {\n        if (isActive) {\n          setError(error.message);\n          setLoading(false);\n        }\n      }\n    };\n    \n    fetchUser();\n    \n    return () => {\n      isActive = false; \u002F\u002F 清理效果\n    };\n  }, [id]); \u002F\u002F id变化时重新获取\n\n  if (loading) return \u003CSpinner \u002F>;\n  \n  return (\n    \u003Cdiv>\n      \u003Ch2>{user.name}\u003C\u002Fh2>\n      \u003Cp>Email: {user.email}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## 完整项目结构建议\n\n```\nsrc\u002F\n├── components\u002F      # 通用UI组件\n├── pages\u002F           # 页面组件\n├── layouts\u002F         # 布局组件\n├── hooks\u002F           # 自定义Hooks\n├── store\u002F           # Redux状态\n│   ├── slices\u002F\n│   └── store.js\n├── services\u002F        # API服务\n├── routers\u002F         # 路由配置\n├── utils\u002F           # 工具函数\n├── assets\u002F          # 静态资源\n└── App.js           # 主应用组件\n```\n\n这些新增内容涵盖了React路由的现代用法（v6版本）以及React生命周期的详细解释，包括类组件和函数组件的实现方式对比。同时还提供了路由与生命周期整合的实际示例，帮助开发者理解如何在真实项目中应用这些概念。","https:\u002F\u002Fcdn.xiaolong0418.com\u002Fmyblog\u002Fimages\u002F46e205aa1bd33d1bb7201019fc2fdf43.png",1147,"2023-02-21T02:01:52.000Z","2026-06-26T10:25:15.418Z",{"id":410,"name":411,"slug":412},"f1701085-b8c1-413a-8750-58e7a0a33832","React","react",{"id":27,"name":28,"avatar":18},[415],{"id":235,"name":236,"slug":237}]