前端精选100道面试题 奥里给奥里给！！

bug爱好者
462 阅读2分钟

  1. vuex全家桶有了解过吗？说说里面各自的熟悉和使用场景

  2. localStorage 和sessionStrorage 和 session的区别

  3. 用户输入URL到前端显示，发生了什么？

  4. https协议了解过吗？

  5. async 和 await有了解过吗

  6. 节流和防抖，有了解过吗，什么是节流，什么是防抖，应用场景

  7. vue 内置组件有哪些？

  8. vue生命周期

  9. vue路由模式有哪些

  10. vue 为啥data是一个函数，而不是对象？

  11. v-for 和 v-if 哪个优先级更高? 他们能一起使用吗？为什么

  12. v-for 就地复用策略是什么

  13. v-for 中的key 是干啥的

  14. 盒模型有了解过吗

  15. vue 双休绑定实现原理

  16. 深拷贝和先拷贝区别

    • 深拷贝层层拷贝，浅拷贝只拷贝第一层，深层只是引用
    • 在深拷贝中，新对象中的更改不会影响原始对象，而在浅拷贝中，新对象中的更改，原始对象中也会跟着改。
    • 在深拷贝中，原始对象不与新对象共享相同的属性，而在浅拷贝中，它们具有相同的属性。

  17. BFC有了解过吗？如何触发

  18. 前端有哪些像素单位，有啥区别

  19. 闭包有了解过吗，如何使用

    闭包是一个能读取其他函数内部变量的函数

    • 优点：使外部能访问到局部的东西
    • 缺点：使用不当容易造成内存泄漏的问题
    function a () {
  let num = 0
  
  // 这是个闭包
  return function () {
     return ++num
  }
}
const b = a()
console.log(b()) // 1
console.log(b()) // 2

  20. 原型链有了解过吗？是如何继承的？

    原型链是实现继承的主要方法，其思想是利用原型让一个引用类型继承另一个引用类型的属性和方法，如果我们让一个原型对象等于另一个类型的实例，那么该原型对象就会包含指向另一个原型的指针，而如果另一个原型对象又是另一个原型的实例，那么上述关系依然成立，层层递进，就构成了实例与原型的链条，这就是原型链的概念。

    继承：原型链继承、构造函数继承、组合继承、原型式继承（object.create()）寄生组合式继承、class类

  21. vue $nextClick有了解过吗？你在什么场景下使用过

  22. 什么是变量提升？函数提升？

    变量提升
​
console.log(name) // undefined
var name = 'Sunshine_Lin'
​
if (false) {
  var age = 23
}
console.log(age) // undefined 不会报错

    函数提升
console.log(fun) // function fun() {}
function fun() {}
​
if (false) {
  function fun2(){}
}
console.log(fun2) // undefined 不会报错

    函数提升优先级 > 变量提升优先级
console.log(fun) // function fun() {}
var fun = 'Sunshie_Lin'
function fun() {}
console.log(fun) // 'Sunshie_Lin'

  23. vue 父子组件是如何传值的？如果是非父子组件呢？

  24. isNaN 与 Number.isNaN的区别？

    isNaN：除了判断NaN为true，还会把不能转成数字的判断为true，例如'xxx'
Number.isNaN：只有判断NaN时为true，其余情况都为false

  25. 如何垂直居中一个浮动元素

  26. JavaScript变量在内存中具体存储形式？

    基本数据类型：存在栈内存里
引用数据类型：指针存栈内存，指向堆内存中一块地址，内容存在堆内存中
也有说法说其实JavaScript所有数据都存堆内存中

  27. 前端有哪些性能优化？你平时是如何优化你的代码的

  28. 如何判断数据类型？

    typeof xxx：能判断出number，string，undefined，boolean，object，function（null是object）
​
Object.prototype.toString.call(xxx)：能判断出大部分类型
​
Array.isArray(xxx)：判断是否为数组

  29. null和undefined的异同点有哪些？

    相同点
