- 博客(75)
- 收藏
- 关注
RSS订阅
原创 大厂前端面试题总结（Vue篇）
注： 目录带*号的是已经有答案的，没有带*的是暂时还没有答案的。双击标题可快速上下切换内容呦！本文内容持续更新中，如果您认为不错，还请点赞收藏下哦！系列文章大厂前端面试题总结（CSS篇）大厂前端面试题总结（ES6篇）大厂前端面试题总结（浏览器篇）大厂前端面试题总结（性能优化篇）大厂前端面试题总结（Web安全篇）大厂前端面试题总结（JS理论篇）大厂前端面试题总结（JS手写篇）目录1、Vue有哪些指令2、v-if和v-show有什么区别3、Vue响应式原理4、Vue生命周.
2021-02-02 14:20:39
3145
2
原创 2021前端面试题汇总——查漏补缺
线下雷石有两个问题不甚清楚：Vue：离开正在编辑或者未保存页面弹出信息提示如何做到？参考答案Git：如何保存某个分支已经开发一部份的代码到另一个分支上？参考答案其他问题：
2021-04-25 15:38:15
642
原创 手写实现数组flat、filter等方法
Flatflat 是将数组扁平化的一种方法。比如：我们有一个数组：let arr = [ [1,2,3], [4,5,6], [6,7, [3,4]] ]现在需要将数组元素转化成 [ 1, 2, 3, 4, 5, 6, 6, 7, [ 3, 4 ] ] （浅扁平）或 [ 1, 2, 3, 4, 5, 6, 6, 7, 3, 4] （深扁平）浅扁平：只能扁平化二级数组深扁平：可以扁平多维数组浅扁平实现第一种：自带方法function myFlat(arr) { arr = Array
2021-03-30 16:00:24
839
原创 回文链表
昨天练习了 验证回文字符串 ，回文的定义已经在该篇中定义过了，今天练习 回文链表。题目描述请判断一个链表是否为回文链表。示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true进阶你能否用 O(n) 时间复杂度和 O(1) 空间复杂度解决此题？思路昨天练习 验证回文字符串 使用了镜像对称思维，其思想是建立在 长度已知 并能使用 双指针 基础上。但对于链表来说，其 长度 是不可知的，并且凭虚生成的指针是不能指向.
2021-03-19 15:18:41
577
原创 Vue SSR 报错 RangeError: Maximum call stack size exceeded
本篇会陆续收集以后遇到的浏览器 内存溢出 异常导致的原因情况一如图所示：我在使用 Vue 创建 Template 时候发生报错的原因：我使用的第三方插件（含组件）与我自定义的 Components 组件 互相调用导致的。比如：我在 Editor 组件中调用一个第三方插件import { Editor } from "@toast-ui/vue-editor";，第三方插件的 conponent name 同样是 Editor。两者互相调用就导致内存溢出了...
2021-03-16 18:13:20
232
原创 面试又碰到 LRU ，你能用 JS 实现吗？
在您的 vscode 安装 leetcode 插件的前提下，以下代码可以直接复制到 vscode 创建的文件中，直接运行哦！算法LRU 缓存机制可以通过哈希表辅以双向链表实现，我们用一个哈希表和一个双向链表维护所有在缓存中的键值对。双向链表按照被使用的顺序存储了这些键值对，靠近头部的键值对是最近使用的，而靠近尾部的键值对是最久未使用的。哈希表即为普通的哈希映射（HashMap），通过缓存数据的键映射到其在双向链表中的位置。这样以来，我们首先使用哈希表进行定位，找出缓存项在双向链表中的位置，随后.
2021-03-16 15:19:58
156
原创 浏览器兼容性
延伸问题：浏览器内核有哪些定义浏览器由于内核的不同导致在解析页面时会存在差异，从而使相同的代码渲染出不同的效果或者有的能够触发事件，有的不能够触发事件，这就是浏览器的 兼容性① 。①:浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。—百度差异了解了兼容性的定义，那么我们可以从浏览器的内核（引擎）、HTML、CSS去考虑内核浏览器内核（引擎）其实指的是 浏览器②渲染引擎。浏览器渲染引擎是由各大浏览器厂商依照.
2021-03-15 18:43:44
395
原创 JS手写EventEmitter实现方式（每一行都有注释，保证小白也能看得懂）
class EventEmitter { constructor() { this._events = {} // 初始化events事件对象 } /** * 触发事件 * 原理：将该事件增加到该事件类型的队列中 * 状态：未执行 * @param event 事件名称 * @param cb 回调函数 */ on(event, cb) { const query = this._events[event] || [] // 获取原队列
2021-02-26 18:26:33
1420
3
原创 JSONP的手写实现
JSONP的前世今生JSONP的出现是为了解决跨域——浏览器请求资源调用的问题而出现的。在了解跨域概念之前，需要先学习同源策略同源策略同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。跨域就是为了突破同源策略的限
2021-02-19 14:41:20
435
原创 JS手写最大并发控制实现方式（主要针对类HTTP大量请求问题）
/** * 此问题目的为了解决类似http请求的并发量过大导致内存可能溢出的问题。 */function concurrentPoll() { this.tasks = []; // 任务队列 this.max = 10; // 最大并发数 // 函数主体执行完后立即执行，由于setTimeout是macrotask（宏任务），promise是microtask（微任务） // 所以，addTask方法添加的函数会优先执行 setTimeout(() =>
2020-12-16 10:38:48
1908
原创 JS手写callback封装成promise的实现方式
本篇文章以封装fs异常回调为测试对象，参考链接：https://www.cnblogs.com/hsprout/p/5588859.htmlconst fs = require('fs')const promisify = function (fn, receiver) { return function () { let _len = arguments.length, args = Array(_len), _key = 0.
2020-12-15 11:40:49
890
原创 JS手写Promise.retry的实现方式（含优化方案）
Promise.retry()`的目的主要是为了解决同步调用失败重新尝试问题。代码实现原理：手写一个随机数生成函数，判断结果是否大于或者小于某个阙值，如若在判断次数以内则依据返回结果，否则重新尝试执行随机数生成函数，超过判断次数则抛出异常/** * 方式一 * 请求失败后，加入失败重试功能，如果5次全部失败，则返回失败结果，只要5次尝试中有任意一次成功，则返回成功 * @param fn 绑定函数 * @param times 请求次数 * @param delay 延迟时间 */P.
2020-12-14 11:48:05
2793
原创 大厂前端面试题总结（JS手写篇）
系列文章大厂面试题总结（CSS篇）大厂面试题总结（ES6篇）大厂面试题总结（浏览器篇）JS手写篇目录防抖和节流深拷贝防抖和节流深拷贝
2020-12-10 10:18:15
2197
5
原创 JS手写instanceof实现方式
// 使用方式function Car(color) { this.color = color this.sayColor = function () { console.log(this.color) }}// const cc = new Car('red')// console.log(cc instanceof Car)/** * 重点是分为基本数据类型和引用数据类型判断 * 引用数据类型中，需要判断对象（child）的原型链是否相等 *
2020-12-09 11:17:27
561
1
原创 JS手写实现new的实现方式
function Father(name) { this.name = name this.sayWorld = function () { console.log(`Hello ${this.name}!`) }}// const fa = new Father('小明')// fa.sayWorld()function myNew(that, ...args) { const obj = Object.create(null) obj.
2020-12-08 10:33:21
1395
原创 JS手写实现Promise.all的实现方式
Promise.prototype.all = function (iterators) { const promises = Array.from(iterators) const promiseList = [], len = promises.length let count = 0 return new Promise((resolve, reject) => { promises.forEach((promise, index)
2020-12-08 09:46:20
2141
原创 JS手写Promise代码ES6方式实现
本篇只简单实现Promise，不包含链式调用等。若想详细了解请参考链接，由于Promise实现采用了发布订阅模式，所以想要了解原理的可以参考观察者模式和发布订阅模式的区别代码实现const STATUS = { PENDING: 'pending', FULFILLED: 'fulFilled', REJECTED: 'rejected'}class MyPromise { constructor(executor) { this.status .
2020-12-03 13:45:33
443
原创 JS手写sleep实现的三种方式
第一种方式：使用Promise + setTimeout实现function sleep(time) { return new Promise(resolve => { console.log(resolve) setTimeout(resolve, time) })}sleep(10000).then(res => { console.log(`sleep exe ending!`)})第二种方式：使用callback回调
2020-12-02 10:17:46
2185
原创 JS手写call、apply的实现方式
call()、apply()、bind()()三种方法主要用来改变this指向，区别在于三种方法的使用方式不同。call(obj, ...)方法通过以单个参数传入方式使用。注意：标红处...表示多个参数；以下代码仅测试方法是否能够使用，并没有测试传参问题。var a = 5;var obj = { a: 3, fun1: function () { console.log(this.a); }};Function.prototype.myCall =
2020-12-01 18:57:54
553
原创 JS数组乱序实现两种方式
简单方式：// 由于小数点精度问题会导致每个位置乱序的概率不同function arrRandom(arr) { return arr.sort( () => { return Math.random() - 0.5; })}著名洗牌算法：// 著名的Fisher–Yates（费舍尔耶茨） shuffle 洗牌算法function shuffle(arr) { let res = arr, m = arr.length; while(m > 1){ let in
2020-12-01 18:56:51
941
原创 JS深拷贝实现两种方式
递归复制方式：function deepClone(obj) { let res = Array.isarray(obj) ? obj : {}; for (let key in obj){ if (obj.hasOwnPrototype(key)) { if (typeof obj[key] === 'object' && obj[key] !== null) { res[key] = deepClone(obj[key]); } } else {
2020-12-01 18:56:02
1065
2
原创 JS实现防抖和节流的实现方式（含实现代码）
防抖表示当指定时间内持续触发某个事件时，该事件会进行初始刷新，重新开始计算。function debounce(fn, time) { let timer = null; return function() { if (timer) clearTimeout(timer); timer = setTimeout({ fn.apply(this, arguments); }, time) }}节流当指定时间持续触发某个事件时，该事件只会执行首次触发事件，也就是说指定时间内只会触
2020-12-01 18:54:58
1445
原创 JS实现继承的六种方式
// 第一种方式：对象冒充（不推荐）// 注意：此种继承方式对象实例化后在编译器中继承对象（children）不会代码提示父类的方法（parent）// function Parent(username) {// this.username = username// this.getUsername = function () {// console.log(this.username)// }// }// function Children(user
2020-12-01 18:52:25
297
原创 中大型项目必知：jest/vue-test 如何在单元测试中引入第三方插件（例如： $ is not defined）
前言我碰到一个问题，我的jq插件配置的全局变量，现在需要测试单个组件，单元测试这个组件的时候里面使用jq的全局变量，现在测试会报错：‘全局变量，现在测试会报错：`全局变量，现在测试会报错：‘ is not defined`，异常如下：我看vue-test官网文档里面可以通过localVue引入vuex、vue-router等，但由于jq是全局配置，不知道怎么引入解决方案方案一：一开始我就想到了一种最不适合，但校验结果最快的解决方案，那就是直接在测试组件里面引入需要使用的插件包。但是这样做会导致
2020-11-26 15:27:12
2081
原创 大厂前端面试题总结（JS理论篇）
JS什么是DOM、BOMBOMBOM即浏览器对象模型，是在客户端脚本核心的基础上实现的扩展API，通过该API可以使用脚本访问浏览器窗口及其文档对象的各个方面。BOM从IE3.0/NS3.0开始引用。Window对象其实是BOM中所有对象的核心对象，所有的对象都源自window对象，它表示整个浏览器出口。在BOM API中，把WEB浏览器的各个主要外显特性、WEB页面及其标记、内容等都封装成一个对象，通过这些对象提供的成员访问窗口、文档、元素对象等，并在此基础上实现了对象的事件支持机制。所有BO
2020-11-12 16:21:03
1969
原创 私人定制(附源码)：弹出框统一样式一个JS文件就可以解决！
前言毋庸置疑，现在的CP经理对于浏览器自带的弹出框已经产生审美疲劳。在这里为什么我会强调CP经理呢？因为下面的陈述句可能就是你我都日常：…我认为这个需求可以实现…哦？这个效果实现不了吗？…那个太难看了，咱能不能自己做个？…现在我就是用户！！！…注：CP经理——传说中一种可怕的怪物，对于程序猿有望而生畏的核弹级杀伤力！是故，为了守护世界的和平！为了防止世界被破坏！！为了不再996！！！为了面前的诸位小可爱们不再承受可怕的定制化弹出框的迫害！我！一名茫茫苦海屌丝程序员！决定亲自手
2020-10-26 10:49:30
472
原创 git如何将另一个分支的指定commit合并到另一个分支
背景假设有一个项目存在一个主干分支和若干分支： remotes/origin/HEAD -> origin/master remotes/origin/master remotes/origin/v1.0.1 remotes/origin/v1.0.2 remotes/origin/v1.0.3 remotes/origin/v1.0.4 remotes/origin/v1.0.5需求描述要将master提交的某个commit合并到v1.0.5操作步骤1、clo
2020-10-16 15:44:40
10343
原创 Git将分支代码合并到主干/将主干代码合并到分支
分支代码合并到主干：https://www.cnblogs.com/eastwjn/p/9729494.html主干代码合并到分支：https://blog.csdn.net/wl_public/article/details/89886990?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-3-89886990.nonecase&utm_term=git%E5%A
2020-09-24 18:07:35
817
原创 Express的请求URL是否区分大小写
Express的请求URL默认是将所有的请求转化成小写的这是为了兼容HTTP请求协议有的版本默认会将URL转化成小写，如HTTP1.0，有的版本不会将URL请求转化成小写，如HTTP1.1可以通过Express设置是否启用转化功能：app.set('case sensitive routing', true); // 关闭转化功能，即不会将大写转化成小写...
2020-09-16 16:00:14
483
原创 package.json scripts参数windows系统只能运行单个进程问题
项目场景：提示：项目为Node项目，并且此项目中包含两个package.json，即：my-project --admin/ --node_modules/ ... --package.json --node_modules/ ... --package.json 问题描述：运行代码：npm run dev && cd admin && npm run dev，package.json文件内容如下：{ "scripts": { "
2020-09-04 19:23:01
421
1
原创 大厂前端面试题总结（性能优化篇）
性能优化一、性能评测标准首次内容绘制时间首次有效绘制时间首次输入延迟最长预估值首次CPU闲置时间可交互前耗时速度指数二、前端性能优化手段三、SPA应用的首屏加载速度慢优化将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel的体积，在调用某个组件时再加载对应的js文件；加一个首屏loading图，提升用户体验...
2020-08-07 10:11:39
1666
原创 大厂前端面试题总结（浏览器）
浏览器一、从输入URL到呈现页面过程二、强缓存、协商缓存、CDN缓存三、HTTP2四、HTTP状态码五、三次握手与四次挥手六、跨域（JSONP/CORS）七、跨域时如何处理cookie八、垃圾回收机制九、DNS解析过程十、请求报文与响应报文十一、浏览器如何渲染页面的一、从输入URL到呈现页面过程1、域名解析当我们在浏览器中输入一个URL，例如”www.google.com”时，这个地址并不是谷歌网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，因此我们输入的网址
2020-07-28 11:34:52
1831
原创 大厂前端面试题总结（ES6篇）
ES6一、let、const、var的区别二、箭头函数和普通函数的区别三、变量的结构赋值四、promise、async await、generator的区别五、ES6的继承和ES5相比有什么不同六、JS模块化（commonjs/AMD/CMD/ES6）
2020-07-24 10:44:00
1610
原创 nodejs pm2 SyntaxError: Unexpected token ...
前提条件操作系统：centos7已安装NodeJS博主需要在服务器上部署Node+Vue项目报错由于服务器上自己已经安装了Node，所以就直接进行以下操作：npm install pm2 -g 安装成功后，使用：pm2 start app.js --watch //监听需要后台运行的文件然后报以下错误：解决方法1、升级node版本npm cache clean -f //第一步：先清除npm缓存：npm install -g n //第二步：安装n模块：n s
2020-06-22 17:43:06
4835
1
原创 Git关于分支常用命令记录，切换分支、下载指定分支
切换分支// 查看当前所有分支git branch -a// 切换分支git checkout -b orrgin/xxx // xxx是版本号下载指定分支// branchname表示分支名称，具体名称参考 示例3// xxxx表示URL（注意，具体命令中不带"[xxx]"中括号）git clone -b [branchname] http://[xxxx].git...
2020-06-05 10:07:10
378
原创 Shell 输入命令捕捉系统错误并赋值给变量&复习模糊匹配
输入命令捕捉系统错误并赋值给变量&复习模糊匹配问题描述知识点复习问题描述今天在完成需求时，需要完成这样一个功能：将系统输出的错误进行捕捉并赋值给一个变量，再将该变量进行模糊匹配。知识点复习该功能涉及两个知识点，捕捉系统错误并赋值给变量模糊匹配通常来说我们会通过**cat、echo…**等命令获取系统输出，可是在执行命令过程中，系统报错我们是捕捉不到的，比如cat /dev/ttyS0当系统设备没有改串口时执行改命令，会报错：模糊匹配的概念之前学习并使用过，但是过了一段时间
2020-05-12 12:07:57
464
原创 js export import : Uncaught SyntaxError: Unexpected identifier
问题问题描述今天尝试使用ES6 import和export导入模块报以上错误原因以下为js文件首行导入代码import Validate as val from './Validate.js'当使用import的as关键词时忘了加{}，即import {Validate as val} from './Validate.js'...
2020-04-08 15:04:55
1083
原创 暴力移除：拼写单词（Java，ArrayList）
给你一份『词汇表』（字符串数组）words和一张『字母表』（字符串）chars。假如你可以用chars中的『字母』（字符）拼写出 words中的某个『单词』（字符串），那么我们就认为你掌握了这个单词。注意：每次拼写时，chars 中的每个字母都只能用一次。返回词汇表words中你掌握的所有单词的 长度之和。示例 1：输入：words = ["cat","...
2020-03-17 11:55:11
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人