2022前端面试必问的几个小问题，你学费了吗？

最新推荐文章于 2024-10-09 11:11:31 发布

HuangXiaoYu0207

最新推荐文章于 2024-10-09 11:11:31 发布

阅读量614

点赞数

文章标签：面试前端职场和发展

本文链接：https://blog.csdn.net/HuangXiaoYu0207/article/details/124757527

版权

写在前面

CSDN话题挑战赛第1期

活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

说一下盒子模型？

考点

标准和模型和IE盒子模型

答案

标准和模型和IE盒子模型，这两个的区别主要是：

IE盒子模型的宽高包括content和padding还有border，标准盒子模型不包括；
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型

HTML5的新元素

考点

主要包括三类：

canvas
多媒体
新的语义和结构元素

答案

<canvas>标签：定义图形，比如图标和其他图像，该标签给予JavaScript的绘图API；
<audio>标签：定义音频内容；
<video>标签：定义视频内容(Video或者Movie)；
<source>标签：定义多媒体资源<Video>和<audio>；
<embed>标签：定义潜入的内容，比如插件；
<track>标签：为媒介（<Video>和<audio>之类）规定外部文本轨道；
<article>标签：定义页面独立的内容区域；
<aside>标签：定义页面的侧边栏内容；
<bid>标签：允许设置一段文本，使其脱离副元素的文本方向设置；
<details>标签：用于描述文档或者文档某个部分的细节；
<dialog>标签：定义对话框，比如提示框；
<summary>标签：包含details元素的标题；
<figure>标签：规定独立的流内容（图像、图表、照片、代码等）；
<figcaption>标签：定义<figure>元素的标题；
<footer>标签：定义<section>或<document>的页脚；
<header>标签：定义了文档的头部区域；
<mark>标签：定义带有记号的文本；
<meter>标签：定义度量衡，仅用于已知最大、最小值的度量；
<nav>标签：定义导航条；
<progress>标签：定义任何类型的任务进度；

BFC

考点

BFC（Block Formatting Context），即块级格式化上下文，它是页面中一个独立的容器，容器中的元素不会影响到外面的元素

答案

触发BFC的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow 值不为 visible，为 auto、scroll、hidden
display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position 的值为 absolute 或 fixed

JavaScript数据类型

考点

基础数据类型和引用数据类型

答案

基础数据类型
- 字符串String
- 数字Number
- 布尔Boolean
- 空null
- 为定义undefined
- Symbol
引用数据类型
- 对象
- 数组
- 函数

防抖和截流

考点

基础概念和实现方式

答案

为什么要防抖、节流：最终目的是降低服务器压力，屏蔽无效请求。

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则从新计算延迟时间。

// 防抖debounce代码（定时器）：
  var debounce = function(func, delay) {
    var timer = null
    let result;

    return function() {
      console.log("防抖点击函数")
      var context = this;
      var args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        result = func.apply(context, args);
      }, delay)
      return result
    }
  }
  function handle() {
    console.log('random == ', Math.random());
  }

  document.querySelector('.test01').onclick = debounce(handle, 5 * 1000)

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会浓缩函数的执行频率。

 // 节流throttle代码（定时器）：
  var throttle = function(func, delay) {
    var prev = Date.now();
    console.log('prev == ', prev)
    return function() {
      var context = this;
      var args = arguments;
      var now = Date.now();
      console.log('now == ', now)
      if (now - prev >= delay) {
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }
  function handle() {
    console.log('random == ', Math.random());
  }
  document.querySelector('.test01').onclick = throttle(handle, 5 * 1000)

总结：
函数防抖：将多次操作合并为一次操作进行。原理是保护一个计时器，规定在动作发生后delay时间触发函数，然而在delay时间内再次发生动作的话，就会勾销之前的计时器而从新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有提早调用函数未执行。

区别：函数节流不论事件触发有多频繁，都会保障在规定工夫内肯定会执行一次真正的事件处理函数，而函数防抖只是在最初一次事件后才触发一次函数。比方在页面的有限加载场景下，咱们须要用户在滚动页面时，每隔一段时间发一次 Ajax 申请，而不是在用户停下滚动页面操作时才去申请数据。这样的场景，就适宜用节流技术来实现。

深拷贝和浅拷贝的区别

考点

基础概念和常用实现方式

答案

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

在JavaScript中，存在浅拷贝的现象有：

在这里插入代码片
Array.prototype.slice()
Array.prototype.concat()
使用拓展运算符实现的复制

深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

常见的深拷贝方式有：

_.cloneDeep()
jQuery.extend()
JSON.stringify()
手写循环递归

ajax、axios、jsonp的理解

答案

jsonp 是一种可以解决跨域问题的方式，就是通过动态创建 script 标签用src引入外部文件实现跨域，script加载实际上就是一个get请求，并不能实现post请求。(其他实现跨域的方法有：iframe,window.name,postMessage,CORS…)
ajax是一种技术，ajax技术包含了get和post请求的，但是它仅仅是一种获取数据的技术，不能直接实现跨域，只有后台服务器配置好Access-Control-Allow-Origin，才可以实现请求的跨域。
axios 是通过 promise 实现对 ajax 技术的一种封装，axios 是 ajax，ajax 不止 axios。

总结：
juery 的$.ajax实现get请求能跨域是因为jsonp或者因为原生ajax和服务器的配合，post请求能跨域就只能是因为原生ajax和服务器的配合。

ajax请求的时候get 和post方式的区别

get 请求不安全，post 安全；
get 请求数据有大小限制，post 无限制；
get 请求参数会在url中显示，容易被他人窃取，post 在请求体中，不会被窃取；
post 需要设置请求头。

Ajax请求发送

// ajax 提交 post 请求的数据
// 1. 创建核心对象
var xhr = new XMLHttpRequest();
// 2. 准备建立连接
xhr.open("POST", "register.php", true);
// 3. 发送请求
// 如果要POST提交数据，则需要设置请求头
// 有的面试官会问为什么要设置请求头？ 知道请求正文是以什么格式
// Content-Type: application/x-www-form-urlencoded，请求正文是类似 get 请求 url 的请求参数
// Content-Type: application/json，请求正文是一个 json 格式的字符串
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送数据
xhr.send(querystring);
// 4. 处理响应
xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) { // 请求处理完毕，响应就绪
          if (xhr.status === 200) { // 请求成功
               var data = xhr.responseText;
               console.log(data);
          }
     }
}