基础面试题

一只野生的小飞龙

已于 2022-10-21 09:00:09 修改

阅读量255

点赞数

文章标签：前端

于 2022-09-07 23:25:25 首次发布

本文链接：https://blog.csdn.net/qq_45404030/article/details/126755614

版权

面试题

不会的玩意：HashRouter HistoryRouter
1.cookie,sessionStorage,localStorage
2.js数据类型有哪些
3.闭包
4.promise
5.BFC
6.判断变量的方法
7.样式优先的规则
8.说一说CSS尺寸设置的单位
9.src和href的区别
10.如何比较-0和+0是否不相同，如何让NAN和NAN相等
11.双向绑定的原理
12.data为什么是一个函数而不是一个对象
13.如何让a==1&&a==2&&a==3成立
14.强制缓存和协商缓存
15.get和post区别
16.网络请求码
17.this的指向问题
18.vue的特点
19.v-model的实现
20.nextTick的个人理解
21.delete和Vue.delete删除数组的区别
22.SPA首屏加载缓慢应该如何解决
23.回流和重绘
24.display：none，visibility: hidden
25.http和https的区别
26.GIF，JPEG，PNG的区别
27.get，post，put的区别
28.如果比较两个对象相等
29.事件循环Event loop,宏任务与微任务

cookie,sessionStorage,localStorage的存储区别

1.共同点：他们都是存储在浏览器本地的。
2.不同点：cookie是由服务器写入的，他的生命周期是由服务器来确定好的；sessionStorage是由前端来写入的，他的生命周期会在页面关闭的那一瞬间消失，同时必须保证是同一个页面；localStorage也是由前端来写入的，他的生命周期可以是永久的，只要用户不手动删除，他就不会消失，他用来保存长久不变的东西。
3.应用场景：cookie用来存储登录用的token和SessionID（跟平时写的东西不一样）；SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能；
localStorage常用于存储不易变动的数据。

通过这个暂时并不了解sessionStorage和cookie的实战写法。
sessionStorage已经基本明白，cookie还在写当中。

js数据类型有哪些

基本数据类型：一共有7种，分别是undefined，null，number，boolean，string ，symbol ，bigInt
引用数据类型：一共就一种，object。
存储方式的不同：基本数据类型存放在栈当中，引用数据类型存放在堆当中。

闭包

简单来说就是一个函数可以访问另一个函数里面的变量。

promise

他是一个异步的状态，为了解决回调地狱，同时他有三种状态，分别是pending，resolve，reject三种状态，正常状态就是pending，成功调用resolve，失败调用reject。同时还包括then和catch，成功调用then，失败调用catch，同时then既可以接受成功，也可以接受失败。如果想要解决一堆是否同时成功或者失败的话，可以使用all方法。
它可以解决一个回调地狱

1.首先封装一个promise对象的函数
function a1(str,time=2000){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(str)
      },time)
    })
  }
a1('niu').then((res)=>{
    console.log(res)
    return a1('sxi')
  }).then(res=>{
    console.log(res);
  })
2.然后进行函数调用的回调

BFC

BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签，同时自己也不会受别人影响。

解决了的问题:
1.脱离文档流：如果给子设置了浮动，会给父元素造成塌陷问题，可以使父元素成为BFC，独立的盒子，不受别人的影响。
2.Margin边距重叠：在给两个盒子都设置margin为10px的时候，最后会求最大值，而不是和，这时候，如果给一个元素设置BFC的话，那么就可以解决这个问题。

判断变量的方法

object.prototype.toString.call()、constructor没怎么用过。

typeof（用于判断基本数据类型），instanceof（用于判断引用数据类型），object.prototype.toString.call()、constructor。

样式优先的规则

import 内联样式 id 类选择器标签

CSS尺寸设置的单位

首先是px（像素大小的单位，常用）；其次是em，这个是根据字体大小来设置的，例如10em，字体大小是16px，那么就会是160px；还有就是rem，移动端适配的常用；最后是vh和vw，他们是根据视口的大小来确定，视口最大为100，1%的话就是视口大小的百分之一。

src和href的区别

考虑这两个问题就可以去考虑两个标签，那么就是script和link标签，script通常引用js文件，link通常引用css文件。src引入文件的时候，会进行将其下载下来，而且会解析这个文件，就会打断别的内容，也就说这个是串行的，只有等这个解析完成才能继续下去。而href引入文件的时候，有的时候还是网络资源，是与其建立连接，这个是并行下载，并不会影响到别的内容。

