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

写在前面

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的新元素

考点

主要包括三类：

1. canvas
2. 多媒体
3. 新的语义和结构元素

答案

1. 标签：定义图形，比如图标和其他图像，该标签给予JavaScript的绘图API；
2. 标签：定义音频内容；
3. 标签：定义视频内容(Video或者Movie)；
4. 标签：定义多媒体资源和；
5. 标签：定义潜入的内容，比如插件；
6. 标签：为媒介（和之类）规定外部文本轨道；
7. 标签：定义页面独立的内容区域；
8. 标签：定义页面的侧边栏内容；
9. 标签：允许设置一段文本，使其脱离副元素的文本方向设置；
10. 标签：用于描述文档或者文档某个部分的细节；
11. 标签：定义对话框，比如提示框；
12. 标签：包含details元素的标题；

13. 标签：规定独立的流内容（图像、图表、照片、代码等）；

14. 标签：定义

    元素的标题；

15. 标签：定义

    或的页脚；
16. 标签：定义了文档的头部区域；
17. 标签：定义带有记号的文本；
18. 标签：定义度量衡，仅用于已知最大、最小值的度量；
19. 标签：定义导航条；
20. 标签：定义任何类型的任务进度；

BFC

考点

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

答案

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

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

JavaScript数据类型

考点

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

答案

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

防抖和截流

考点

基础概念和实现方式

答案

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

• 函数防抖(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的理解

答案

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

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

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

1. get 请求不安全，post 安全 ；
2. get 请求数据有大小限制，post 无限制 ；
3. get 请求参数会在url中显示，容易被他人窃取，post 在请求体中，不会被窃取；
4. 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);
          }
     }
}

闭包的特性

1. 函数嵌套函数
2. 函数内部可以引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

闭包的定义及其优缺点

• 闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
• 变量长期驻扎在内存中、避免全局变量的污染、私有成员的存在

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f