前端面试800问
关注
分享
扫一扫
伯约同学
更新前端面试的一些常见题目，记录学习过程
展开
-
JavaScript中数组的splice方法和slice方法详解
JavaScript中数组的splice方法和slice方法详解最近在做一些算法题，不能说不知道splice方法和slice方法怎么用，但是总是写出来有点点小问题，干脆就整理一下，再试两个小例子写一篇文章，彻底弄明白。splice方法splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。一般使用的格式是这样的array.splice(start)array.splice(start, deleteCount)array.splice(start, deleteCount,原创 2022-03-14 22:43:39 · 1502 阅读 · 0 评论 -
块级元素与行内元素的区别以及BFC模型的简单解释
块级元素与行内元素的区别以及BFC布局的简单解释工作中其实经常用到一些span标签和div标签来进行内容的显示，但涉及到文本标签的换行，总得多花那么一两分钟多写一下，今天就专门来瞅一瞅。按照标签的分类可以分为块级元素和行内元素什么是块级元素？独占其父元素的整个水平空间，垂直空间等于其内容高度的元素称之为块级元素。我们常用的div、h、p等标签都属于块级元素可以看到，对于一个普通的div标签而言，其内部元素是可以超出其限定高度进行显示，有与外界内容重叠的情况<head> &l原创 2022-03-06 20:58:45 · 266 阅读 · 0 评论 -
CSS伪元素的基本使用
CSS伪元素的基本使用上一篇文章介绍了很多个伪类的使用，这篇来说一下伪元素。伪元素之所以称为“伪”，主要是因为它不是真正网页里的元素，但是标线行为又跟真正网页元素一样，也可以对其使用css操作。伪元素比较少，今天就一个个的用法，不分门别类了。一、::after和::beoreafter和before用的比较多一些。都是配合content来给元素添加一些装饰.item::before {content: ‘*’;color: red}.item::after {content: ‘*’;原创 2022-03-04 23:09:38 · 874 阅读 · 0 评论 -
CSS伪类的基本使用
前端基础：CSS中伪类的作用和基本使用作为一名优秀的前端开发，不会使用伪类和伪元素有点说不过去。但是很多小白可能伪类和伪元素都分不清楚，我先同通俗的话解释下：伪类是用来给指定选择器添加状态效果，伪元素是给指定元素添加内容修饰。今天先带大家看一下伪类是如何使用的，明天给大家演示下伪元素的使用。常见的伪类诸如:active/:focus/:hover/:visited/:first-child等大家可能比较熟悉，用的比较频繁，实际上伪类有几十个，下面分门别类的展示一下一、用于链接，按钮等元素的常见伪类原创 2022-03-03 22:49:16 · 834 阅读 · 0 评论 -
二分法的左右边界
二分法的左右边界二分法用起来还是挺好用的，就是每次我总是纠结边界条件到底如何确定，用小于号还是小于等于号，满足条件后left是mid还是mid+1，为此专门做了两道简单题，整理了下思路。题目一给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法var searchInsert = function(nums, target) { let left = 0 let right原创 2022-03-02 22:19:42 · 364 阅读 · 0 评论 -
Vue2和Vue3进行开发的区别
使用Vue3和Vue2进行开发的区别笔者虽然老早就是用vue3进行开发了，但是上次有人问道使用vue3进行开发跟使用vue2进行开发的区别有哪些这个问题的时候，回答的还是有些琐碎，干脆今天专门整理一下，做个记录。一、再也不用set了众所周知，vue3使用的是Proxy对象进行代理，对数据进行监控，而vue2是使用object.defineProperty()来实现的，针对数组或者对象的新增属性的变化是需要专门用vue.set方法去做处理，通过命令的方式添加一个监控。大家有兴趣可以看看Proxy如何使用原创 2022-03-01 22:06:48 · 637 阅读 · 0 评论 -
DNS域名解析过程简述
DNS域名解析过程简述我们知道，域名是为了方便用户记忆而专门建立的一套地址转换系统。虽然用户在web端输入了url可电脑想要找到资源还是需要对应资源所在服务器的准确ip。于是乎，在获取、请求资源之前，需要有这么一点点时间用在dns解析上（根据域名找ip的过程就是域名解析）域名跟ip的映射包括我们的浏览器、操作系统、路由器、dns服务器都有做处理。首先是浏览器，如果用户访问到了一个资源，浏览器会记录该资源对应的ip并以一定频率进行刷新。其次是我们的电脑，当浏览器中没有记录我们的ip时它就会去电脑中找，原创 2022-02-28 22:24:28 · 807 阅读 · 0 评论 -
2022金三银四前端面试题预告
2022金三银四前端面试题预告马上就到了面试季了，今天整理了一下前端常见的一些面试题。虽说面试的时候造火箭，需要你背好八股文，不过很多基础还是应该掌握的，就算不面试，也应该多看一些基础，内功深厚了，将来说不定还开始写框架了，嘿嘿嘿项目介绍你觉得前端包括什么自我介绍为啥离职聊项目（项目的背景、你的角色、团队情况、技术难点、怎么解决、项目收益、个人收获）聊项目（聊的很深）职业思考你是怎么学习前端的你想要实现一个功能时，你不知道vue怎么实现，你是怎原创 2022-02-28 21:30:36 · 544 阅读 · 0 评论 -
HTML文件怎么写？简述构成HTML文件的几大元素
HTML文件怎么写？简述构成HTML文件的几大元素如何编写一个html文件，可能是一个前端小白最应该了解的问题。今天就针对html文件构成的几大元素做一个讲解并简述一下它对应的属性<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档的标题</title><link href="./test.css"></head><bod原创 2022-02-27 22:37:07 · 853 阅读 · 0 评论 -
JavaScript中==和===的区别
JavaScript中和=的区别js中我们经常会判断两个值相等不相等，用到的就是相等运算符和严格相等运算符。一般情况下，只要变量的数据类型可以确定，我们都使用===来进行判断下面对两个元素符的使用或者说是判断规则进行一下讲解一、==相等运算符相等运算符在进行类型判断时可能会进行一些类型转换1、如果有一个操作数是布尔值，那么在进行比较时还会将其转换为数值1 == true // true2、如果一个操作数是字符串，另一个是数值，在比较的时候会将字符串改成数值1 == '1' // true原创 2022-02-26 12:50:35 · 2931 阅读 · 1 评论 -
学习VUE3总得知道Proxy怎么使用吧
学习VUE3总得知道Proxy怎么使用吧我们都知道vue2是使用object.defineProxy实现数据监控的，但在vue3中改成了使用JS新增的Proxy对象。今天就来看一下Proxy 是如何使用的Proxy对象用于创建一个对象的代理，进而实现基本操作的拦截和定义。它的基本语法是const p = new Proxy(target, handler)target是使用Proxy包裹的目标对象handler是一个通常以函数作为属性的对象，其中各属性定义了执行各种操作时的代理行为，它可以有一原创 2022-02-25 23:32:31 · 1030 阅读 · 0 评论 -
304状态码详解（协商缓存）
304状态码详解（协商缓存）上一篇文章针对不同的状态码做了一个整理，还说到要专门针对304做一个详解，于是与，今晚又来学习了。首先说一下背景：我们知道前端代码打包后需要部署到静态服务器上。客户端通过输入url就能看到对应的页面。从客户端到服务器发送请求到接收资源需要建立连接、消耗宽带。但是静态资源的更改频率往往没有那么高，于是就有一些专门的response header设置。通过这些设置让浏览器在获取资源文件时直接从本地硬盘或者内存获取，而不必再发送请求。这样也减轻了服务器的负担，同时还加快了客户端原创 2022-02-24 22:43:58 · 7813 阅读 · 0 评论 -
http3不再使用tcp协议的原因
http3不再使用tcp协议的原因上一篇文章整理了http0.9-http3的整个变化过程，但是说的不是很详细。比如浏览器是如何利用http1.1的，多个请求如何处理？http2到http3的底层协议特点以及对应的改变背景都没有说清楚。今天就专门针对http3不再使用底层的tcp协议这个问题作为引子，详细阐述下对应的改变原因。首先说我们经常提到的TCP协议：TCP协议通过数据分片、到达确认、超时重发、滑动窗口、失序处理、重复处理、数据校验等规定，为使用TCP连接的双方提供一个面向连接、可靠的字节流服原创 2022-02-22 22:01:58 · 733 阅读 · 0 评论 -
从HTTP/0.9到HTTP/3：细数http协议的进化史
从HTTP/0.9到HTTP/3：细数http协议的进化史http协议是前端工作者必须了解的知识，也是面试的重要考点，今天就讲一下http协议的发展历程。一、http0.9http0.9是在1991年发布的协议，考虑到当时的社会情况和计算机发展，我们不难想象，彼时的电脑最多就是向服务器请求一个页面，所以协议也就较为简单，规定服务器只能返回html格式的字符串。二、http1.0到了1996年，计算机飞速发展，http协议随之升级。它增加了更多格式内容的传输，诸如图像、视频、二进制文件等，此外还增加原创 2022-02-21 22:41:58 · 410 阅读 · 0 评论 -
JS中的进程、线程、任务队列、事件循环、宏任务、微任务、执行栈等概念理解
JS中的进程、线程、任务队列、事件循环、宏任务、微任务、执行栈等概念理解javascript中有很多需要知道的概念，尤其是标题中列出来的这些，今天就来过一下这些概念。一、进程和线程浏览器的每一个tab页可以看做是浏览器内核进程，每个进程下面会有多个线程来互相配合完成任务比如 GUI线程、JS引擎线程、网络线程、定时器线程等二、任务队列任务队列可以当做是一个个的对调任务，当主线程的任务完成后，就开始执行任务队列中的任务（如果当前任务队列中再添加了新的异步任务，则其回调函数会放在之后的任务队列中）原创 2022-02-20 22:42:15 · 1335 阅读 · 0 评论 -
前端应知应会：flex布局详解
前端应知应会：flex布局详解flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。flex布局全称flexible box布局模型，是一种比较高效的css3布局方案通过设置元素的display属性，改成flex属性.box{ display:flex;}来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。首先看下容器的属性：1、flex-direction决原创 2022-02-20 17:02:41 · 1227 阅读 · 0 评论 -
事件流、事件捕获和事件冒泡的介绍
事件流、事件捕获和事件冒泡的介绍最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。事件流分为三个阶段：1、事件捕获阶段事件从window发出，不断向子元素寻找对应的目标节点2、事件目标阶段事件找到了对应的目标节点，即此时再往下已经没有对应的节点3、事件冒泡阶段事件从节点位置网上回溯到文档的根节点我们在使用给dom添加事件时一般使用addEventListener方法，该方法传入三个参原创 2022-02-18 23:22:54 · 273 阅读 · 0 评论 -
cookie的api和封装
cookie的api和封装上一篇文章对比了下cookie，localstorage，sessionstroage三者的区别，其中讲到了cookie需要我们专门封装一下，而剩下两个有专门的get、set方法。今天主要。看看cookie在实际项目中的封装。首先看下cookie都有哪些属性方法。其实就两个，一个读取，一个写入。一、读取allCookies = document.cookie我们通过document.cookie就可以获取当前域名及其子域名下的所有cookie，它是以"; "（分号+空原创 2022-02-17 22:02:41 · 573 阅读 · 2 评论 -
浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别
浏览器存储方式详解：cookie、localstorage、sessionstorage的由来和区别作为一名开发，不了解一下浏览器的存储方式，是不合格的。存储方式有很多，你可以打开浏览器的控制台看看Application中的Storage都有哪些选项。今天主要是介绍一下cookie、localstorage、sessionstorage的由来和区别。1、cookie的由来早起的浏览器功能比较简单，纯粹就相当于一个网络资源查看器，用来浏览一些文档，查看一些网站，并不涉及交互。但是随着时代的发展，交互原创 2022-02-16 22:22:11 · 463 阅读 · 0 评论 -
2022年，马上都ES2022了，还只知道ES6的新特性？
2022年，马上都ES2022了，还在看ES6的知识点？面试的时候，面试官老是喜欢问一些你知道ES6的新属性有哪些吗？实际上，ES6都是2015年出的规范了，现在都是2022年，还考试这个，未免有些落伍。今天就带大家理一下，这些年，从ES2015(ES6)到ES2021都增加了哪些特性一、ES2015(ES6)新增let const用于声明变量 const a = 1 ; let b = 2新增变量解构 let [a, b, c] = [1, 2, 3];加强对Unicode码的支持 ‘\u0原创 2022-02-12 17:14:47 · 1716 阅读 · 1 评论 -
JavaScript中for循环和forEach的不同点原来有这么多
JavaScript中for循环和forEach的不同点原来有这么多！在平时工作中，我们循环遍历数组的方式有很好几种，但是最常用的应该是for循环还有使用数组的forEach方法。今天来充分对比一下两者的区别，各位请看好了。首先我们定义两个数组const arr1 = ['apply','call','bind']const arr2 = ['apply','call','bind']接下来使用不同的遍历方法运行不同的代码块，做一下对比一、执行普通代码for (let i = 0; i &原创 2022-01-27 23:05:40 · 2278 阅读 · 0 评论 -
六个字解释清楚JavaScript中的this指向
六个字解释清楚JavaScript中的this指向在前端的学习和工作中，我们经常遇到this的使用，尤其是this的指向。在MDN中可以看到，this的解释比较简单：当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。我们先看几个例子1、一个普通函数的this指向var name ='test'function fn(){ console.log(this.name)}fn(); // 'test'原创 2022-01-19 22:46:33 · 357 阅读 · 0 评论 -
Javascript之bind,call,apply方法的使用场景和区别
Javascript之bind,call,apply方法的使用场景和区别之前的文章里有写到上述三种方法的实现，这次就来对比下这三种方法。入参语法出参calln个参数，第一个参数为原函数的this指向，其余参数依次传入原函数中进行调用function.call(thisArg, arg1, arg2, …)函数执行结果apply最多两个参数，第一个参数为原来函数的this指向，第二个参数是类数组或数组对象，解构后传入原函数进行调用func.apply(thisArg原创 2022-01-15 22:28:23 · 289 阅读 · 0 评论 -
Javascript之call方法的使用和实现
Javascript之call方法的使用和实现面试的时候经常会遇到手写bind，apply，call方法的笔试题，今天我们就来看看call方法是什么并实现一下call方法，以免面试的时候回答不上来。首先了解一下call方法是什么，实现了什么功能。看看MDN上的介绍Function.prototype.call()**call()** 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。示例：var hello = function (a, b, c, d) {原创 2022-01-15 19:45:50 · 380 阅读 · 0 评论 -
Javascript之apply方法的使用和实现
Javascript之apply方法的使用和实现面试的时候经常会遇到手写bind，apply，call方法的笔试题，今天我们就来看看apply方法是什么并实现一下apply方法，以免面试的时候回答不上来。首先了解一下apply方法是什么，实现了什么功能。看看MDN上的介绍Function.prototype.apply()apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。示例：var hello = function (a, b, c, d)原创 2022-01-15 19:22:41 · 399 阅读 · 0 评论 -
Javascript之bind方法的使用和实现
Javascript之bind方法的使用和实现面试的时候经常会遇到手写bind，apply，call方法的笔试题，今天我们就来看看bind方法是什么并实现一下bind方法，以免面试的时候回答不上来。首先了解一下bind方法是什么，实现了什么功能。看看MDN上的介绍Function.prototype.bind()bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。示例：原创 2022-01-14 23:15:28 · 305 阅读 · 0 评论 -
字节面试官：手写Promise.all和Promise.race方法
在工作中promise使用的场景还是很多的，偶尔也会用到其中的all和race方法，前端面试的时候也经常问到，下面就来实现以下。一、All方法的实现function myALL(arr){ return new Promise((resolve,reject)=>{ const result = [] let count = 0 let len = arr.length for(let i = 0;i < len; i++){ Promise.原创 2021-10-21 22:33:30 · 237 阅读 · 0 评论