javascript
javascript
ahaott
追本溯源
展开
-
js时间戳的处理
js时间戳转换日期格式 yyyy-MM-dd hh:mm:ssexport const dataFormat = timeStamp => { var date = new Date(timeStamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.ge原创 2021-09-03 15:01:38 · 385 阅读 · 0 评论 -
JS 语法 ES7、ES8、ES9、ES10、ES11、ES12新特性
ES7(2016)1. Array.prototype.includes()[1].include(1) // true[0].include(1) // false2. 指数操作符2 ** 3 // 8ES8(2017)1. async/await2. Object.values()Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]3. Object.entries()Object.entries({a: 1,原创 2021-08-30 16:55:31 · 980 阅读 · 0 评论 -
JS 异步解决方案的发展历程以及优缺点。
回调函数优点:解决了同步的问题(整体任务执行时长);缺点:回调地狱,不能用try catch捕获错误,不能return;Promise优点:解决了回调地狱的问题;缺点:无法取消Promise,错误需要通过回调函数来捕获;Generator特点:可以控制函数的执行。Async/Await优点:代码清晰,不用像Promise写一大堆then链,处理了回调地狱的问题;缺点:await将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用await会...原创 2021-08-23 09:55:08 · 121 阅读 · 0 评论 -
写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?
vue和react都是采用 diff 算法来对比新旧虚拟节点,从而更新节点。在vue的 diff 函数交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个 key => index 的 map 映射)。如果没有找到就认为是一个新增节点。而如果没有 key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个 map 映射,另一种是遍历查找。相比而言,map 映射的速度更快。...原创 2021-08-17 10:16:43 · 98 阅读 · 0 评论 -
从输入URL到页面加载发生了什么
1.DNS解析2.建立tcp连接3.发送http请求4.服务器处理http请求,并发送报文5.关闭tcp连接6.浏览器解析渲染页面原创 2021-08-10 13:36:58 · 57 阅读 · 0 评论 -
数组扁平化处理
方案一:es6中数组扁平化处理var arr = [[1, 2, 3, [12]], [1, 3], [1, 8]]console.log(arr.flat(Infinity));方案二:序列化var arr = [[1, 2, 3, [12]], [1, 3], [1, 8],"23"]var newArr = JSON.stringify(arr).replace(/(\[|\])/g, '').split(',')console.log(newArr);...原创 2021-08-06 16:51:44 · 63 阅读 · 0 评论 -
js函数的私有属性和方法、静态属性和方法、实例属性和方法、原型属性和方法
function Foo(name) { let age = 25 // 私有属性 function sex() { // 私有方法 console.log('male') } this.name = name // 实例属性 this.run = function() { // 实例方法 console.log('run') }}Foo.home = 'Bei.原创 2021-08-06 16:05:33 · 487 阅读 · 0 评论 -
实现字符串方法 indexof
var str = "my name is ahao";var findStr = "ah";~(function () { function myFind(str) { let T = this.length; let t = str.length; let res = -1; for (let i = 0; i <= T - t; i++) { if (str === this.substr(i, t)) { res = i;.原创 2021-08-06 15:41:37 · 113 阅读 · 0 评论 -
如何实现字符串中大写全部变小写,小写变大写
var str = 'abcHeight'var newStr = str.replace(/[a-zA-Z]/g, (content) => { console.log(content); return content.toUpperCase() === content? content.toLowerCase():content.toUpperCase()}) console.log(newStr);原创 2021-08-06 11:59:23 · 382 阅读 · 0 评论 -
什么是懒加载?如何实现懒加载?
懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。懒加载的优点:提升用户体验,加快首屏渲染速度; 减少无效资源的加载; 防止并发加载的资源过多会阻塞 js 的加载;懒加载的原理:首先将页面上的图片的src属性设为空字符串,而图片的真实路径则设置在data-original属性中,当页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内则将图片的src属性设置为dat...原创 2021-08-02 10:49:38 · 12992 阅读 · 0 评论 -
什么是 CSRF 攻击?如何防范 CSRF 攻击?
CSRF 攻击指的是跨站请求伪造攻击,攻击者诱导用户进入一个第三方网站,然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态,那么攻击者就可以利用这个登录状态(cookie),绕过后台的用户验证,冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点,以此来实现用户的冒充。防护方法:同源检测,服务器检测请求来源; 使用 token 来进行验证; 设置 cookie 时设置 Samesite,限制 cookie 不能作原创 2021-08-20 11:45:25 · 567 阅读 · 0 评论 -
什么是 CSP?
CSP(Content-Security-Policy)指的是内容安全策略,它的本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截由浏览器自己来实现。通常有两种方式来开启 CSP,一种是设置 HTTP 首部中的 Content-Security-Policy,一种是设置 meta 标签的方式<meta http-equiv="Content-Security-Policy">CSP 也是解决 XSS 攻击的一个强力手段...原创 2021-08-31 09:51:31 · 7027 阅读 · 1 评论 -
instanceof 的实现原理
while (x.__proto__) { if (x.__proto__ === y.prototype) { return true; } x.__proto__ = x.__proto__.__proto__;}if (x.__proto__ === null) { return false;}原创 2021-08-17 10:13:26 · 39 阅读 · 0 评论 -
js 中有哪几种内存泄露的情况
意外的全局变量; 闭包; 未被清空的定时器; 未被销毁的事件监听; DOM 引用;原创 2021-08-01 22:58:27 · 102 阅读 · 0 评论 -
什么是Generator函数?
传统的编程语言,早有异步编程的解决方案(其实是多任务的解决方案)。其中有一种叫做“协程”(coroutine),意思是多个线程互相协作,完成异步任务。协程有点像函数,又有点像线程,它的运行流程大致如下:第一步,协程A开始执行; 第二步,协程A执行到一半,进入暂停,执行权转移到协程B; 第三步,(一段时间后)协程B交还执行权; 第四步,协程A恢复执行;上面流程的协程A,就是异步任务,因为它分成两段(或多段)执行。举例来说,读取文件的协程写法如下:functio...原创 2021-09-08 17:19:02 · 149 阅读 · 0 评论 -
setTimeout、Promise、Async/Await 的区别
setTimeout:setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行;Promise:Promise本身是同步的立即执行函数,当在 executor 中执行 resolve 或者 reject 的时候,此时是异步操作,会先执行 then/catch 等,当主栈完成时,才会去调用 resolve/reject 方法中存放的方法。async:async函数返回一个Promise对象,当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再执行...原创 2021-08-05 11:36:06 · 197 阅读 · 0 评论 -
什么是webp
WebP 是谷歌开发的一种新图片格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是,在相同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减少,这样会提高用户的体验。这是谷歌开发的一种新的图片格式。浏览器如何判断是否支持 webp 格式图片?通过创建 Image 对象,将其 src 属性设置为 webp 格式的图片,然后在 onload 事件中获取图片的宽高,如果能够获取,则说明浏览器支持 webp原创 2021-07-30 13:42:52 · 1748 阅读 · 0 评论 -
防抖和节流
目的:限制函数的执行次数.1.防抖(debounce): 通过setTimeout的方法.在一定时间间隔内,将多次触发变成一次触发.const debounce = function(fn,delay=1000){ let time = null return function(...args){ time&&clearTimeout(time) time = setTimeout(()=>{ fn(args) },delay)原创 2021-07-30 11:40:42 · 42 阅读 · 0 评论 -
js中的new
new的过程1.创建一个新的对象obj2.这个新对象的__proto__属性指向原函数的的prototype属性.(也就是继承原函数的原型)3.将这个新对象绑定到此函数的this.4.返回新对象,如果这个函数没有返回其他对象.// new 生成对象的过程// 1、生成新对象// 2、链接到原型// 3、绑定 this// 4、返回新对象// 参数:// 1、Con: 接收一个构造函数// 2、args:传入构造函数的参数function create(Con, ...a原创 2021-07-29 14:55:20 · 91 阅读 · 0 评论 -
可选链操作符( ?. )
可选链操作符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符,不同之处在于,在引用为空(nullish)(null或者undefined) 的情况下不会引起错误,该表达式短路返回值是undefined。与函数调用一起使用时,如果给定的函数不存在,则返回undefined。当尝试访问可能不存在的对象属性时,可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链操作符也是很...原创 2021-07-06 17:50:44 · 268 阅读 · 0 评论 -
Promise对象
1.什么是Promise对象Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地嵌套回调函数。Promise 原本只是社区提出的一个构想,一些函数库率先实现了这个功能。ECMAScript 6 将其写入语言标准,目前 JavaScript 原生支持 Promise 对象。Promise 是原创 2021-07-05 14:48:12 · 127 阅读 · 0 评论 -
javascript 的数据类型
1、数据类型的存储形式栈(Stack)和堆(Heap),是两种基本的数据结构。Stack 在内存中自动分配内存空间的;Heap 在内存中动态分配内存空间的,不一定会自动释放。一般我们在项目中将对象类型手动置为 null 原因,减少无用内存消耗。1.原始类型是按值形式存放在栈中的数据段,内存空间可以自由分配,同时可以按值直接访问2.引用类型是存放在堆内存中,每个对象在堆内存中有一个引用地址,就像是每个房间都有一个房间号一样。引用类型在栈中保存的就是这个对象在堆内存的引用地址,我们所说的“房间号”。原创 2021-07-02 15:02:30 · 195 阅读 · 0 评论 -
js中this的指向问题
this其实就是一个对象,在不同情况下可分为一下几种:1.对象调用,作为对象的属性被调用时,this指向该对象(也就是谁调用,指向谁)var obj = { name:'ahao', age:'23', ask:function(){ console.log(this); alert(this.name+this.age)} } obj.ask() //this指向obj2.作为普通函数被调用(在非严格模式下,原创 2021-06-28 23:14:10 · 95 阅读 · 0 评论 -
es6新增语法
es6新增语法1.变量声明let和const1.1.let声明块级作用域不存在变量提升暂时性死区声明的变量不会挂载在window上同一作用域不能重复声明1.2.const声明用来声名一个有块级作用域的常量(内存地址不能变化的量)声明常量必须初始化同样具有块级作用域和暂时性死区赋值为简单数据类型,不能直接修改赋值为复杂数据类型,可以修改对象内部的属性和方法1.3.变量的使用建议(1)优先使用const声明固定不变的值(2)使用let关键字声明变化的量(3)兼容性考虑或原创 2021-06-28 15:46:28 · 92 阅读 · 0 评论