前端面试题目系列一

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

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

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

区别：

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

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

• typeof 操作符//typeof 是一种常用的方式来判断变量的数据类型,适用于大部分基本数据类型，但是对引用数据类型的判断较为有限typeof14;// "number"typeof'study';// "string"typeoftrue;// "boolean"typeofundefined;// "undefined"typeofnull;// "object" (typeof对bull的结果是object)typeof{a:1};// "object"typeof[1,2,3];// "object" (数组是特殊的对象)typeoffunction(){};// "function" (function 被视作对象的一种特殊类型)
• instanceof 操作符instanceof可以用来判断对象是否是某个类或者构造函数的实例。这对于判断对象是否是某个特定引用数据类型（如数组、日期等）非常有用[]instanceofArray;//true{}instanceofObject;//truenewDate()instanceofDate;//true
• **Array.isArray()**用于检查一个值是否为数组。Array.isArray([1,2,3])//trueArray.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(newDate());// "[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-blockIFC的主要特性：- 行内元素在同一行上尽可能多地排列- 如果一行的空间不足以容纳所有行内元素，则会换行，可以通过设置 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 以创建定位上下文