2022前端经典面试题

二丫骑士

已于 2022-03-12 16:48:59 修改

阅读量1.3k

点赞数 1

文章标签：原型模式

于 2022-03-10 12:32:41 首次发布

本文链接：https://blog.csdn.net/m0_59855881/article/details/123356288

版权

1.介绍原型与原型链
原型：prototype 是函数所特有的，对象数组都没有。
原型链：-proto-任何数据都有原型链（包括函数对象数组等）
原型链用于继承，从当前实例属性去查找没找到了就返回，否则就顺着原型链一层一层往上查找。直到找到null为止，如果到null都没有找到就会报错，属性报undefine,方法报**is not a function。
查找私有属性通过hasOwnProperty()查找，构造函数实例原型链-->构造它的方法的原型,构造方法的原型的原型链指向Object的原型,object方法的原型链没有找到指向null.

2.节流和防抖
防抖：防抖就是进行重复相同操作时，只执行最后一次。每发起一次请求重新计时。相当于游戏的回城。在带有Ajax请求的input上输入实时搜索事件（不管输入什么，只在用户停止输入时才发送请求）。
节流：节流就是在一段时间内如果进行重复操作时，只执行一次第一次。场景：提交表单。相当于游戏的cd技能。

3.闭包
1.闭包就是方法里面返回一个方法 ex:
function a(){
  let a1=1;
  return function(){
    return a1;
  }
}
2.闭包的意义：
（1）延长变量的生命周期。
方法外部不能访问方法内部的变量，因为js的执行机制（js代码在运行时会生成临时的变量对象AO,active object。所有的方法和局部变量都存储在AO中，全局变量不在AO中，方法执行完毕会将局部变量回收所以外部访问不到。）
全局变量保存在全局作用域script下，局部变量保存在全局作用域的local下局部的，且this指向window。
只能在闭包内部使用，不能在闭包外部访问到。
闭包会常驻内存 =》慎用闭包
（2）创造私有环境，有自己的独立的词法作用域，互不干扰。
Vue中问什么把data设计成一个函数？data(){}就是一个闭包，保证每个组件有一个私有的作用域。如果不用闭包就会导致各个组件之间相互干扰。
3.作用域链就近原则类似原型链，从自身开始查找。

