- 博客(440)
- 收藏
- 关注
RSS订阅原创 作为前端工程师，你应该了解的 10 个 JavaScript 技巧
自己之前辛辛苦苦写的代码，过了一段时间自己再去读，发现写的很是一言难尽。但我不太明白这是什么意思，所以我写了这段代码。很多时候，我们的网站会不断调整功能，有新的和废弃的功能，但我总是担心以后会用到它们，所以我只是注释它们，而不是删除它们。因此，今天我想跟你分享 10 个关于 JavaScript的小技巧，希望可以帮助你避免编写我曾经写过的垃圾代码。大多数时候，我们使用.length，判断字符串的长度是安全的，但是在表单输入的情况下要小心使用。与其写无意义的代码注释，还不如不写代码注释，因为它浪费你的时间。
2024-01-03 16:21:19
959
原创 最全的 ES 重点内容整理（下）
● 在 JavaScript 的操作中, 我们经常会访问一些属性, 但是如果他的前置是未定义的呢?是不是就会报错了呢● 这个时候我们不确定他的前置是不是确实存在, 那么我们怎么办呢?● 只能是任由他报错, 如果要做一些容错处理, 那么只能是 try catch 了, 但是这样的代码太难受了看起来● 在 ES2020 中出现了一个新的运算符, 可选链运算符 (?. ), 帮我们解决了这个问题● 意义 : 当前置是 undefined 的时候, 不在继续向后访问属性, 直接返回 undefined。
2023-11-06 15:08:06
321
原创 最全的 ES 重点内容整理（上）
● 我们从很多年前就知道 ES6, 也就是官方发布的 ES2015● 从 2015 年开始, 官方觉得大家命名太乱了, 所以决定以年份命名● 但是大家还是习惯了叫做 ES6, 不过这不重要● 重要的是, ES6 关注的人非常多, 大家也会主动去关注● 但是从 2016 年以后, 每年官方都会出现新的语法, 那么大家又有多少关注呢。
2023-10-12 10:22:27
347
1
原创 10个强大的 JavaScript 动画库、直接抄作业
因此，今天这篇文章，我将整理了10个有趣又有用的 JavaScript 动画库，从而帮助你快速创建动画，其中包括， 滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。它是一个轻量级的 JavaScript 动画库，具有简单的 API，可用于对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理。
2023-09-21 11:58:20
460
原创 5 个最令人兴奋的 ES13 功能
不用担心，我们可以使用“Object.hasOwn”来规避这两个问题，这比“obj.hasOwnProperty”方法更方便、更安全。也许“obj.hasOwnProperty”已经可以过滤掉原型链上的属性，但在某些情况下，它并不安全，会导致程序失败。有时，代码块的错误需要根据其原因进行不同的处理，但错误的原因相对相似，因此，能够为它们分配错误名称是很棒的。ES2022提供了一个名为at的数组方法，这可能是一个很小的改变，但是可以大大提高代码的可读性。这个功能非常棒，可以让我们做很多以前做不到的事情。
2023-09-18 15:27:08
204
原创 4 个有用的 JavaScript 闭包技巧
根据 MDN：“闭包是捆绑在一起（封闭）的函数及其周围状态（词法环境）的引用的组合。换句话说，闭包使您可以从内部函数访问外部函数的作用域。当然，我们还有另一种更简单的方法，只需将var替换为let即可解决这个问题。是的，你可以使用闭包来解决这个问题。作为前端开发工程师，我们在很多场景中都会用到它，它的功能确实很强大。利用闭包的特性，我们可以减少计算量，提高我们编写的程序的性能。4种关于的闭包的技巧我们说完了， 你还知道其他的什么方法吗？很早以前，我们经常通过闭包来实现对私有变量的保护。
2023-09-15 17:09:20
176
原创 Interesting！9个奇葩有趣的前端面试题！
如果你没有注意到分号，你一定认为 nums 是 [0, 1, 2, 3, 4]。直觉上我们认为答案应该是[1, 4, 21, 30, 100000]，但是我们没有传递比较函数，所以结果并不是我们想象的那样。众所周知，使用对象作为属性键最终会是这样的，实际的键是 [object Object]也许99%的工程师认为答案应该是*undefined，因为他们不知道如何定义全局变量。也许你认为它是 fatfish，但medium才是最终的答案。不会，1秒后1变成了3，所以3会连续打印3次。
2023-09-05 15:30:11
445
原创 21 个简洁的 JavaScript单行代码技巧
今天，我们有 21 个JavaScript单行代码技巧，增强我们对 JavaScript 的理解并帮助您编写更简洁、更有效的代码。作为一名前端程序员，不断的学习精进技巧，了解JS的最新发展也是非常必要的，而简洁的一行代码示例就是很好的方法。使用 Math.random()、Math.floor() 和一点算术，我们可以生成指定范围内的随机数。此单行代码使用 split()、reverse() 和 join() 方法来反转给定的字符串。通过提供生成随机值的自定义排序函数，我们可以对数组的元素进行打乱。
2023-08-31 15:36:54
225
原创 【直接收藏】前端 VUE 高阶面试题（三）
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。该阶段前后的两个钩子函数：beforeCreate和created第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。
2023-08-25 10:50:38
368
原创 面向对象这么久了，还没找到对象？
这两个实体虽然都是矩形类型的，但很容易分辨，一个是100*200的矩形r1，另一个是6*6正方形的特殊矩形r2，对象就这样产生了，这两个实体就是对象，创建的过程叫做实例化。这是一个很常见的创建数组的方式，使用一个内置构造函数(类)Array ，通过 new的方式我们创建出来了一个实例对象，我们叫他arr，这个arr有很多方法，比如push、pop、shift、unshift等，这些是数组独有的方法。你可以通过创建不同的类的实例，将它们组合成更大的对象，形成复杂的数据结构，从而实现更复杂的功能。
2023-08-23 09:40:44
152
原创 【直接收藏】前端 VUE 高阶面试题（二）
不管是MVC，MVP，或者MVVM，都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。MVVM，可以拆分为Model- 数据模型，可以对应到真实开发过程中的数据包View- 视图层，布局和外观，可以对应到真实开发中的DOM结构ViewModel- 扮演“View”和“Model”之间的使者，帮忙处理View。
2023-08-17 15:04:46
210
原创 【直接收藏】前端 VUE 高阶面试题（一）
这种问题一样的 先回答经常用的一些指定 比如 v-for v-if v-model v-show等等之类的 指令分为全局和局部的然后在回答自定义指令通过directive来自定义指令，自定义指令分为全局指令和局部指令，自定义指令也有几个的钩子函数，常用的有bind和update，当 bind 和 update 时触发相同行为，而不关心其它的钩子时可以简写。一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。
2023-08-11 11:32:14
464
原创 9 个实用的 JavaScript 技巧
在其他语言中，您可能需要将布尔变量声明为外部循环的“flags”，并在进入相应循环时检查中断的“标志”。因此，如果元素是对象或数组，复制的数组仍将引用相同的对象或数组。如上面的示例所示，我们使用了一个简单的三个点的扩展运算符，将leader[“me”]的值分配给名为me的变量，并将其他键值对分配给数组others。如果你能熟练地利用它的力量，这对简化你的代码将会非常有帮助。如上所示，lodash 中的 cloneDeep 方法完美克隆了 obj 内的函数，并且可以在新的 cp_obj 上成功执行。
2023-08-10 10:34:22
432
原创 浏览器多管闲事之跨域
跨域（Cross-Origin）指的是在 Web 开发中，一个网页的运行环境（域）与所请求资源的域不一致，即请求的目标资源与当前网页的域名（协议、域名或端口）不同。Web 浏览器遵循同源策略（Same-Origin Policy），这是一种安全策略，旨在防止潜在的恶意网站窃取用户数据或进行其他安全攻击。同源策略要求网页的运行环境和所请求的资源必须拥有相同的协议、域名和端口，否则浏览器会阻止跨域请求的执行。举例来说，每个网站都有一个域名或者IP地址（实际上域名就是对IP地址的别名，方便人们记忆）。
2023-08-09 14:06:49
1289
原创 小霸王其乐无穷之函数回调
从这段代码我们可以看出，我们把一个任务传递给了定时器，定时器在1秒后会执行这个传入的任务，也就是说在我们看不到的代码的地方，执行了一次“printQfedu()”函数。回调函数是一种在编程中常见的概念，指的是将一个函数作为参数传递给另一个函数，并在特定的事件或条件发生时由该函数执行。幸好，在JavaScript中已经为我们内置了定时器函数，其中一个延时定时器setTimeout，它有两个参数，第一个参数是函数类型的参数，第二个参数是多少毫秒后执行第一个参数的函数。(到达指定时间后，调用我们自己写的函数)
2023-08-08 10:54:00
218
原创 效率利器之事件委托
例如，如果需要在不同阶层的元素上绑定不同的事件处理程序，或者需要对事件进行捕获阶段的处理，事件委托可能无法满足需求。● 动态添加元素支持：对于后续动态添加的子元素，无需单独为它们添加事件处理程序，因为事件委托是基于父元素的，新添加的元素也会受到委托的处理。● 内存和性能优化：事件委托利用事件冒泡的特性，将事件处理放在父元素上，避免了在每个子元素上都绑定事件，从而节省内存和提高性能。只能自己再注册一次。事件委托是建立在事件冒泡机制之上的，冒泡是指事件从触发事件的元素开始，逐级向上触发所有上级元素的过程。
2023-08-08 09:58:30
201
原创 JSON：让数据传输更优雅
综上所述，JSON在处理省市县和汽车等树形数据结构时具有更小的数据体积、更简洁的语法、更快的解析效率和更好的兼容性等优势。然而，对于一些特定需求，XML仍然可能是更好的选择，比如需要更复杂结构和更强的扩展性的场景。由于JSON采用了简洁的语法，不需要像XML那样添加大量的标签和属性，因此JSON的数据体积相对较小。尽管XML在一些特定领域具有更好的扩展性，但对于一般的树形数据结构，JSON的扩展性也是足够的。但，这是js的对象数据类型，数据类型本质是内存中存储数据的方式，我们不可能把内存传输给后台。
2023-08-04 10:24:41
223
原创 Vue组件缓存之keep-alive正确使用姿势
作为苦逼的前端开发者，我们无时无刻都要面对产品经理提的各种需求, 比如下图这个场景从首页的点击导航进入列表页,列表页点击列表进入 该 数据详情页从详情页返回，希望列表页缓存，不重新渲染数据，这样会提高用户体验。这样需求，如果是小程序的话，默认列表页就会缓存，因为小程序的运行环境是微信客户端，当我们打开一个页面会新建一个webview，所有列表页和详情页是两个webview，当我们进入详情页，列表页webview，只是会在详情页webview下面，不会销毁。
2023-08-03 09:54:10
802
原创 【直接收藏】前端JavaScript面试100问（终）
事件代理 也就是 事件委托不是直接给标签添加事件 是给标签的父级添加事件 通过 事件对象 判断触发事件的标签对象是谁 执行不同的函数程序的语法形式委托的优点减少内存消耗试想一下，若果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；
2023-08-02 11:27:11
206
原创 【直接收藏】前端JavaScript面试100问（下）
JavaScript 因为是 弱类型计算机语言 存储数据时 对变量储存的数据类型没有设定因此一个变量中可以存储任意类型的数据 在程序的执行过程中 就会遇到需要数据类型转化的情况自动转化自动转化为字符串数据 直接转化为 对应的字符串自动转化为数值类型 转化为 对应的数值 1 true 0 false null "" ''符合数字规范的字符串转化为 NaN不符合数字规范的字符串undefined自动转化为数值类型。
2023-08-01 14:42:07
189
原创 前端JavaScript面试100问（中）
三次握手是网络客户端跟网络服务器之间建立连接，并进行通信的过程。相当于客户端和服务器之间你来我往的3个步骤。第一次握手是建立连接，客户端发送连接请求报文，并传送规定的数据包；第二次握手是服务器端表示接收到连接请求报文，并回传规定的数据包；第三次握手是客户端接收到服务器回传的数据包后，给服务器端再次发送数据包。这样就完成了客户端跟服务器的连接和数据传送。四次挥手表示当前这次连接请求已经结束，要断开这次连接。第一次挥手是客户端对服务器发起断开请求，第二次握手是服务器表示收到这次断开请求，
2023-07-28 11:04:04
588
原创 前端JavaScript面试100问（上）
闭包：就是能够读取外层函数内部变量的函数。闭包需要满足三个条件：访问所在作用域；函数嵌套；在所在作用域外被调用。优点： 可以重复使用变量，并且不会造成变量污染。缺点： 会引起内存泄漏使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象。
2023-07-28 11:03:01
649
原创 8 种酷炫JavaScript 技巧
是的，我相信你已经看到了，deepClone1 有一些缺陷，它不能复制函数、正则表达式、未定义等值。为了给我们的网站用户提供更好的交互体验，我们经常需要提供将内容复制到剪贴板的功能。幸运的是，在大多数情况下，我们可以使用这两种更简单的方式来深拷贝一个对象。我们可以很容易地获取到用户的点击次数，但是如何获取一个元素的显示次数呢？这非常方便，我们甚至可以不做任何处理就可以深拷贝一个对象。难以置信的是，我们竟然只需要6行代码就可以实现这个功能。主要取决于用户点击元素的次数和元素在页面上显示的次数。
2023-07-26 11:12:33
212
原创 你真的会CSS？来看看这几个效果怎么做！
蓝莓，深海鱼，全麦面包，坚果儿，十六个核桃······学习两个半月前端信心满满在简历上写着：精通CSS。高端的记忆方法，往往只需要最朴素的操作手段。学习两年半前端轻车熟路的写上：熟练CSS。如果它能算作语言的话（手动狗头保命）学习五年前端小心翼翼写上：了解CSS。不禁感叹现在的孩子们还真是幸福啊！这些都是增加记忆力的，对孩子好！最玄学，最神奇的也莫过于CSS！你不信，你来看这几个动效怎么做？最近阿锋在超市排队买菜（辣条）我记得我小时候要记住一件事情。最神奇的语言是什么？只需：我爸的一巴掌！
2023-07-11 10:06:19
159
原创 JavaScript全解析——循环结构语句
利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。循环控制，控制程序重复执行若干次相同或似的逻辑，理解并正确使用循环控制，需要搞清楚循环的3个要素：起始值、变化量、终止条件。在循环没有进行完毕的时候，因为我设置的条件已满足，提前终止整个循环，不会再有下一次循环。在循环中，把循环的本次跳过去，继续执行后续的循环，也就是结束本次循环，直接进入下次循环。案例1: 求 1 ~ 100 以内所有 3 的倍数的和。
2023-07-05 14:38:28
323
原创 JS条件分支语句
和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}如果 if 后面的小括号内的条件不成立，也就是 false ，那就就执行else 后面的大括号里面的代码。if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }如果if后面的小括号内的条件成立，也就是true，那么就执行if后面的大括号里面的代码。多个 {} ，最多会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了。
2023-07-05 12:04:08
278
原创 JavaScript全解析——npm
1.4.下载时, 会去下载指定的第三方包, 如果第三方包用到了其他的第三方包, 会一起下载到 node_modules 中。3.1.打开 cmd, 切换到项目根目录, 输入指令 npm install 包名@版本号 || npm i 包名@版本号。●切换到项目根目录, 打开 cmd 输入 npm init --yes || npm init -y。3.2.注意: 安装时, package 中只会记录一个, 后续安装的, 会顶替掉之前安装的。○输入指令: npm --version || npm -v。
2023-06-12 14:35:59
730
原创 JavaScript全解析——Ajax(下)
●http 传输协议○http(s) 协议规定了, 只能由前端主动发起○并且在传输的过程中, 只能传递 字符串●http 协议过程1.建立连接浏览器和服务器进行连接建立基于 TCP/IP 协议的三次握手2.发送请求要求前端必须以 请求报文 的形式发送报文由浏览器组装, 我们只需要提供对应的信息即可报文包含的内容3.接收响应要求后端必须以响应报文的形式返回报文由服务器组装响应报文包含的内容响应报文行响应状态码, 简单信息描述响应状态码, 传输协议。
2023-06-08 14:55:53
1018
原创 JavaScript全解析——Ajax(上)
●认识前后端交互○就是 前端 与 后端的 一种通讯方式○主要使用的技术栈就是 ajax (async javascript and xml)●ajax 特点○使用 ajax 技术网页应用能够快速的将新内容呈现在用户界面○并且不需要刷新整个页面, 也就是能够让页面有 "无刷更新" 的效果●注意点:○前后端交互只能交互 字符串○并且有自己的固定步骤创建ajax 基本步骤的是什么1.创建 ajax 对象2.配置 ajax 对象3.发送请求xhr.send()4.接收响应。
2023-06-08 14:54:31
909
原创 JavaScript全解析——Express框架介绍与入门
■而我们接收到token后, 需要解密token, 验证是否为正确的 token 或者 过期的 token。■比如用户需要访问一些需要登陆后才能访问的接口, 就可以把登录时返回的token保存下来。a. 假设你需要请求的是 ‘./client/views/index.html’ 文件。把启动服务器包括操作的一系列内容进行的完整的封装，不过在使用之前, 需要下载第三方。b.你的请求地址需要书写 ‘/static/views/index.html’●以什么开头: 可以不写, 写的话需要是字符串。
2023-05-29 17:34:03
749
原创 JavaScript全解析——ES6函数中参数的默认值和解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。当你起了别名以后, 原先的键名不能在当做变量名使用了, 需要使用这个别名。函数的默认值是给函数的形参设置一个默认值, 当你没有传递实参的时候来使用。直接在书写形参的时候, 以赋值符号(=) 给形参设置默认值就可以了。给函数的形参设置一个默认值, 当你没有传递实参的时候, 使用默认值。会按照数组的索引依次把数组中的数据拿出来，赋值给对应的变量。数组怎么写, 解构怎么写，把数据换成变量。快速的从数组拿到数组中的数据。
2023-05-19 19:12:19
1650
原创 JavaScript字符串常用方法
●语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引。●作用：charAt() 是找到字符串中指定索引位置的内容返回。●语法：字符串.repalce(被替换的内容，要替换的内容)●语法：字符串.indexOf(要查找的字符，开始索引)●语法：字符串.indexOf(要查找的字符，开始索引)○(' ') 字符串中有空格 会按照原字符串中的空格切割。●字符串和数组有一个一样的地方，也是按照索引来排列的。○包含开始的索引对应的内容，不包含结束索引对应的内容。
2023-05-17 16:01:14
358
原创 【JavaScript全解析】ES6定义变量与箭头函数详解
我们现在知道定义（声明）一个变量用的是varlet和const用let声明的变量也叫变量用const声明的变零叫产量。
2023-05-16 14:13:08
529
原创 JavaScript全解析——this指向
本系列内容为JS全解析，为千锋教育资深前端老师独家创作致力于为大家讲解清晰JavaScript相关知识点，含有丰富的代码案例及讲解。如果感觉对大家有帮助的话，可以【点个关注】持续追更~this 是一个关键字，是一个使用在作用域内的关键字作用域分为全局作用域和局部作用域（私有作用域或者函数作用域）全局作用域中this指向window函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系，只看函数是如何被调用的(箭头函数除外)可分为以下场景：普通函数中的this和全局调用一样，this指向
2023-05-16 10:57:55
598
2
原创 JavaScript全解析——本地存储的概念、用法详解
如果 sessionStorage 中有该条数据 获取到的就是该条数据的值。+如果localStorage 中有这条数据 拿到的就是这个条数据的值。+如果localStorage 中没有这条数据 拿到的就是 null。2.可以跨页面通讯, 也就是说在一个页面写下在另一个页面可以读取。=> 本地打开的页面是不能操作 cookie。=> 只要 cookie 空间中有内容的时候。=> 会在该页面和后端交互的过程中自动携带。=> 哪一个域名存储, 哪一个域名使用。=> 任何一个后端语言都可以操作。
2023-05-04 13:20:13
644
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人