前端面试记录2
文章目录
-
-
-
-
-
- 0.通用问题
- 1.html5语义化标签
- 2.盒模型
- 3.CSS选择器的优先级
- 4.水平垂直居中的实现方式
- 5. js数据类型，区别
- 6.判断this的指向
- 7.事件循环机制
- 8.async await
- 9.Promise
- 10.git代码管理
- 11.手写js代码
-
-
-
-
0.通用问题
1.自我介绍
2.项目用到了哪些前端知识点 、创新点是什么
3.写项目如何调取后端接口
4.为什么选择前端方向
1.html5语义化标签
语义元素清楚地向浏览器和开发者描述其意义。
HTML5 提供了定义页面不同部分的新语义元素：
<article> 定义文章。
<aside> 定义页面内容以外的内容。
<details> 定义用户能够查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含内容，比如图示、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义重要的或强调的文本。
<nav> 定义导航链接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
优点：便于浏览器正确识别网页内容；“允许跨应用程序、企业和团体对数据进行分享和重用。”
语义化优点：
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
2.盒模型
种类：W3C标准盒模型、IE盒模型（怪异盒模型）
CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
-
标准盒模型：
默认情况；
box-sizing: content-box;宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
-
IE盒模型：
box-sizing: border-box;
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3.CSS选择器的优先级
规则：
1.选择器均有权重，内联权重1000，id选择器(#)100，class选择器(.)10，元素选择器1，通用选择器（*）0、 子选择器（ >) 0 、相邻兄弟选择器（+）0。
2.权重相等时，后定义的高于之前的。
3.!important 声明的样式的优先级最高。
4.继承的样式优先级最低。
4.水平垂直居中的实现方式
多少说几种
5. js数据类型，区别
基本数据类型：
Number，String，Boolean，null，undefined，symbol，bigint（后两个为ES6新增）
引用数据类型：
object，function（proto Function.prototype）
object：普通对象，数组对象，正则对象，日期对象，Math数学函数对象。
两种数据存储方式：
基本数据类型是直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用的数据。栈是存储基 本类型值和执行代码的空间。
引用数据类型是存储在堆内存中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆 中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。
两种数据类型的区别：
- 堆比栈空间大，栈比堆运行速度快。
- 堆内存是无序存储，可以根据引用直接获取。
- 基础数据类型比较稳定，而且相对来说占用的内存小。
- 引用数据类型大小是动态的，而且是无限的。
6.判断this的指向
https://wangdoc.com/javascript/oop/this.html
规则：
-
this指向调用this函数的对象。
-
函数被new调用，指向new新构造出来的这个对象；
显式: 函数通过call()、apply()、bind()调用，this指向被绑定的对象；如果这些方法传入的第一个参数是 undefined 或者 null，严格模式下 this 指向为传入的值undefined / null；非严格模式下指向window（全局）；
函数作为方法被对象调用，this指向这个对象。
隐式绑定：函数的调用是在某个对象上触发的，即调用位置上存在上下文对象（相当于对象函数中的this指向）。典型的隐式调用为: xxx.fn()
-
没有明确的调用对象时默认this指向window，严格模式下，this指向undefined。
-
特殊：箭头函数
箭头函数没有自己的this，继承外层上下文绑定的this。
-
特殊：构造函数
如果没有return，则this指向这个对象实例；如果存在return返回一个对象，则this指向返回的这个对象
7.事件循环机制
浏览器的事件循环：执行js代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。
异步任务又分为宏任务和微任务。 宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。 微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务。
宏任务包含：执行script标签内部代码、setTimeout/setInterval、ajax请求、postMessageMessageChannel、setImmediate，I/O（Node.js） 。
微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）
浏览器和Node 环境下，microtask 任务队列的执行时机不同 。- Node端，microtask 在事件循环的各个阶段之间执行 - 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行。
8.async await
https://wangdoc.com/es6/async.html
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。
ES2022 开始，允许在模块的顶层独立使用await命令。它的主要目的是使用await解决模块异步加载的问题。如果加载多个包含顶层await命令的模块，加载命令是同步执行的。
9.Promise
Promise是异步微任务，解决了异步多层嵌套回调的问题，让代码的可读性更高，更容易维护 Promise使用。
Promise是ES6提供的一个构造函数，可以使用Promise构造函数new一个实例，Promise构造函数接收一个函数作为参数，这个函数有两个参数，分别是两个函数 resolve和reject，resolve将Promise的状态由等待变为成功，将异步操作的结果作为参数传递过去；reject则将状态由等待转变为失败，在异步操作失败时调用，将异步操作报出的错误作为参数传递过去。实例创建完成后，可以使用then方法分别指定成功或失败的回调函数，也可以使用catch捕获失败，then和catch最终返回的也是一个Promise，所以可以链式调用。
Promise的特点：
- 对象的状态不受外界影响（Promise对象代表一个异步操作，有三种状态）。 - pending（执行中） - Resolved（成功，又称Fulfilled） - rejected（拒绝） 其中pending为初始状态，fulfilled和rejected为结束状态（结束状态表示promise的生命周期已结束）。
- 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise对象的状态改变，只有两种可能（状态凝固了，就不会再变了，会一直保持这个结果）： - 从Pending变为Resolved - 从Pending变为Rejected
- resolve 方法的参数是then中回调函数的参数，reject 方法中的参数是catch中的参数
- then 方法和 catch方法 只要不报错，返回的都是一个fullfilled状态的promise
Promise的其他方法：
Promise.resolve() :返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。
Promise.reject()：返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法。
Promise.all()：返回一个新的promise对象，该promise对象在参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
Promise.any()：接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。
Promise.race()：当参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
10.git代码管理
https://www.nowcoder.com/tutorial/96/df5cae9696a0438aa8bce0a3731434a8
Git 工程在本地有三个工作区域：
- 工作区：进行日常开发的区域。
- 暂存区域：运行 git add 命令后文件保存的区域，也是进行 commit 的区域。
- 本地仓库：本地版本库，记录工程的提交历史，意味着数据永远不会丢失。
对应的，文件有四种状态：
- 未跟踪的（untracked）：表示在工作区新建了某个文件，还没有add。
- 已修改（modofied）：表示在工作区中修改了某个文件，还没有 add。
- 已暂存（staged）：表示把已修改的文件已add到暂存区域。
- 已提交（commit）：表示文件已经commit到本地仓库保存起来了。
分支管理
代码冲突