4.ES6相关面试题
1.var let cosnt
var: (1)声明提升 console.log(num); var num = 123 ;打印结果为undefine（先上车后买票）
(2)可以变量覆盖，重复定义变量（套牌车）
(3)没有块级作用域（红杏出墙）
(4)值可以被修改
let：(1)不能声明提升如上会报错。 cannot access 'num' before initialization
(2)不能变量覆盖
(3)有块级作用域
(4)值可以被修改
const: (1)值不可以被修改，否则报错
(2)声明之后必须赋值，否则报错
(3)不能变量覆盖
(4)有块级作用域
2.解构赋值 let a=1,b=2; [a,b]=[b,a]
3.数组去重 Set方法let arr=[1,1,2,3]； let array=[...new Set(arr)]
4.promise
//构造函数同步执行
const promise = new promise((resolve,reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
//.then()异步执行
promise.then(() => {
  console.log(3)
})
console.log(4)
//打印结果是1243. 

5.Vue相关面试题
(1)mvc与mvvm
mvc:model view controller。控制器以前都是存在后台，通过接口将数据存给后台给出反馈。缺点：前后端没法独立开发，必须等接口好了才可以继承开发。2前端不够独立，没有自己的数据中心，太过依赖后台。
mvvm：vm(data) 相当于前台有一个自己的控制器能做到前后端分离。
(2)v-model的原理
<html>
  <body>
    <h2>v-model原理</h2>
      
    <input placeholder=请输入名字"" id="username"></input>
    显示值：<p id="uName"></p>
  <script>
    let obj={}
    obj.defineProperty(obj,"username",{
      //取值
      get:function(){
        console.log("取值")      
      },
      set:function(val){
        console.log("设置 值")
        document.getElementById("uName").innerText = val
      }
    })
    document.getElementById("username").addListener("keyup",function(){
      //默认的内置对象event 
      obj.username = event.target.value
    })
  </script>
  </body>
</html>

6.v-show和v-if的区别
v-if:不满足条件，不会渲染dom。用于单次判断
v-show:不管是否满足条件都会渲染dom,只是通过display:none;属性将dom隐藏了。用于多次切换（不能用于权限操作，会造成不可预知的错误）。

7.Vue的原理性问题
(1)虚拟dom是什么？
1.vue2.x才有虚拟dom 2.本质是js =>跨平台
(2)虚拟dom在vue中做了什么?
1.vue的渲染过程（html,css,js）将真实dom转化成虚拟dom也就是js对象。
2.更新的时候用来做对比。
(3)虚拟dom是如何提升vue的渲染效率的？
vue通过虚拟dom来做数据驱动，做到局部更新,拿到两个js对象去作比较,然后再更新。而不是直接操作dom。

8.diff算法中的patch()方法

//1.初始化patch(container,vnode)
//2.更新update(vnode,newVnode)

function createElement(vnode){
  let tag = vnode.tag //目标元素 ul
  let attrs = vnode.attrs || {} //属性
  let children = vnode.children || [] //子节点
  
  if(!tag){
    return null
  }else{
    //创建对应的dom
    let elem = document.createElement(tag)
    let attrName
    //给dom添加属性
    for(attrName in attrs){
      if(attrs.hasOwnProperty(attrName)){
         //class
         elem.setAttribute(attrName,attrs[attrName])
      }
    }
    //将子元素添加到目标元素之上
    children.forEach(function(childVnode){
       elem.appendChild(createElement(childVnode))
    })
    return elem
  }
}

function updateChildren(vnode,newVnode){
   let children = vnode.children || []  //现有节点
   let newChildren = newVnode.children || [] //新节点
   children.forEach(function(childrenVnode,index){
     let newChildrenVnode = newChildren[index]
     if(childrenVnode.tag === newChildrenVnode.tag){
       
     }else{
       replaceNode(childrenVnode,newChildrenVnode)
     }
   })
}

9.将div快速居中对齐
(1) body{display:flex} .con{margin:auto}
10.margin和padding有什么不同
作用对象不同，padding施加给自身的，margin是相对外部的。一个内边距，一个外边距。
11.vw和百分比有什么不同？
百分比继承父级元素，vw只和设备宽度有关。
12.块级元素和行内元素的区别
行内元素不换行，不可以设置大小，大小由内容决定。块级元素有继承关系，有宽高，独立占一行。
13.如何让浏览器支持小字体(谷歌默认最小支持12px的字体）
缩放：transform:scale(0.8); -webkit-transform:scale(0.8)
14 介绍下axios
axios是基于Promise的http库，也是对ajax的封装。axios的特性：
1、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
2、它可以拦截请求和响应
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
4、安全性更高，客户端支持防御 XSRF(cross site request forgery) 跨网站请求伪造
15.谈谈你对webpack的理解
1webpack是一个打包模块化的js工具，webpack里一切文件兼模块，通过loader转化文件通过plugin注入钩子，最后输出由多个模块组合成的文件。
webpack专注构建模块化项目，并且可以把webpack看做是模块的打包机器，它做得事情就是分析项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言，例如scss,ts等，并将其打包成合适的格式以供浏览器使用。
16.说说webpack和grunt gulp的区别？
都是前端构建工具，grunt gulp早期使用的比较多，但是一些轻量级的任务还是用glup来处理，比如单独打包css等。
glup和grant是基于任务和流的类似JQuery，找到一类文件对其做一系列链式操作更新流程的数据。整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
webpack是基于入口的，护自动递归解析入口所需要加载的所有资源文件，然后用不同的loader处理不同的文件，用plugin来扩展webpack功能。
从构建思路上说grant和glup需要开发者将整个前端构建过程拆分成多个task并合理控制所有task的调用关系。webpack需要开发者找到入口，并其清楚对不同的资源应该用什么loader做何种解析和加工。
17什么是bundle、 trunk、 module bundle?
bundle是由webpack打包出来的文件。trunk是代码块，一个trunk由多个模块组合而成用于代码的合并和分割，moudle是开发中的单个模块。
18什么是loader?什么是plugin?
loader是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包处的文件当中。
plugin是用来自定义webpack打包过程的方式，一个插件是还有aplay方法的一个对象，通过这个方法可以参与到webpack打包的各个流程。
19.有哪些常用的loader，他们是解决什么问题的?
file loader把文件输出到一个文件夹中，在代码中通过相对路径去引用输出的文件。
url loader 和file loader类似，但能在文件很小的情况下以base64的方式把内容注入到代中。
source map loader 加载额外的source map文件以方便断点调试并压缩图片文件。
bable loader 把es6转换成es5
css loader 加载css支持模块化压缩文件导入等特性。
style loader 把css代码注入到js中，通过Dom操作加载css.
eslint loader 通过eslint检查js代码。

二丫骑士

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
2022前端经典面试题

1.介绍原型与原型链原型：prototype 是函数所特有的，对象数组都没有。原型链:-proto-任何数据都有原型链（包括函数对象数组等）原型链用于继承，从当前实例属性去查找没找到了就返回，否则就顺着原型链一层一层往上查找。直到找到null为止，如果到null都没有找到就会报错，属性报undefine,方法报**is not a function。查找私有属性通过hasOwnProperty()查找，构造函数实例原型链-->构造它的方法的原型,构造方法的原型的原型链指向Object的原型,.
复制链接

扫一扫