24-06-22 01 获取类型const getType element { let str Object.prototype.toString.call(element) return str.slice(1, -1).split( )[1] } console.clear() console.log(getType(0)) // Number console.log(getType(false)) // Boolean console.log(getType(NaN)) // Number console.log(getType(null)) // Null console.log(getType(undefined)) // Undefined console.log(getType(new Set())) // Set console.log(getType(Math)) // Math console.log(getType(new WeakMap())) // WeakMap console.log(getType(() {})) // Function console.log(getType(document.querySelector(canvas))) // HTMLCanvasElement console.log(getType(document.querySelector(div))) // HTMLDivElement console.log(getType(document.querySelector(div).classList)) // DOMTokenList拓展若是不清楚获取节点的 classList 有哪些方法, 可以先 getType 获取类型, 然后到 MDN 查阅文档24-06-22 02 跳出 forEach 循环try { [1, 2].forEach(item { if(item 1) throw 跳出 forEach 循环 console.log(代码) }) } catch { console.log(catch) } // 执行结果 catchtry { [1, 2].forEach(item { if(item 1) throw 跳出 forEach 循环 console.log(代码) }) } catch (e) { console.log(catch, e) } // 执行结果 catch 跳出 forEach 循环24-06-25 Nuxt3 打包后 图片资源 Not Found 问题图片资源存放到/public/images目录调用图片路径使用/images/拓展 如果使用images/虽然图片能正常显示, 但是控制台会报_nuxt/images/图片的错误使用yarn build打包后, 图片存放路径为/public/images重启Nginx服务器可以访问图片域名/images/图片, 如 eye_light.png/** * 图片资源 /public/images * eye_light.png / eye_dark.png */ // data.ts const base { image: /images/ } const path (type: string, filename: string) { if(type image) return ${base.image}${filename} } const eye { light: path(image, eye_light.png), dark: path(image, eye_dark.png) } export { eye }24-07-17 01 图片处理script setup langts const urlImg (str: string): string /src/assets/${str} const img urlImg(logo.png) /script style scoped langscss /* scss */ function urlImg($img) { return url(../assets/ $img); } div { background-image: urlImg(logo.png); } /style24-07-17 02 跳出多层 for 循环JSLabel语法【渡一教育】out: for(let item in Array(2).fill()) { console.log(123) for(let i in Array(2).fill()) { console.log(456) break out } }24-09-11 Chrome - Developer - Filter编写正则表达式, 只显示部分满足条件文件 /router|function/24-09-12 ?? ES 函数参数 三目运算符 扩展运算符const add (...numList: number[]): number numList.reduce((num1, num2) num1 num2) const result add(1, 2, 3, 4) console.log(result) // 疑似发现一个 ES 未开发的功能 // const resultType add(true ? ...[1, 3, 5, 7, 9]: ...[2, 4, 6, 8, 10]) // console.log(resultType) // 解决方式, 总感觉 ...() 的形式有些奇怪 const resultType add(1, ...(false ? [2, 3, 4, 5] : [1, 2, 3, 5])) console.log(resultType)24-10-14 复杂条件语句的判断 二进制 类Switch/** * 5分钟教你使用 console.log 输出五彩斑斓的黑 * https://juejin.cn/post/7087192401978064933 */ const printColor (...content) { const color [red, green, blue, purple, #22CCDD] color.length content.length console.log(%c${content.join(%c )}, ...color.map(item font-size:24px;color:${item};)) } const info { score: 86, school: 一中, // 一中 二中 grade: 二年级, // 一年级 二年级 studentID: 24, // 01 - 82 } console.clear() { printColor(...Array(5).fill(----)) if(info.score 80) { console.log(成绩优秀) if(info.school 一中) { console.log(学校为一中) if(info.grade 一年级) { console.log(年级为一年级) } else { console.log(年级为二年级) } } } else { console.log(成绩中游) } } /** 复杂条件语句的判断 * 条件判断语句一般为 2 个状态值, 最多不会超过4个状态 00 01 10 11 * 连接多个状态的二进制结果, 二个条件为 0000-1111, 为最终状态值 * 提取最终状态值, 输出结果, 类似 switch * * JavaScript如何将布尔值转换为整数数字 * https://blog.csdn.net/m0_66319974/article/details/122436761 */ { printColor(...Array(5).fill(----)) const judgeInfo (res, fn, to) { const str to(res) if(str in fn) fn[str]() } judgeInfo([ /* 0 */ info.score 80, /* 1 */ info.school 一中, /* 2 */ info.grade 一年级 ], { 000000: () console.log(成绩普通, 二中, 二年级), 010001: () console.log(成绩优秀, 二中, 一年级), 000101: () console.log(成绩普通, 一中, 一年级), 010100: () console.log(成绩优秀, 一中, 二年级), /* 二 */ 110: () console.log(二, 成绩优秀, 一中, 二年级), /* 三 */ 1|1|0: () console.log(三, 成绩优秀, 一中, 二年级), /* 四 */ 01|11|20: () console.log(四, 成绩优秀, 一中, 二年级), /* 五 */ 0.1|1.1|2.0: () console.log(五, 成绩优秀, 一中, 二年级), }, res { return res.map(item item ? 01 : 00).join() // return res.map(item ${item 1}.padStart(2, 0)).join() // return res.map(item (item | 0).toString().padStart(2, 0)).join() // /* 二 */ return res.map(item item 1).join() // /* 三 */ return res.map(item item | 0).join(|) // /* 四 */ return res.map((item, index) ${index}${item 1}).join(|) // /* 五 */ return res.map((item, index) ${index}.${item 1}).join(|) }) } { printColor(...Array(5).fill(----)) const score 52 const judgeScore (res, fn, to) fn[to(res)]?.() judgeScore( [score 90, score 80, score 60, true], { 0: () console.log(顶尖), 1: () console.log(优秀), 2: () console.log(普通), 3: () console.log(一般), }, res res.indexOf(true) ) } { printColor(...Array(5).fill(----)) const judge (res, fn, to) fn[to(res)]?.() const list [ [百度](https://www.baidu.com/), ## 24-10-15, [必应](https://cn.bing.com/), ] const regex /^\[(.*?)\]\((.*?)\)$/ const site { } list.forEach(item { const result item.match(regex) // if(result) { // if(result[2] in site) { // site[result[2]] result[1] // } else { // console.log(1234) // } // } judge( [result, result?.[2] in site], { 10: () { site[result[2]] result[1] }, 11: () { console.log(1234) }, }, res res.map(item !!item 1).join(), // res res.map(item Boolean(item) 1).join() ) }) /** 百度文心一言 JS 中, Boolean() 与 !! 在性能上有什么区别 * !! 与 Boolean() 性能差异非常小 * 一些基准测试表明, !! 可能会略微优于 Boolean(), 通常只在大量重复调用时才会出现 * !! 是内置操作符, JS 引擎可能对其进行了更多优化 * Boolean() 是一个函数调用, 涉及到函数调用栈的处理 */ console.log(site) } { export const judge (res: boolean[], fn: Function, to: Function) fn[to(res)]?.() }25-05-26 DataV dvBorderBox11 边界问题divclasslunpandvBorderBox11classdv11divclassbox/div/dvBorderBox11/div.lunpan{height:100vh;}.dv11{padding-top:59px;/* 6 47 6 */padding-right:21px;/* 7 7 7 */padding-bottom:14px;/* 6 2 6 */padding-left:21px;/* 7 7 7 */}.box{height:100%;overflow:hidden;}/** scss * 方位 分段距离 自定义 元素 自定义 边距 形状 边距 内容距离 * top 6 6 47 6 6 6 59 6 12 47 12 71 * bottom 6 6 2 6 6 6 14 6 12 2 12 26 * left / right 5 7 7 7 5 5 21 5 12 7 12 31 **/$dw:5px;/* 5 7 12 */$dh:6px;/* 6 6 12 */.lunpan{height:100vh;padding:$dh $dw;/* 6 5 6 5 */}.dv11{padding-top:59px $dh;padding-right:21px $dw;padding-bottom:14px $dh;padding-left:21px $dw;}.box{height:100%;overflow:hidden;}2025-06-09 uni-app x 自定义导航栏- 全局禁用原生导航栏 /pages.jsontabBar:{custom:true}- TabBar 页面禁用原生导航栏 page.uvue /*#ifdef H5 */ uni.hideTabBar() /* #endif *///#ifdef H5uni.hideTabBar()// 隐藏 TabBar uni.hideTabBar({animation:false// 是否需要动画效果})uni.showTabBar()// 显示 TabBar uni.showTabBar({animation:true})//#endif- 小程序的视口分层 小程序将屏幕划分为两个独立区域页面内容区 / 原生组件区 页面内容区vh 基于此区域计算 原生组件区顶部导航栏(navigationBar)/ 底部 tabBar / 等, 由小程序原生控制, 不参与 css 视口单位计算2025-07-04 甘特图附录npm vue-mermaid-string先上一张使用图片代码yarnadd-Dvue-mermaid-stringyarnadd-Dendentscript setup langts import VueMermaidString from vue-mermaid-string const diagram graph TD A -- B /script template default vue-mermaid-string :valuediagram / /template26-09-11 图片阻塞异步请求处理问题 - 页面图片加载未完成, 执行异步事件会被图片请求阻塞解决方案 - 执行异步事件时, 将图片 src 置空保存, 异步事件执行完, 重新赋值 src, 重新加载图片 前端小知识 不积跬步无以至千里
24-06-22 01 获取类型const getType element { let str Object.prototype.toString.call(element) return str.slice(1, -1).split( )[1] } console.clear() console.log(getType(0)) // Number console.log(getType(false)) // Boolean console.log(getType(NaN)) // Number console.log(getType(null)) // Null console.log(getType(undefined)) // Undefined console.log(getType(new Set())) // Set console.log(getType(Math)) // Math console.log(getType(new WeakMap())) // WeakMap console.log(getType(() {})) // Function console.log(getType(document.querySelector(canvas))) // HTMLCanvasElement console.log(getType(document.querySelector(div))) // HTMLDivElement console.log(getType(document.querySelector(div).classList)) // DOMTokenList拓展若是不清楚获取节点的 classList 有哪些方法, 可以先 getType 获取类型, 然后到 MDN 查阅文档24-06-22 02 跳出 forEach 循环try { [1, 2].forEach(item { if(item 1) throw 跳出 forEach 循环 console.log(代码) }) } catch { console.log(catch) } // 执行结果 catchtry { [1, 2].forEach(item { if(item 1) throw 跳出 forEach 循环 console.log(代码) }) } catch (e) { console.log(catch, e) } // 执行结果 catch 跳出 forEach 循环24-06-25 Nuxt3 打包后 图片资源 Not Found 问题图片资源存放到/public/images目录调用图片路径使用/images/拓展 如果使用images/虽然图片能正常显示, 但是控制台会报_nuxt/images/图片的错误使用yarn build打包后, 图片存放路径为/public/images重启Nginx服务器可以访问图片域名/images/图片, 如 eye_light.png/** * 图片资源 /public/images * eye_light.png / eye_dark.png */ // data.ts const base { image: /images/ } const path (type: string, filename: string) { if(type image) return ${base.image}${filename} } const eye { light: path(image, eye_light.png), dark: path(image, eye_dark.png) } export { eye }24-07-17 01 图片处理script setup langts const urlImg (str: string): string /src/assets/${str} const img urlImg(logo.png) /script style scoped langscss /* scss */ function urlImg($img) { return url(../assets/ $img); } div { background-image: urlImg(logo.png); } /style24-07-17 02 跳出多层 for 循环JSLabel语法【渡一教育】out: for(let item in Array(2).fill()) { console.log(123) for(let i in Array(2).fill()) { console.log(456) break out } }24-09-11 Chrome - Developer - Filter编写正则表达式, 只显示部分满足条件文件 /router|function/24-09-12 ?? ES 函数参数 三目运算符 扩展运算符const add (...numList: number[]): number numList.reduce((num1, num2) num1 num2) const result add(1, 2, 3, 4) console.log(result) // 疑似发现一个 ES 未开发的功能 // const resultType add(true ? ...[1, 3, 5, 7, 9]: ...[2, 4, 6, 8, 10]) // console.log(resultType) // 解决方式, 总感觉 ...() 的形式有些奇怪 const resultType add(1, ...(false ? [2, 3, 4, 5] : [1, 2, 3, 5])) console.log(resultType)24-10-14 复杂条件语句的判断 二进制 类Switch/** * 5分钟教你使用 console.log 输出五彩斑斓的黑 * https://juejin.cn/post/7087192401978064933 */ const printColor (...content) { const color [red, green, blue, purple, #22CCDD] color.length content.length console.log(%c${content.join(%c )}, ...color.map(item font-size:24px;color:${item};)) } const info { score: 86, school: 一中, // 一中 二中 grade: 二年级, // 一年级 二年级 studentID: 24, // 01 - 82 } console.clear() { printColor(...Array(5).fill(----)) if(info.score 80) { console.log(成绩优秀) if(info.school 一中) { console.log(学校为一中) if(info.grade 一年级) { console.log(年级为一年级) } else { console.log(年级为二年级) } } } else { console.log(成绩中游) } } /** 复杂条件语句的判断 * 条件判断语句一般为 2 个状态值, 最多不会超过4个状态 00 01 10 11 * 连接多个状态的二进制结果, 二个条件为 0000-1111, 为最终状态值 * 提取最终状态值, 输出结果, 类似 switch * * JavaScript如何将布尔值转换为整数数字 * https://blog.csdn.net/m0_66319974/article/details/122436761 */ { printColor(...Array(5).fill(----)) const judgeInfo (res, fn, to) { const str to(res) if(str in fn) fn[str]() } judgeInfo([ /* 0 */ info.score 80, /* 1 */ info.school 一中, /* 2 */ info.grade 一年级 ], { 000000: () console.log(成绩普通, 二中, 二年级), 010001: () console.log(成绩优秀, 二中, 一年级), 000101: () console.log(成绩普通, 一中, 一年级), 010100: () console.log(成绩优秀, 一中, 二年级), /* 二 */ 110: () console.log(二, 成绩优秀, 一中, 二年级), /* 三 */ 1|1|0: () console.log(三, 成绩优秀, 一中, 二年级), /* 四 */ 01|11|20: () console.log(四, 成绩优秀, 一中, 二年级), /* 五 */ 0.1|1.1|2.0: () console.log(五, 成绩优秀, 一中, 二年级), }, res { return res.map(item item ? 01 : 00).join() // return res.map(item ${item 1}.padStart(2, 0)).join() // return res.map(item (item | 0).toString().padStart(2, 0)).join() // /* 二 */ return res.map(item item 1).join() // /* 三 */ return res.map(item item | 0).join(|) // /* 四 */ return res.map((item, index) ${index}${item 1}).join(|) // /* 五 */ return res.map((item, index) ${index}.${item 1}).join(|) }) } { printColor(...Array(5).fill(----)) const score 52 const judgeScore (res, fn, to) fn[to(res)]?.() judgeScore( [score 90, score 80, score 60, true], { 0: () console.log(顶尖), 1: () console.log(优秀), 2: () console.log(普通), 3: () console.log(一般), }, res res.indexOf(true) ) } { printColor(...Array(5).fill(----)) const judge (res, fn, to) fn[to(res)]?.() const list [ [百度](https://www.baidu.com/), ## 24-10-15, [必应](https://cn.bing.com/), ] const regex /^\[(.*?)\]\((.*?)\)$/ const site { } list.forEach(item { const result item.match(regex) // if(result) { // if(result[2] in site) { // site[result[2]] result[1] // } else { // console.log(1234) // } // } judge( [result, result?.[2] in site], { 10: () { site[result[2]] result[1] }, 11: () { console.log(1234) }, }, res res.map(item !!item 1).join(), // res res.map(item Boolean(item) 1).join() ) }) /** 百度文心一言 JS 中, Boolean() 与 !! 在性能上有什么区别 * !! 与 Boolean() 性能差异非常小 * 一些基准测试表明, !! 可能会略微优于 Boolean(), 通常只在大量重复调用时才会出现 * !! 是内置操作符, JS 引擎可能对其进行了更多优化 * Boolean() 是一个函数调用, 涉及到函数调用栈的处理 */ console.log(site) } { export const judge (res: boolean[], fn: Function, to: Function) fn[to(res)]?.() }25-05-26 DataV dvBorderBox11 边界问题divclasslunpandvBorderBox11classdv11divclassbox/div/dvBorderBox11/div.lunpan{height:100vh;}.dv11{padding-top:59px;/* 6 47 6 */padding-right:21px;/* 7 7 7 */padding-bottom:14px;/* 6 2 6 */padding-left:21px;/* 7 7 7 */}.box{height:100%;overflow:hidden;}/** scss * 方位 分段距离 自定义 元素 自定义 边距 形状 边距 内容距离 * top 6 6 47 6 6 6 59 6 12 47 12 71 * bottom 6 6 2 6 6 6 14 6 12 2 12 26 * left / right 5 7 7 7 5 5 21 5 12 7 12 31 **/$dw:5px;/* 5 7 12 */$dh:6px;/* 6 6 12 */.lunpan{height:100vh;padding:$dh $dw;/* 6 5 6 5 */}.dv11{padding-top:59px $dh;padding-right:21px $dw;padding-bottom:14px $dh;padding-left:21px $dw;}.box{height:100%;overflow:hidden;}2025-06-09 uni-app x 自定义导航栏- 全局禁用原生导航栏 /pages.jsontabBar:{custom:true}- TabBar 页面禁用原生导航栏 page.uvue /*#ifdef H5 */ uni.hideTabBar() /* #endif *///#ifdef H5uni.hideTabBar()// 隐藏 TabBar uni.hideTabBar({animation:false// 是否需要动画效果})uni.showTabBar()// 显示 TabBar uni.showTabBar({animation:true})//#endif- 小程序的视口分层 小程序将屏幕划分为两个独立区域页面内容区 / 原生组件区 页面内容区vh 基于此区域计算 原生组件区顶部导航栏(navigationBar)/ 底部 tabBar / 等, 由小程序原生控制, 不参与 css 视口单位计算2025-07-04 甘特图附录npm vue-mermaid-string先上一张使用图片代码yarnadd-Dvue-mermaid-stringyarnadd-Dendentscript setup langts import VueMermaidString from vue-mermaid-string const diagram graph TD A -- B /script template default vue-mermaid-string :valuediagram / /template26-09-11 图片阻塞异步请求处理问题 - 页面图片加载未完成, 执行异步事件会被图片请求阻塞解决方案 - 执行异步事件时, 将图片 src 置空保存, 异步事件执行完, 重新赋值 src, 重新加载图片