全部文章
共 1299 篇文章
如何写出一个惊艳面试官的深拷贝
导读 最近经常看到很多 手写代码的文章总结，里面提供了很多 的手写实现。 里面的题目实现大多类似，而且说实话很多代码在我看来是非常简陋的，如果我作为面试官，看到这样的代码，在我心里是不会合格的，本篇文章我拿最简单的深拷贝来讲一讲。 看本文之前先问自己三个问题： 你真的理解什么是深拷贝吗？ 在面试官眼里，什么样的深拷贝才算合格？ 什么样的深拷贝能让面试官感到惊艳？ 本文由浅入深，带你一步一步实现一个惊艳面试官的深拷贝。 本文测试代码：ht...
详解TypeScript项目中的tsconfig.json配置
在TS的项目中，TS最终都会被编译JS文件执行，TS编译器在编译TS文件的时候都会先在项目根目录的 文件，根据该文件的配置进行编译，默认情况下，如果该文件没有任何配置，TS编译器会默认编译项目目录下所有的 文件。实际项目中，会根据自己的需求进行自定义的配置，下面就来详细了解下 的文件配置。 文件选项配置 : 表示编译需要编译的单个文件列表 : 表示编译需要编译的文件或目录 ：表示编译器需要排除的文件或文件夹 默认排除 文件夹下文件 :...
什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？
一、那么宏任务和微任务是什么呢？ 首先，我们要先了解下 Js 。js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。 ES6 规范中，microtask 称为 jobs，macrotask 称为 task 宏任务是由宿主发起的，而微任务由JavaScript自身发起。 在ES3以及...
div居中方法
水平居中 1.行级元素 ：为该行级元素的父元素设置text align:center配合line height样式 2. 块级元素 ：为其自身设置 :auto样式 垂直居中 方法一： display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符. display:table cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 方法二： 利用f...
js 实现call和apply方法
壹 ❀ 引 我在 一文中，我们提到 属于显示绑定，这三个方法都能直接修改this指向。其中call与apply比较特殊，它们在修改this的同时还会直接执行方法，而bind只是返回一个修改完this的 并未执行，那么今天我们来讲讲如果通过JavaScript模拟实现call与apply方法。 贰 ❀ 关于call与apply 贰 ✿ 壹 call与apply区别 除了都能改变this指向并执行函数，call与apply唯一区别在于参数不...
JS 微任务和宏任务
单线程和任务队列 1. 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等待。 2. 如果排队是因为计算量过大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备(输入输出设备)很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行! 3. JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运...
js的new操作符到底做了什么
做了什么？ 1、创建了一个空的js对象（即{}） 2、将空对象的原型prototype指向构造函数的原型 3、将空对象作为构造函数的上下文（改变this指向） 4、对构造函数有返回值的判断 怎么实现？ 构造函数返回值的判断 一般情况下构造函数没有返回值，但是作为函数，是可以有返回值的。 那么在构造函数有返回值的情况下，new操作符做了什么？ 先看两个例子： 注意一下上面两个返回值的差异 结论： 在new的时候，会对构造函数的返回值做一些...
介绍一下 CSS 的盒子模型
1\. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2\. 类型： IE 盒子模型、标准 W3C 盒子模型； 3\. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content) 4\. 而IE盒模型的宽高是指content+padding+border。 5.设置盒模型的方式是：设置box sizing box sizing:content box 标准盒模型 bo...
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 有以下四个方面： Response Animation Idle Load <img width="676" height="245" src="../../ resources/1734894ee7aaf2b6 tplv t2oaga2asx 2e5a8010c5bb40479.webp"/...