​
- 都是空变量
- 都是假值，转布尔值都是false
- null == undefined 为 true
​
不同点
​
- typeof判断null为object，判断undefined为undefined
- null转数字为0，undefined转数字为NaN
- null是一个对象未初始化，undefined是初始化了，但未定义赋值
- null === undefined 为 false

  30. 前端数组去重的方法有哪些？

  31. 为什么typeof null 是object？

    不同的数据类型在底层都是通过二进制表示的，二进制前三位为000则会被判断为object类型，而null底层的二进制全都是0，那前三位肯定也是000，所以被判断为object

  32. 如何封装vue组件？你在项目中是如何封装的？

  33. 计算属性computed有什么特点？和watch有河区别？

  34. 移动端响应式布局如何实现？

  35. vue-router有几种模式？有什么区别？history模式下404后台应该配置什么？

  36. 介绍下跨域，如何解决它

  37. object.assign()是浅拷贝还是深拷贝？

    Object.assign()方法可以把源对象自身的任意多个的可枚举属性拷贝给目标对象，然后返回目标对象，但是Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。此方法对于Array和Object均可适用。Array.prototype.concat()和Array.prototype.slice()也为浅拷贝，只适用于Array。

  38. js实现浅拷贝和深拷贝的区别

    浅拷贝是按位拷贝对象，它会创建一个新对象，对原有对象的成员进行依次拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址。因此如果新对象中的某个对象成员改变了地址，就会影响到原有的对象。

  39. JSON.parse(JSON.stringify(obj))有什么不足之处？当object内存在循环引用时会报错吗？

    JSON.parse(JSON.stringify(obj))可以实现数组和对象和基本数据类型的深拷贝，但不能处理函数。因为JSON.stringify()方法是将一个javascript值转换我一个JSON字符串，不能接受函数。其他影响如下：

    • 如果对象中有时间对象，那么用该方法拷贝之后的对象中，时间是字符串形式而不是时间对象
    • 如果对象中有RegExp、Error对象，那么序列化的结果是空
    • 如果对象中有函数或者undefined，那么序列化的结果会把函数或undefined丢失
    • 如果对象中有NAN、infinity、-infinity，那么序列化的结果会变成null
    • JSON.stringfy()只能序列化对象的可枚举自有属性，如果对象中有是构造函数生成的，那么拷贝后会丢弃对象的constructor
    • 如果对象中存在循环引用也无法正确实现深拷贝，会报错

  40. 了解浏览器的同源机制吗？谈谈你对跨域的理解。

  41. 箭头函数和普通函数的区别是什么？

    箭头函数没有自己的this对象。——对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。因此还有以下几种不同：

    • 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。（也是因为没有自己的this）
    • 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
    • 不可以使用yield命令，因此箭头函数不能用作generator函数。
    • 以下三个变量在箭头函数之中也是不存在的：arguments\super\new.target
    • 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

  42. js的值类型有几种？有什么区别？

  43. addEventListener的第三个参数是干嘛的？

    第三个变量传一个布尔值，需不需要阻止冒泡，默认是false，不阻止冒泡

  44. 有什么方法可以区分js的数据类型？

  45. 函数声明和函数表达式的区别？

    函数声明：享受函数提升
函数表达式：归类于变量声明，享受变量提升
函数提升优先级 > 变量提升优先级
​
console.log(fun) // fun () {}
// 函数表达式
var fun = function(name) {}
// 函数声明
function fun () {}
console.log(fun) // fun (name) {}

  46. ==和===的区别了解吗？

    ==：在比较过程中会存在隐式转换
===：需要类型相同，值相同，才能为true

  47. js的垃圾回收机制是怎样的？

  48. load、$(document).ready、DOMContentLoaded的区别？

    DOM文档加载的步骤为：
