- 博客(35)
- 收藏
- 关注
原创 js 中 ?.、??、??= 的用法及使用场景详解
相信大部分前端工程师都遇到过读取一个undefined或null值身上的属性导致报错的情况,下面来介绍ES6一些新的语法来方便我们开发。?.、?? 和 ??= 是一些新的语法糖,它们为开发者提供了更便利和安全的方式来处理变量的赋值和检查,特别是在处理可能存在 null 或 undefined 的情况下。让我们逐个来看这些语法的用法和使用场景。可选链操作符 ?. 是 ECMAScript 2020 新增的语法,用于简化访问可能为 null 或 undefined 的对象属性的过程,避免了因为空值而导致的错误
2024-05-10 10:24:50 1088
原创 详解flex:1属性
flex: 1的作用是同时设置flex-grow: 1、flex-shrink: 1和flex-basis: 0% 全写为flex: 1 1 0%;以下为三个属性的详解
2023-10-26 15:03:30 4068
原创 react的一些常用hook介绍与基本用法(三)
useCallback、useLayoutEffect、useImperativeHandle、useDebugValue的介绍及使用
2023-10-25 18:17:48 182
转载 jsonp原理详解
聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者就可以传一个参数过去告诉服务端,“我想要一段调用xxx函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。5、这样,解决方案就呼之欲出了,web服务端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件,显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装进去。//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?
2023-07-24 22:03:42 321
原创 Cookie和本地存储的区别
Cookie和本地存储(Local Storage和Session Storage)都是用于在浏览器端存储数据的方式,但它们也有些许区别。
2023-07-18 21:03:06 692
原创 Array.from()方法详解
Array.from()是JavaScript中一个非常有用的方法,它可以将类似数组或可迭代对象(iterable)转换为真正的数组。这个方法在处理一些特殊的数据结构或需要对数据进行操作时非常方便。
2023-07-17 23:31:04 2673
原创 js性能优化之节流防抖函数
我们在书写js时经常会遇到一些频繁触发的事件,比如窗口滚动、鼠标移动或者输入框输入等。如果我们直接将事件处理函数绑定到这些事件上,可能会导致函数被频繁调用,从而降低应用程序性能。为了解决这个问题,我们可以使用节流(throttle)和防抖(debounce)这两个技术,下面就手写来实现这两个函数。
2023-07-14 23:17:09 106 1
原创 js中this在各种环境下的指向和案例
在全局环境中,this指向全局对象(浏览器中是window对象,Node.js中是global对象)。
2023-07-12 23:10:07 116 1
原创 前端实现文件上传及分片上传
相关对象 File Blob FormData FileReader,其中File 对象是 Blob 的子类,所以可以直接使用Blob对象的slice方法,分片操作主要用slice方法实现。各对象间的转换关系如下图。
2023-07-10 16:16:18 469 1
转载 https的交互过程
由于HTTP 协议通信的不安全性,所以人们为了防止信息在传输过程中遭到泄漏或者篡改,就想出来对传输通道进行加密的方式https。https 是一种加密的超文本传输协议,它与HTTP 在协议差异在于对数据传输的过程中,https 对数据做了完全加密。
2023-07-07 01:38:28 125 1
原创 Git回退版本的几种操作
我们commit了三个版本,突然发现版本2有bug,想要撤销版本2,但又不想影响版本3的提交,就可以用 git revert 命令来反做版本2,生成新的版本4,这个版本4里会保留版本3的东西,但撤销了版本2的东西。
2023-07-05 01:07:49 16529 1
原创 浅谈js闭包
在本质上,闭包是将函数内部和函数外部连接起来的桥梁。简单来说就是,当一个嵌套的函数内部调用了嵌套外部函数中的变量时,就会产生闭包,并且只执行外部函数(执行内部函数定义)就会产生闭包,甚至不用调用内部函数。(闭包的最典型的应用是实现回调函数(callback) )。
2023-07-03 13:26:32 102 1
原创 浅谈浏览器渲染原理与优化
这个过程是逐步完成的,为了更好的用户体验,渲染引擎会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
2023-07-01 23:49:26 84
原创 js对象的浅复制和深复制
所以,JSON.parse(JSON.stringfy())这种方式,只能用于对象。此方式借用了JSON对象上的自带方法实现深复制,并且可以实现多层次的深复制。但当对象里面在嵌套一个对象时,也就是深层次时,对内部对象的复制是浅复制。结果如下图,我们会发现obj1的like也变为了喝,显然是浅复制。但若值为undefined时,无法将相应的属性复制到新对象身上。的身上,即那些能够被 JSON 直接表示的数据结构。改变复制的对象时,原对象也改变(实际是同一对象)这种复制方式在对象是浅层次时不会改变原对象。
2023-07-01 01:08:13 103
原创 js中的call、apply、bind方法
call,apply,bind方法:a:第一个参数都是指定函数内部中this的指向(函数执行时所在的作用域),然后根据指定的作用域,调用该函数。b:都可以在函数调用时传递参数。call,bind方法需要直接传入,而apply方法需要以数组的形式传入。c:call,apply方法是在调用之后立即执行函数,而bind方法没有立即执行,需要将函数再执行一遍。有点闭包的味道。d:改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向。
2023-06-29 22:31:59 96
原创 前端必知的ES6的新特性(3)
解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。字符串、以及ES6新增的Map和Set 都可以使用解构表达式。
2023-06-28 02:05:44 89 1
原创 前端必知的ES6的新特性(1)
Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值,不能与其他数据类型进行运算。它是JavaScript中的第七种数据类型,与undefined、null、Number(数值)、String(字符串)、Boolean(布尔值)、Object(对象)并列。在ES6之前,处理模板字符串:通过“\”和“+”来构建模板。对ES6来说:用${}来界定;反引号(``)直接搞定;
2023-06-25 21:13:17 98 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人