如何比较-0和+0是否不相同，如何让NAN和NAN相等

我们平时比较方法可以用==(这个具有强制转换的功能），===（这个并没有强制转换的功能，不仅检查数值还检查数据类型）。
我们可以通过 object.js() 这个方法来进行比较-0和+0，通过这个方法就可以检测出来这俩个值不相等。

数据绑定的原理

通过数据劫持和发布和订阅者模式来进行数据双向绑定。
数据劫持就是通过object.defineProperty()来实现双向绑定。（缺点就是无法对对象成员进行劫持。)
数据发生变化的时候，就是给订阅者一个通知，触动某种回调。

data为什么是一个函数而不是对象

首先第一点就是对象是引用数据类型，如果多个引用这一个对象的时候，如果一个对象的值发生变化的话，那么就会影响别的数据，所以通过变成一个函数，那么每一个组件就存在一个独立的空间，那么就不会影响别人。

a==1&&a==2&&a==3

解决方法其实和obj修改的方法十分类似，对象这种引用数据类型可以通过特定的方法来解决，然后可以把a看成一种对象。

let a = {
    n:1,
    valueOf(){
      return this.n++
    }
  }
  if(a==1&&a==2&&a==3)
  {
    console.log(1)
  }

强制缓存和协商缓存

强制缓存就是文件并没有过期，那么就可以缓存；协商缓存是文件发生了过期，然后和服务器进行沟通，服务器如果说过期了，那么就可以使用服务器重新返回的数据进行缓存，如果没有过期，那么继续缓存。

get和post

get请求可以被缓存，而post请求不可以被缓存。

网络请求码

200代表着请求成功，404代表着请求资源不存在，400代表着错误请求，也就是请求的格式不正确，401代表着未授权（token问题？）,403代表着禁止访问。

this的指向

并没有考虑箭头函数
1.总是指向函数的直接调用者。
2.如果new出来一个对象，指向这个创建出来的对象。
3.一个目标添加事件之后，this指向这个目标。
如果是箭头函数
1.就是谁创建了他，那么这个里面的this就指向创建这个的目标。
2.尤其是在定时器的地方，一定要写箭头函数，这样里面的this就可以不指向window。

vue的特点

1.轻量级
2.高性能
3.好上手
4.插件化
5.便于测试
6.运行速度更快
7视图，数据，结构分离

v-model的实现

这个是vue2数据绑定的原理

1.数据劫持、组合、发布订阅模式的方式来实现的
2.数据劫持是基于object.defineProperty()方法实现。

nextTick的个人理解

这个普遍用于插件的使用

1.简而言之就是修改了一个可以展现dom的值，
如果你需要修改之后立马获取这个dom，可以使用定时器或者这个。

delete和Vue.delete删除数组的区别

delete删完会变成undefined等，
然后Vue.$delete删除完之后会直接让这个键值消失。

SPA首屏加载缓慢应该如何解决

1.安装动态懒加载所需插件；使用CDN资源。
2.使用骨架屏。

回流和重绘

回流就是比如页面布局发生变化的时候，比如display：none的时候，就会产生回流。
重绘就是页面的某个元素的样式发生改变的时候，比如color等。

display：none，visibility: hidden

display为none的时候是不会占用原先的位置的。
而visibility是还会占用原先的位置的。

http和https的区别

http是基于tcp之上的，而https是基于ssl之上的，ssl又基于tcp之上的。
两者的端口号占用的也不同。
https可以防止运营商劫持，更加安全。

http的层次
前两层也可以称为网络接口层
1.物理层
2.数据链路层
3.网络层
4.传输层
5.应用层

GIF，JPEG，PNG的区别

GIF适合动画，无损压缩
JPEG适合照片，有损压缩
PNG适合背景，按钮等，文件小，允许透明度。

get，post，put的区别

PUT请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以PUT用来改资源）
Post请求：后一个请求不会把第一个请求覆盖掉。（所以Post用来增资源）
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

如果比较两个对象相等

let a = {
        a:10,
        b:20
      }
      let b = {
        a:10,
        b:20
      }
      console.log(JSON.stringify(a) === JSON.stringify(b))