​
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。// DOMContentLoaded触发、$(document).ready触发
5、加载图片等外部文件。
6、页面加载完毕。// load触发

  49. JavaScript的事件流模型有哪些？

    事件冒泡：由最具体的元素接收，并往上传播
事件捕获：由最不具体的元素接收，并往下传播
DOM事件流：事件捕获 -> 目标阶段 -> 事件冒泡

  50. 绑定点击事件有几种方式？

    xxx.onclick = function (){}
<xxx onclick=""></xxx>
xxx.addEventListener('click', function(){}, false)

  51. undefined >= undefined 为什么是 false ？

    按照隐式转换规则，可转换成NaN >= NaN，NaN 不等于 NaN，也不大于，所以是false

  52. JavaScript的隐式转换规则？

    1、转成string类型： +（字符串连接符）
2、转成number类型：++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
3、转成boolean类型：!（逻辑非运算符)

  53. js异步加载有哪几种方式？有何区别？

    defer：发生的时刻为整个页面全部解析完（dom树构建完）才会执行，ie9以下可用，可以将js代码写在内部

    async：加载完脚本就会执行，ie9以上都可以用，只能加载外部脚本，不能把js写在script标签里

    以上两者不能写在同一个标签里。

    如果要做到浏览器兼容可以使用script的onreadystatechange事件监听script的readyState状态（loading/complete/loaded），此方法ie可用；除了ie，别的浏览器可以监听script的onload事件设置设置回调函数。

  54. 事件处理模型了解吗？它们的先后顺序是怎样的？

  55. 如何阻止事件冒泡？

    function stopBubble(e) {
  if (e.stopPropagation) {
    e.stopPropagation()
  } else {
    window.event.cancelBubble = true;
  }
}

  56. cookie/localstorage/sessionstorage/indexDB之间的区别？

  57. 如何取出url的参数

  58. 了解css层叠上下文吗？子元素设置了position:fixed的时候相对于什么定位，当父元素设置了translate的时候，子元素又相对于什么定位？

  59. 介绍一下xmlhttprequest的步骤；

  60. 介绍一下es6模块与commonjs模块的差异；

  61. 介绍一下事件循环，微任务的一个执行时间点了解吗？

  62. 讲一下http缓存处理机制？强制缓存协商缓存返回的状态码分别是？了解expires有什么缺点吗？expires中存放的是什么数据类型？cache-contorl的max-age中存放的又是什么数据类型？

    http缓存分为强制缓存和协商缓存，其中强制缓存：http1.0——expired，http1.1——cache- control：private/public/no-cache/no-store/max-age。协商缓存：http1.0——last-modified（响应头）/if-modify-since（请求头）， http1.1——etag（响应头）/if-none-match（请求头）。expires和max-age都可以用来指定文档的过期时间，但两者有一些细微差别。expires中存放的是一个绝对的过期时间，这么做会导致至少2个问题：1.客户端和服务器时间不同步导致expires的配置出现问题；2.很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象；max-age指定的是从文档被访问后的存活时间，这个时间是个相对值（比如3600s），相对的是文档第一次被请求时服务器记录的request_time（请求时间）。另外，expires指定的时间其实可以是相对文件的最后访问时间（atime）或者修改时间（atime）。

  63. 介绍一下你对前端工程化的理解；

  64. promise，async/await的区别，使用场景

  65. function上的方法有哪些？call/apply/bind了解吗？

  66. 谈谈tcp三次握手四次挥手。

  67. vue修饰符有哪些？

    事件修饰符：stop、prevent、capture、self、once、passive

    按键修饰符：enter、tab、delete、esc、space、down、up、left、right、exact

    鼠标修饰符：left、right、middle

    sync

    表单修饰符：lazy、number、trim

  68. 一个页面有多个表单，提交的时候怎么解决校验

    可以使用promise.all

  69. web安全相关，为什么带上token就不会有csrf的问题？

    cookie有一个过期时间，在这段时间内，cookie是存储在客户端的，当再次访问相同的网站时，浏览器会自动在http请求中自动带上该网站用户登录后的cookie。csrf攻击也正是利用这点，借用用户的cookie去执行非用户本意的操作。而token验证的规则是，服务器从请求体或者请求参数重获取设置的token，然后和cookie中的token进行比较，一致则进行后续请求，而csrf攻击只是借用了cookie，也就不能在发送请求时在post或get中设置token，把请求发送到服务器端时，token验证不通过，也就不会处理请求了。（存疑）

  70. 现在webpack中配置了哪些插件？

  71. webpack热更新原理

  72. vue项目中如何监听多个对象

    1、先在computed中，用需要监听的值(start、end)定义一个对象(dateRange) 2、然后在watch中监听这个对象(dateRange)

    image-20211203104242662

  73. js中判断对象是否为空

    1.es6中可以使用Object.keys(obj)

    var data = {}; var arr = Object.keys(data); alert(arr.length == 0); //true 为空， false 不为空

    2.将json对象转化为json字符串，再判断该字符串是否为"{}"

    var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b); //true 为空， false 不为空

  74. js遍历对象的几种常用方法。

    1. const obj = { 　　　　id:1, 　　　　name:'zhangsan', 　　　　age:18 }

      第一种： for......in

       for(let key  in obj){
        console.log(key + '---' + obj[key])
  }

      第二种：

      1）、Object.keys（obj）

      2）、Object.values（obj）

      参数：

      obj：要返回其枚举自身属性的对象

      返回值：

      一个表示给定对象的所有可枚举属性的字符串数组。

      第三种：使用Object.getOwnPropertyNames(obj)

      返回一个数组，包含对象自身的所有属性（包含不可枚举属性）
