- 博客(31)
- 收藏
- 关注
RSS订阅原创 近期一次前端笔试，两题
题目描述: 每天皇帝每天都需要听大臣们讲述某些国家大事的情况，由于每个大臣所讲的事的重要性都不一样，每天皇帝都忙得焦头烂额，效率还特别低，所以皇帝决定，将这些大臣讲述事情的顺序做出一定调整，已知，每天有m个大臣要觐见，每个大臣都要禀报n件事，而皇帝根据每个人的事务的重要请你给他们排序，重要性总和越大的越排在前面禀报，现给出一个m x n 的数据，其中（mi , nj）表示第i个大臣要禀报的第j件事的重要性，如果重要性之和相同则按照先后顺序排列，然后，有个第id个大臣来问问你，他排在第几位？...
2022-08-29 00:09:00
253
1
原创 Vue组件间通信方式(总结)
通过props传递通过$emit触发自定义事件emit触发自定义事件，使用refEventBusemit触发自定义事件，$parent 或 $rootattrs 与 listenerslisteners接收除去带有.native事件修饰符的所有事件监听器，作用和provide 与 inject注意这里是祖先传后代，意思是不管哪一代都能拿到祖先的数据Vuex。......
2022-08-18 16:37:59
384
原创 说说Vue的核心特点（一，数据驱动）
e.js的核心思想之一就是数据驱动。所谓数据驱动就是视图是依靠数据驱动实现的，我们对视图的修改不会直接去操作DOM，而是通过操作数据，Vue帮我们修改视图。相比于传统的jQuery的原生DOM开发，大大简化了代码量，而且用户体验也更加友好，不需要花费大量精力去维护。尤其是在业务量十分复杂的时候，只关心数据的改变，会让代码的逻辑更加清晰，也更易于维护。...
2022-08-16 11:51:30
727
2
原创 近期一次前端笔试算法复盘，一题
变种题，其实就是多了个后序遍历过程，具体的构建二叉树的思想就是，根据每种遍历的特点，得出相应节点的位置，其中，前序遍历特点是，中左右、中序遍历是，左中右、后序遍历是，左右中；那么就可以根据前序遍历或者后序遍历，得出父节点(shift或者pop出父节点)，然后根据中序遍历分割左右子树，然后根据分割出的子树再次重复分割，直到得到对应的叶子节点，整个二叉树就重构出来了，最后进行一次后序遍历得出结果即可。解题思路，根据前序、中序遍历，构建出源二叉树，再进行后续遍历，求出后序遍历，可以理解为leedcode中的。..
2022-08-15 10:33:27
238
原创 JavaScript设计模式之“策略模式”（二）
其实策略模式已经在JavaScript这种高度函数化编码的语言中潜移默化的植入了，想必大家一定用过高阶函数吧，就是那种返回值是一个函数，或者传入的参数是一个函数的那种用法，是不是和策略模式很像呢，传入的函数参数就是一个策略，他可以通过不同的封装移植到不同的地方，不同的函数也可以返回不同的结果。当时我们的考虑是，根据自身的情况然后选择合适的方式吧，但是，我们必须得知道所有可能的路线，最后选择最优的那个方式吧，这就是策略模式的比较核心的缺点，我们不得不知道有哪些策略，如果一个输入项的校验不止一条规则怎么办？..
2022-07-28 18:40:24
178
原创 JavaScript设计模式之“策略模式”（一）
在实现JavaScript版本之前，仔细理解这段代码，很容易观察到，在传统面向对象语言中，为什么不讲这些个策略类封装成一个对象呢，因为传统面向对象语言创建较为繁琐，还需要先创建一个构造类再来创建对象封装策略类，那么熟悉JavaScript的小伙伴就清楚了，在JavaScript中我们直接很容易的就能创建一个空对象，然后用键值对封装每个每个策略类，所以，我们直接上代码，看起来比传统代码清晰多了。这段话就很好的诠释了什么是策略模式，就是对于一个问题，我们可以提供多种手段去解决，而且最终的结果都是期望的结果。..
2022-07-27 23:44:18
306
原创 JavaScript设计模式之“单例模式“
这里大家可能会觉得很奇怪，我明明说了上面的传统方式在JavaScript中不适用，为何在这又说就是以上代码的实现就是JavaScript中的单例模式，这里主要讲的其实是设计思路，与代码无关，由于JavaScript是无类的语言，所以无法写出类语言那种的形式，只是做了大概的模拟，本质上的代码实现还是JavaScript代码，仔细观察也不难看出，上面的代码就是用到了闭包创建私有变量的形式来保存构建好的单例的，也使用了原型链来模拟类中的静态方法，所以大家不必疑惑。...
2022-07-27 13:19:39
478
原创 JavaScript引用类型转换为原始类型(隐式类型转换问题)
在Symbol.toPrimitive方法出来之前，也有这一套转换规则，同样的引用数据类型中也会内置两个方法，一个是valueOf，一个tosSring，当需要被转换为数值时，就会调用valueOf，返回值就为转换后的原始数据类型，若需要转换为字符串类型时，就会调用，toString，返回值就为转换后的原始数据类型，具体代码分析如下。这里提一嘴，Boolean的转换，不会触发引用数据类型的转换，且Boolean转换中，除了undefined，null，NaN，0，为false之外否为true。...
2022-07-20 10:55:01
409
原创 常见的web攻击有哪些？如何防御？
web攻击是什么Web攻击(WebAttack)是针对用户上网行为或网站服务器等设备进行攻击的行为，如植入恶意代码、修改网站权限、获取网站用户隐私信息等Web应用程序的安全性是任何基于Web业务的重要组成部分确保Web应用程序的安全十分重要，即使是代码中很小的bug也有可能导致隐私信息被泄露，站点安全就是为了保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践常见的Web攻击有:XSS (Cross Site Scripting) 跨站脚本攻击 CSRF（Cross-site
2022-04-03 16:28:40
7327
原创 深拷贝与浅拷贝的区别？如何实现它们？
浅拷贝指的是创建一个新数据，这个数据有着与原始数据的一份精确拷贝，如果原始数据是基本类型的数据，那么拷贝出来的数据就是原始数据的值，如果原始数据为引用数据类型的值，那么，拷贝的就是原始数据的内存地址，也就是说，浅拷贝只会拷贝一层数据，其他的引用数据类型的值，只会拷贝其内存地址，也就是会共享一个堆数据实现:function shallowClone(obj) { if(typeof obj == "object" && obj != null) { con
2022-03-28 21:06:56
322
原创 元素不定宽高的情况下水平垂直居中的方法有哪些？
实现方式 定位 + margin:auto 定位 + margin: 负值 定位 + transform table布局 flex布局 grid网格布局 定位+margin:auto<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative;.
2022-03-27 17:44:26
1487
原创 优化css性能有哪些方法?
虽然css在整个项目中占的比重并不多，但是他也是贯穿页面的全程的，一些细节上的性能优化是十分必要的。方法有很多，主要围绕，css加载，选择器嵌套，http请求内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import内联首屏关键CSS这个可能对于一些大项目而言做起来过于麻烦，但是也是一种不错的性能优化方案，在一个页面打开的时候，首要的内容出现在屏幕上的时间影响着用户体验，在加载html页面的时候如果通过链接的方式去加载css的话，需要等到
2022-03-27 16:10:37
1621
原创 什么是响应式设计？如何实现？
概念: 响应式网站设计(Responsive Web Design) ，是一种网络页面布局设计，页面的设计与开发与用户行为以及设备环境(系统，终端，分辨率，屏幕定向)进行相应的响应与调整。类似一句名言：“content is like water”响应式设计的特点: 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大小和位置 如何实现响应式网站的设计原理就是依据媒体查询的功能，监测不同的屏幕尺寸..
2022-03-26 21:49:10
530
原创 怎么理解回流与重绘？什么场景下会触发？如何减少？
要想理解什么是回流与重绘，那我们就务必需要知道，浏览器是如何从空白页面渲染到一个结构完整样式清晰的页面的浏览器渲染过程:1. 解析DOM 生成DOM树 (DOM Tree)，解析CSS 生成CSS树(CSS Tree)2. 将CSS树与DOM树结合，生成渲染树(Render Tree)3. (layout)触发回流，根据渲染树，进行回流，得到节点的集合信息 (位置 ，大小)4. (Painting)触发重绘，根据渲染树以及得到的集合信息，得到节点的绝对像素5. (display)展示
2022-03-26 19:55:58
1310
原创 防抖与节流
防抖：概念：前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发 只会执行一次代码：function _throttle(fn, interval) { let timer, firstTime = true return function () { let _me = this, args = arguments // 如果是第一次执行 if (firstTime) { ...
2022-03-25 00:11:44
528
原创 手写Promise总结（源码+类方法封装+关键性问题列举）
前言：前面几篇文章我们对Promise进行了一个手写的封装，也提及到了一些有关方法的关键问题和执行机制，以及Promise的执行机制，也分别从异步和同步方向进行了考量。下面我就列举出有关Promise以及Promise相关方法的一些关键性问题，之后会给出完整的手写Promise源码，以及类封装的源码。关键性问题：1. 串联多个任务简单来讲就是 通过 then方法来链式调用多个任务(异步) 值得注意的是 then 方法链式调用的时候 需要等上一个then方法结束返回了之后才会调用下一个2. 改
2022-01-11 10:58:42
138
原创 手写Promise（原生Promise剖析五 - - resolve，reject等方法封装）
前言：在此之前，我们以及陆续封装好了Promise、then、all，这些方法，并且以及讲解了其中的机制，和封装的过程，现在，我们就把剩下的较为简单的方法过一遍。1. race()这个方法类似于all方法，传入的参数也是一个有Promise组成的数组，但是它的结果分析起来就相对简单很多，不用过多的考虑，其返回的值也是一个Promise对象，既然返回的是一个Promise对象，那么就存在链式调用，那么就需要进行二次封装，内部就需要调用then方法，它的结果机制是这样的：返回的是一个Promise对象，
2022-01-09 11:36:56
922
原创 手写Promise（原生Promise剖析四 - - catch方法封装 - -（异常穿透））
首先，对于这个catch方法来说，是很简单的，因为它只帮我们做了一件事，那就是调用失败的回调，如下: let p1 = new Promise((resolve, reject) => { reject("Oh no") }) p1.then(value => { console.log("ok") }).then(value => { consol
2022-01-07 22:50:49
985
1
原创 手写Promise（原生Promise剖析三 - - all方法封装）
前言：上篇文章中，我们以及构建出了基本的then()方法，并且处理掉了一些关键性问题，如链式调用怎么二次封装，链式调用then()方法返回值如何，并且完整的列举出了三种情况，分别是：非Promise，Promise（成功Promise、失败Promise）、抛出异常 , 时的返回值情况。最后我们留下了一个问题，就是有关这次文章的主题，那就是all()方法中，一次传入多个Promise组成的数组，最终结果如何，我们又该如何完美的封装它?首先，我们就需要了解官方的Promise.all()方法是怎么运作的，
2022-01-06 22:11:41
1252
原创 手写Promise（原生Promise剖析二--then方法的封装）
前言：在上一篇文章中我们已经基本了解到Promise是什么以及Promise能干什么。并且我们已经基本构建出了一个Promise对象的基本结构。现在我们需要知道什么是then()方法，并且then()方法有什么作用，有一定Promise基础的人一定知道，then()方法是在创建Promise对象之后，可以通过Promise实力对象调用的一个处理回调的函数，其中，包含成功的回调（value => {}），失败的回调（reason =>{}）。同上一篇文章中讲到的状态改变，调用的回调函数是同一个
2022-01-04 10:32:39
564
原创 手写Promise（原生Promise剖析一）
在手写Promise之前，我们需要了解一下什么是Promise，为什么要引入Promise。1.Promise是ES6引入的一种解决异步编程的方案。2.为什么要引入Promise呢？可以从问题的根源出手，在我们写一些嵌套的回调函数时会发现，最基本的问题就是回调地狱的产生，同时伴随着当我们不去手动处理回调结果和异常时，我们就很头疼，没办法直接捕获到结果和异常，这时候，Promise就诞生了，他就相当于一个助手，当你将你所需要的回调让他去处理时，他会根据你说提供的回调返回给你一个“正确”、“错误”或者“
2021-12-30 23:47:02
792
原创 leedcode 删除有序数组中的重复项 (JavaScript)
题目:给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。示例 1：输入：nums = [1,1,2]输出：2, nums = [1,2]解释：函数应该返回新的长度 2 ，并且原数组 nums 的前两个元素被修改为 1, 2 。不需要考虑数组中超出新长度后面的元素。思路:首先，我们要理解一下什么是双指针，就是字面意思，两个指针啦，
2021-11-22 23:17:15
76
原创 leedcode 合并两个有序链表 (JavaScript)
题目:将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。示例 1：示例 2：输入：l1 = [], l2 = []输出：[]示例 3：输入：l1 = [], l2 = [0]输出：[0]思路:这道题的思路很简单，就和合并数组很像，但是这里是链表，而单向链表只认next操作这个规则想必也不用多说，这里我们先创建一个空链表用来保存新产生的链表，随后创建一个dummy指向这个新链表，当 l1 以及 l2 都不为空时...
2021-11-19 09:24:35
575
原创 leedcode 有效的括号 (JavaScript)
题目:给定一个只包括 '('，')'，'{'，'}'，'['，']'的字符串 s ，判断字符串是否有效。有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = "()"输出：true思路:这道题又要用到我们一个老朋友，哈希表，没错，这道题分析起来很简单，只要注意一个点，就是堆栈思想，这道题主要考察的是我们的堆栈思想，也就是 “先进后出，后进先出” 。第一步: 我们创建一个 map() 并初始...
2021-11-17 00:29:24
74
原创 leedcode 回文数 (JavaScript）
题目：给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。 回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121 是回文，而 123 不是。示例1:输入:x = 121输出:true思路：这道题相对而言比较简单，重点是我们可以通过这道题来了解解这种有关 “回文” 题惯用的思路是什么，那就是，从循环遍历的过程中向两边遍历，或者直接从两边开始向内遍历，这道题就是要...
2021-11-15 00:00:26
952
原创 leedcode 删除链表的倒数第N个节点 （JavaScript）
题目：给你一个链表，删除链表的倒数第n个结点，并且返回链表的头结点。示例 1：输入： head = [1,2,3,4,5], n = 2输出： [1,2,3,5]思路：这道题的解题思路挺巧妙的，首先要清除的是删除链表节点需要做的不只是简单的删除其中一个数字这么简单，而且也没有这种方式去删除 ，方法就是数据结构中的，指针指向改变，通过将倒数第n+1个节点的的指针指向改成指向倒数第 n - 1 个节点即可，而这道题的关键在于，不清楚链表长度，以及删除的是倒数第n个节点。分..
2021-11-14 00:33:44
1333
原创 leedcode 三数之和 (JavaScript)
题目：给你一个包含 n 个整数的数组nums，判断nums中是否存在三个元素 a，b，c ，使得a + b + c = 0 ？请你找出所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元组。示例 1：输入：nums = [-1,0,1,2,-1,-4]输出：[[-1,-1,2],[-1,0,1]]思路：代码：...
2021-11-11 23:48:34
679
原创 leedcode 无重复字符的最长子串 (JavaScript)
题目：给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例1:输入: s = "abcabcbb"输出: 3解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。思路：代码：var lengthOfLongestSubstring = function(s) { const set = new Set() let i = 0 , j = 0 let maxLength = 0 if(s.length === ...
2021-11-11 14:15:40
529
原创 leedcode 最长回文子串 (JavaScript)
题目：给你一个字符串 s，找到 s 中最长的回文子串。示例 1：输入：s = "babad"输出："bab"解释："aba" 同样是符合题意的答案。思路：首先根据输入案例我们也能知道，最长回文子串会出现两种情况，首先先分析第一种大家默认的情况也是相对比较好理解的情况 ，就是上面的输入案例这种：1.准备一个循环，遍历字符串里的所有字符，一个 maxLength 用来存储遍历到的子串的长度 ，以便判断是否为最长的回文子串，一个子串头部标记 start 用于监测字串的最左边的字符，便于最后
2021-11-10 12:52:46
422
原创 leetcode 两数之和 (JavaScript）
题目：给定一个整数数组 nums和一个整数目标值 target，请你在该数组中找出 和为目标值 target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 ：输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。...
2021-11-09 22:19:17
439
原创 leedcode两数相加（JavaScript）
题目：输入：l1 = [2,4,3], l2 = [5,6,4]输出：[7,0,8]解释：342 + 465 = 807.解题思路：创建一个节点，用作新链表的头部节点，并且分别用两个指针指向这个节点，一个节点指向不变，一直指向这个头部节点，用于最后返回新链表，另一个指针用于循环生成新链表，在这道题中，需要注意的细节就在于是否进位的问题，那么再循环生成新链表的过程中，，每生成一个节点，就要做一次取模（sum % 2）和取余（Math.floor(sum/10）)用一个变量carr
2021-11-09 00:07:33
164
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人