前端面试题目系列一

学校生涯进行了一半了，还有不到一年多就要准备work了，在这个前端非常卷的阶段，我觉得提前着手一下前端面试的东西，对自己还是有些许帮助的🤨,可以一边复习巩固，一边收集面试可能出现题目,我准备出一个面试可能会出现的题目的一个参考系列供大家食用ฅʕ•̫͡•ʔฅo

1. Js的数据类型有哪些他们的区别是什么？

​ js的数据类型分为基本数据类型和引用数据类型，基本数据类型有String、Number、Boolean、Null、Undefined、Symbol（ES 6+）六种，引用数据类型有Object、Array、Date、Function（）四种

区别：

• 存储地点：简单数据类型存放到栈里面，引用数据类型存放到堆里面**
• 存储方式：基本数据类型直接存储数据值，值是不可变的（比如字符串的操作不会改变原始字符串，会返回一个新的字符串）；引用数据类型存储的是对象的引用，实际存储的是对象在内存中的位置，且值是可变的（比如修改对象的属性）
• 比较方式：基本数据类型值比较是按值比较，而引用数据类型比较的是引用地址（两个对象即使相同，比较结果也是false）

2. 判断数据类型有几种方法？

• typeof 操作符

  //typeof 是一种常用的方式来判断变量的数据类型,适用于大部分基本数据类型，但是对引用数据类型的判断较为有限
  typeof 14;            // "number"
  typeof 'study';       // "string"
  typeof true;          // "boolean"
  typeof undefined;     // "undefined"
  typeof null;          // "object"  (typeof对bull的结果是object)
  typeof {a: 1};        // "object"
  typeof [1, 2, 3];     // "object" (数组是特殊的对象)
  typeof function(){}; // "function" (function 被视作对象的一种特殊类型)
  

• instanceof 操作符

  instanceof可以用来判断对象是否是某个类或者构造函数的实例。这对于判断对象是否是某个特定引用数据类型（如数组、日期等）非常有用

  [] instanceof Array;   //true
  {} instanceof Object;  //true
  new Date() instanceof Date;  //true
  

• Array.isArray()

  用于检查一个值是否为数组。

  Array.isArray([1,2,3])      //true
  Array.isArray({a: 1, b: 2});   //false
  

• Object.prototype.toString.call()

  这是一个更为可靠的方法，用于判断所有数据类型。

Object.prototype.toString.call(18);                // "[object Number]"
Object.prototype.toString.call('say hi');           // "[object String]"
Object.prototype.toString.call([]);                // "[object Array]"
Object.prototype.toString.call({});                // "[object Object]"
Object.prototype.toString.call(new Date());        // "[object Date]"
Object.prototype.toString.call(function(){});      // "[object Function]"
Object.prototype.toString.call(null);              // "[object Null]"
Object.prototype.toString.call(undefined);         // "[object Undefined]"

• constructor属性

  通过对象的 constructor 属性来检查其构造函数

(42).constructor === Number;          // true
('say hi').constructor === String;    // true
([]).constructor === Array;           // true
({}).constructor === Object;          // true

3. BFC 和 IFC 机制

BFC主要用于处理块级元素的布局问题，而IFC则处理行内元素的布局问题。通过创建BFC可以解决一些常见的布局难题，比如清除浮动、防止元素重叠等；IFC则帮助我们更好地控制行内元素的排版，特别是在文本流中的布局和对齐

• BFC(Block Formatting Context) 块级格式化上下文

  BFC是一个独立的渲染区域，规定了内部块盒子如何布局，其内部的盒子不会影响到外部或其他BFC内的盒子。BFC主要用于解决一些布局问题，如清除浮动、避免元素边缘重叠等。

  **BFC触发的条件：**浮动元素（左浮右浮）、定位元素（position为absolute或fixed）、具有overflow不为visible的元素（如hidden，auto，scroll）、display为flex、grid和inline-block的元素

  BFC的主要特性：

  • 内部的盒子会在垂直方向上一个接一个的放置，块级盒子垂直方向上的距离由 margin 决定，相邻盒子的 margin 会发生重叠
  • 相邻盒子的外边距会发生折叠，即取相邻盒子之间的最大外边距值
  • 清除浮动（即内部的浮动元素不会影响到外部的非浮动元素），通过在 BFC 中的元素上应用 clear 属性来阻止浮动的影响
  • 计算高度时考虑浮动元素的高度

• IFC(Inline Formatting Context) 行内格式化上下文

  IFC 是内联元素的布局环境，内联元素会在 IFC 中水平排列，直到一行放不下为止，然后自动换行， IFC主要处理的是文本流中的元素，如文本、图片、链接等。

  **IFC触发的条件：**任何包含行内元素的上下文都会自动形成IFC，一个元素的 display 属性设置为 inline, inline-block

  IFC的主要特性：

  • 行内元素在同一行上尽可能多地排列
  • 如果一行的空间不足以容纳所有行内元素，则会换行，可以通过设置 white-space 属性来控制文本换行的方式
  • 行内元素的宽度和高度取决于其内容，无法直接设置

4. 如何解决父元素塌陷问题？

父元素塌陷是一个常见的布局问题，主要发生在子元素使用了浮动、绝对定位或其他布局方式时，父元素无法正确包含其子元素的高度。

解决方法：

1. 使用after伪元素清除浮动

   //给子元素浮动外的父元素添加clearfix类或者在浮动元素后面添加一个 clear 元素（额外标签法）
   
       .clearfix:after{		/*伪元素是行内元素 正常浏览器清除浮动方法*/
           content: "";
           display: block;
           height: 0;
           clear:both;
           visibility: hidden;
       }
       .clearfix{
           *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
       }
   

2. 在父元素上设置 overflow: hidden 或 overflow: auto 可以触发父元素重新计算高度

   .parent {
       overflow: hidden;
   }
   

3. 使用 Flex布局 或 Grid 布局

   //给父元素设置display：flex或者display：grid
   .parent {
       display:flex;
   }
   

4. 设置父元素的高度

   //如果内容的高度是已知的，可以直接设置父元素的高度
   .parent {
       height: 100px; /* 或其他合适的高度 */
   }
   

5. 使用 position: relative

   对于绝对定位的子元素，确保父元素设置 position: relative 以创建定位上下文