遍历可以获取key和value

     Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    })

  75. watch监听对象及对应值的变化

    第一种：

     data:{
        return {
            eleDate:{
                a: '对象a',
                b: '对象b'
            }
        }     
    },
    watch: {
      eleDateNew: {
        handler: (val, olVal) => {
          console.log('我变化了', val, olVal)
        },
        deep: true
      }
    },
    computed: {
      eleDateNew() {
        return JSON.parse(JSON.stringify(this.eleDate))
      }
    }

    第二种：

     <el-input v-model="form.name"></el-input>
 data:{
        return {
            form:{}
        }     
    },
 watch: {
        'domainForm.domain'(curVal) { 
           console.log(res.data.data)
        }
    },

  76. this.$set有什么特点，如何使用

    this.$set(this.rules, 'phoneNum', '1')

  77. js 删除数组中某个元素

    this.form.noticeType.splice(this.form.noticeType.indexOf(value), 1)

  78. JavaScript有几种数据类型？

    • number：数字类型
    • string：字符串类型
    • boolean：布尔值类型
    • undefined：未定义类型
    • null：空值类型
    • object：对象类型
    • symbol：symbol类型
    • bigint：大数字类型
avatar
文章
阅读
粉丝
相关推荐
听说前端出大事儿了
369k阅读
 · 
1.4k点赞
【前端面试题】2023年前端面试真题之React篇
25k阅读
 · 
183点赞
大专前端，三轮面试，终与阿里无缘
112k阅读
 · 
1.4k点赞
2023高频前端面试题合集之Vue（上篇）
200k阅读
 · 
1.3k点赞
社招中级前端笔试面试题总结
34k阅读
 · 
545点赞
2023前端vue面试题及答案
40k阅读
 · 
890点赞
2023前端面试题总结
149k阅读
 · 
2.1k点赞
金三银四，我为面试所准备的100道面试题以及答案，不看要遭老罪喽
112k阅读
 · 
2.3k点赞
2023高频前端面试题合集之网络篇
198k阅读
 · 
627点赞
2023前端面试系列-- Vue 篇
106k阅读
 · 
1.5k点赞

友情链接：