CSS

1. display:none; 和visibility:hidden;的区别是什么？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

---

1. CSS 优先级和权重值如何计算？
   内嵌样式>内部样式>外部样式>导入式

---

1. 什么是CSS盒模型？
   盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成 标准盒模型大小=border+padding+content // 怪异盒模型大小=content

---

1. 如何水平垂直居中一个元素？
   弹性盒子 / 定位

	.box{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	} //弹性盒子
	
	.box{
	  position: relative;
	} 
	.box .sub{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  /*margin-left: 负的宽度的一半*/
	  /*margin-top: 负的高度的一半*/
	}//定位

---

1. 请解释CSS中的相对定位（relative positioning）和绝对定位（absolute positioning）

答：相对定位和绝对定位都是CSS中的定位方法。 相对定位（position:
relative）：元素按照正常文档流进行布局，然后根据给定的偏移值(top, right, bottom,
left)进行调整，不脱离文档流。 绝对定位（position:
absolute）：元素相对于其包含块（离元素最近的一个定位祖先元素、未使用定位的块盒祖先元素或初始化包含块）进行布局，脱离文档流，不占据空间。

---

6.请简述CSS浮动（float）的概念

答：浮动是一种CSS布局技术，允许元素沿着其容器的左侧或右侧顺着文本和内联元素移动。常见的浮动值有float: left和float:
right。浮动会影响包含它的容器高度，因此可能需要使用clearfix技术来消除浮动影响

---

7.什么是Flexbox？

答：Flexbox（弹性盒模型）是一种CSS布局模型，旨在在不同屏幕尺寸和设备上实现更灵活的布局。Flexbox通过对父容器和子元素应用display:
flex属性来设置布局，使子元素能够自动调整大小以适应父容器的空间。使用Flexbox，我们可以轻松实现垂直和水平居中、重新排序和对齐等布局需求

---

8.什么是!important声明，如何使用它？

答：!important 声明用于提高某个CSS样式的优先级。在样式声明后添加 !important
标记，可以使该样式在特异性相同时优先级更高。例如：
bash p { color: red !important; }
但在实际开发中，避免过多依赖!important，应尽可能通过提高特异性来解决样式冲突问题。

---

9.请描述一个浏览器兼容性问题以及解决方法。

答：一个典型的浏览器兼容性问题是 CSS3 圆角边框（border-radius）属性在老旧版本的 Internet
Explorer（如IE8）中不被支持。为了解决这个问题，我们可以使用图片背景作为替代方案，或者利用 JavaScript库（如CSS3Pie）为老旧浏览器提供相应的支持。

---

10.请解释CSS伪类与伪元素的区别。

答：伪类（pseudo-class）主要用于描述某个元素的状态。如：:hover、:active 和
:checked等。伪元素（pseudo-element）是用于创建网页中一些不存在于HTML文档树中的元素，例如::before 和:after。伪元素使用两个冒号表示，而伪类则使用一个冒号。

---

1. 什么是BFC（Block Formatting Context），它的作用是什么？

答：BFC（Block Formatting
Context）是块级格式化上下文，是一个独立的布局环境，它影响内部元素的定位以及与其他元素的相互作用。清除浮动、外边距重叠和自适应布局都涉及BFC的规则。一个元素可以通过设置overflow属性为非visible、设置float属性为left或者right以及设置display属性为inline-block、table-cell等来创建BFC。

---

1. 在CSS中，z-index的作用是什么？如何正确使用z-index？

答：在 CSS 中，z-index 用于控制元素的堆叠顺序。z-index 只对定位元素（position 属性值为
relative、absolute、fixed 或 sticky 的元素）有效。默认情况下，元素的 z-index 为
auto，可以设置一个整数值来调整堆叠顺序。值越高，元素将显示在越上面。在实际使用中，尽量避免使用过大的 z-index值，并根据实际需求合理设置堆叠顺序。

---

13 .为什么要使用CSS预处理器？请列举一些常用的CSS预处理器。

答：CSS预处理器具有一些高级功能，如变量、嵌套、运算和混入（Mixins），可以简化CSS编写、提高代码可维护性并减少代码冗余。常用的CSS预处理器包括Sass、Less

---

14 .如何实现CSS动画？

答：可以通过两种方法实现CSS动画：使用transition属性对元素的状态变化进行平滑过渡，或使用@keyframes规则定义关键帧动画。transition属性适用于简单的动画效果，而@keyframes允许创建更复杂的动画序列

---

14 .如何使用CSS选择器？

答：CSS选择器用于识别页面中要应用样式的元素。有多种类型的选择器，如：
元素选择器: 通过HTML元素名称选择元素，如p、h1等。
类选择器: 通过元素的class属性选择元素，以.开头，如.myClass。 ID选择器:
通过元素的ID属性选择元素，以#开头，如#myID。 后代选择器：选择某元素的所有后代元素，如ul li。
子元素选择器：选择某元素的直接子元素，如ul > li。 属性选择器: 通过元素属性选择元素，如input[type=“text”]。
伪类选择器: 通过元素的状态或关系选择元素，如a:hover、li:first-child。
伪元素选择器：选择文档元素的特定部分，如::before、::after。

---

15.什么是浏览器的渲染流程？

答：浏览器的渲染流程通常包括以下步骤： 解析HTML文档，创建DOM树；
解析CSS样式（包括内联、外部和计算样式），创建CSSOM（CSS对象模型）； 将DOM树和CSSOM结合，生成渲染树（Render
Tree）； 布局（Layout）：计算渲染树上元素的位置和大小； 绘制（Painting）：将元素显示到屏幕上；
回流（Reflow）与重绘（Repaint）：当元素的位置、大小或样式发生改变时，浏览器需要重新渲染元素。回流涉及到布局更新，重绘仅涉及到元素的视觉更新。
优化浏览器渲染性能是提高网页加载速度和用户体验的关键部分。

---

16.常见的页面布局方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 六种

（1）双飞翼:两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染，在双飞翼布局中，左侧和右侧的边栏使用了浮动（float）属性，并通过负外边距（margin-left和margin-right）将其移出了正常的文档流。这样做是为了不影响中间内容区域的宽度。中间内容区域使用了自动外边距（margin-left:auto和margin-right:auto）来使其居中，并通过设置左右两个边栏的宽度来确定中间内容区域的实际宽度。

（2）多栏:用于在网页上实现多个列并排显示内容。它可以将页面分为多个列，并且每个列可以有不同的宽度和高度，在bootstrap和其他UI框架中都有其身影.

(3) 弹性布局（Flexbox）: 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

(4)瀑布流:
瀑布流布局从上到下，逐列排列元素，每一列上的元素根据其高度动态调整位置，以保持整体布局的平衡性，瀑布流布局可以根据内容的高度自动调整位置，使页面呈现出错落有致、可以使用CSS和JavaScript来创建瀑布流布局。CSS方面，可以使用属性如column-count、column-gap和break-inside来设置列数、列之间的间隔和避免元素在中断列中换行。JavaScript方面，可以使用流行的库如Masonry或Isotope来实现瀑布流布局。

（5）流式布局:固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
(6)响应式布局:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题但是兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长

---

17.常用的css属性

css属性非常多想全部记住几乎不可能，但在面试中也会出现问一下有关有常用的css记忆部分即可

display:
block	将元素显示为块级元素，独占一行，默认情况下宽度会填充父容器
inline	将元素显示为内联元素，不会独占一行，只占据自身内容所需的空间
inline-block	将元素显示为内联块级元素，不会独占一行，但可以设置宽度和高度
none	将元素隐藏，不占据空间，相当于元素不可见
flex	将元素显示为弹性盒子容器，可以方便地进行灵活的布局
grid	将元素显示为网格容器，可以进行复杂的网格布局
table、table-cell	将元素显示为表格或表格单元格，可以实现表格布局的效果
inline-flex	将元素显示为内联弹性盒子容器
inline-table	将元素显示为内联表格

(2) position：

static	元素的默认值，即没有定位，遵循正常的文档流对象
fixed	元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
relative	移动相对定位元素，但它原本所占的空间不会改变，相对定位元素的定位是相对其正常位置。
absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 html :absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky	sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位，注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

z-index	z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
float	left 元素向左浮动。right 元素向右浮动。none 默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit 规定应该从父元素继承 float 属性的值。
text-align	left 把文本排列到左边。默认值：由浏览器决定。right 把文本排列到右边。center 把文本排列到中间。justify 实现两端对齐文本效果。inherit 规定应该从父元素继承 text-align 属性的值。
overflow	visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。
transition	css3设置元素的过渡效果
transform	设置元素的变换效果（如旋转、缩放、平移等）
text-decoration	设置文本的装饰效果，如下划线、删除线等
text-transform	设置文本的大小写转换，如大写、小写、首字母大写等
text-shadow	设置文本的阴影效果
line-height	设置行高，控制行与行之间的间距
letter-spacing	设置字符间的间距
word-spacing	设置单词间的间距
vertical-align	设置元素的垂直对齐方式
list-style	设置列表项的样式，包括列表标记、列表项缩进等
opacity	设置元素的透明度
box-shadow	设置元素的阴影效果
text-shadow	设置文本的阴影效果
cursor	设置鼠标指针在元素上的样式
pointer-events	设置元素是否接受鼠标事件

有关背景图片
background-repeat	repeat：默认值，背景图片在水平和垂直方向上进行平铺重复。repeat-x：背景图片在水平方向上进行平铺重复。repeat-y：背景图片在垂直方向上进行平铺重复。no-repeat：背景图片不进行重复，只在元素的一部分显示。
background-position	top left：背景图片位于元素的左上角。center center：背景图片水平和垂直方向上都居中。bottom right：背景图片位于元素的右下角。可以使用具体的像素值或百分比来精确指定位置。
background-attachment	定义背景图片的滚动方式。常见取值有：scroll：背景图片会随着元素的滚动而滚动。fixed：背景图片在元素的位置固定，不随滚动而滚动
标签上 title 与 alt 属性的区别是什么？	alt 是给搜索引擎识别，在图像无法显示时的替代文本；title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

---

18.href 与 src？

href (Hypertext
Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）
src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。 href与src的区别
请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src
资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片； 作用结果不同：href
用于在当前文档和引用资源之间确立联系；src 用于替换当前内容； 浏览器解析方式不同：当浏览器解析到src
，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把
js 脚本放在底部而不是头部的原因。

---

19.calc, support, media各自的含义及用法？

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 媒体查询，你可以针对不同的媒体类型定义不同的样式。

---

20.1rem、1em、1vh、1px各自代表的含义？

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh 全称是
Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的
1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

---

JS

1.js的数据类型
数据类型分为两种：基本数据类型与引用数据类型。基本数据类型有：number、string、boolean、null、undefined。引用数据类型有：array、function等（除了基本数据类型都是引用数据类型）
基本数据类型的主要特点是赋值方式是传值，并且值存在栈中。
引用数据类型的主要特点是赋值方式是传址，并且值存在堆中。

---

2.双等和三等的区别
在JavaScript中，双等（）和三等（=）是用于比较两个值的操作符。

双等（==）用于比较两个值是否相等，但它会进行类型转换。如果两个值的类型不同，JavaScript会尝试将它们转换为相同的类型，然后再进行比较。这种类型转换可能会导致一些意外的结果。例如：

console.log(1 == '1');  // true，因为字符串'1'被转换为数字1
console.log(true == 1); // true，因为布尔值true被转换为数字1
console.log(null == undefined); // true，因为它们被认为是相等的特殊情况

三等（===）也用于比较两个值是否相等，但它不进行类型转换。只有当两个值的类型和值都相等时，才会返回true。例如：

console.log(1 === '1');  // false，因为它们的类型不同
console.log(true === 1); // false，因为它们的类型不同
console.log(null === undefined); // false，因为它们的类型不同

因此，使用双等（）进行比较时，需要注意可能的类型转换和意外结果。为了避免这种情况，最好使用三等（=）进行严格的类型和值比较。

---

3.js中布尔值为false的几种情况

1. false：布尔字面量false表示假。
2. 0：数字0被视为假。
3. NaN：NaN（Not a Number）表示非数字，被视为假。
4. 空字符串：空字符串""被视为假。
5. null：null表示空值，被视为假。
6. undefined：undefined表示未定义的值，被视为假。

---

4.let const var 区别
在编程中，“let”、"const"和"var"是用于声明变量的关键字，它们之间有一些区别。

1. var：在ES5及之前的JavaScript版本中，使用"var"关键字声明变量是最常见的方式。它具有函数作用域，意味着变量的作用域限定在声明它的函数内部。如果在函数内部使用"var"声明的变量没有使用关键字进行限定，那么它将成为全局变量。

2. let：在ES6中引入了"let"关键字，它具有块级作用域。块级作用域意味着变量的作用域限定在声明它的代码块内部，例如if语句、for循环等。使用"let"声明的变量只在当前代码块内有效，不会污染全局作用域。

3. const："const"也是在ES6中引入的关键字，用于声明常量。与"let"类似，"const"也具有块级作用域，但它声明的变量必须进行初始化，并且不能再次赋值。这意味着一旦用"const"声明一个变量，它的值就不能再改变。

总结来说，"var"具有函数作用域，"let"和"const"具有块级作用域。"let"声明的变量可以重新赋值，而"const"声明的变量不能重新赋值。在实际开发中，推荐使用"let"和"const"来声明变量，因为它们更安全、更易于维护。

---

5.普通函数和箭头函数的区别
普通函数和箭头函数是JavaScript中两种不同的函数定义方式，它们有以下几个区别：

1. 语法结构：普通函数使用function关键字来定义，而箭头函数使用箭头（=>）来定义。
2. this的指向：普通函数中的this指向调用该函数的对象，而箭头函数中的this指向定义时的上下文，即外层作用域的this。
3. arguments对象：普通函数中可以使用arguments对象来获取传入的参数列表，而箭头函数没有自己的arguments对象，它会继承外层作用域的arguments对象。
4. 构造函数：普通函数可以用作构造函数来创建对象实例，而箭头函数不能使用new关键字来创建对象实例。
5. 返回值：普通函数中可以使用return语句来返回值，而箭头函数可以使用简洁的箭头函数表达式来隐式返回值。
   总的来说，普通函数更适合作为方法、构造函数或需要动态绑定this的场景，而箭头函数更适合简洁的函数表达式和回调函数的场景。

---

6.数组有哪些方法
数组是一种常见的数据结构，它可以存储多个相同类型的元素。在大多数编程语言中，数组都提供了一些常用的方法来操作和处理数组。以下是一些常见的数组方法：

1. length：返回数组的长度（元素个数）。
2. push：向数组末尾添加一个或多个元素。
3. pop：删除并返回数组的最后一个元素。
4. shift：删除并返回数组的第一个元素。
5. unshift：向数组的开头添加一个或多个元素。
6. concat：将两个或多个数组合并成一个新数组。
7. slice：返回指定位置的子数组。
8. splice：删除、替换或插入元素到数组的指定位置。
9. indexOf：返回指定元素在数组中的第一个匹配位置的索引。
10. lastIndexOf：返回指定元素在数组中的最后一个匹配位置的索引。
11. forEach：对数组的每个元素执行指定的操作。
12. map：对数组的每个元素执行指定的操作，并返回一个新数组。
13. filter：根据指定的条件筛选数组的元素，并返回一个新数组。
14. reduce：对数组的元素进行累积操作，返回一个结果。
15. sort：对数组的元素进行排序。
16. reverse：反转数组的顺序。

这只是一些常见的数组方法，不同的编程语言可能会提供更多的方法。在实际编程中，可以根据具体需求选择合适的数组方法来操作和处理数组。

---

7.for in 对比 for of区别

在JavaScript中，for...in和for...of是两种不同的循环语句，用于遍历对象和数组。
for...in循环用于遍历对象的可枚举属性。它会迭代对象的所有可枚举属性，包括原型链上的属性。语法如下：
例如，我们可以使用for...in循环遍历一个对象的属性：

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key); // 输出：a, b, c
  console.log(obj[key]); // 输出：1, 2, 3
}

for...of循环用于遍历可迭代对象（如数组、字符串、Set、Map等）。它会迭代对象的可迭代属性，而不包括原型链上的属性。语法如下：
例如，我们可以使用for...of循环遍历一个数组：

const arr = [1, 2, 3];
for (let value of arr) {
  console.log(value); // 输出：1, 2, 3
}

总结：

• for...in循环用于遍历对象的可枚举属性。
• for...of循环用于遍历可迭代对象的可迭代属性。

---

8.扁平化数组代码实现
在JavaScript中，flat()方法用于将多维数组扁平化为一维数组。该方法会将嵌套的数组展开，并返回一个新的一维数组。

flat()方法可以接受一个可选的参数，用于指定要展开的嵌套层数。如果不传递参数，默认展开所有层级。

以下是flat()方法的示例用法：

const arr = [1, 2, [3, 4, [5, 6]]];
const flattenedArr = arr.flat();
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

const arr2 = [1, 2, [3, 4, [5, 6]]];
const flattenedArr2 = arr2.flat(2);
console.log(flattenedArr2); // [1, 2, 3, 4, 5, 6]

需要注意的是，flat()方法是ES2019引入的新方法，不是所有的浏览器都支持。如果需要在不支持的环境中使用，可以使用polyfill或者其他替代方法来实现类似的功能。

---

.9数组去重的方法

arr=[1,5,1,3,5,4,3,9,8]
let mySet = new Set(arr); // 非重复的类数组
console.log(mySet,'mySet');//{{1, 5, 3, 4, 9,8}

// let newArr = Array.from(mySet); // set转数组
let newArr = [...mySet]; // 或者是这种解构方法
console.log(newArr);//[1, 5, 3, 4, 9, 8]

---

10.防抖和节流
防抖:Debounce将前面所有触发取消，最后一次执行规定时间内才能触发，也就是说如果连续触发只能执行一次，（大部分应用场景搜索框等）

<template>
  <div>
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
  </div>
</template>
 
<script>
//引入lodash
import lodash from "lodash";
export default {
  name: "HelloWorld",
  data() {
    return {
      inputVal: "",
    };
  },
  methods: {
    inputChange: lodash.debounce(function (val) {
      console.log("---输入框内容（lodash）---", val);   //业务逻辑
      console.log("---发送请求---");                    //业务逻辑
    }, 1000),
  },
};
</script>

节流:throttle将在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发（列如查询五秒内只能使用一次）

<template>
    <div class="main">
        <el-button type="plain" @click="search">搜索</el-button>
    </div>
</template>
<script>
import lodash from "lodash";
export default {
    name: "HelloWorld",
    methods: {
        search: lodash.throttle(
            function () {
                console.log("---发送请求---");   //业务逻辑
            },
            3000,
            { trailing: false }  //一定要传入这个参数否则的话在3秒内多次点击会调用2次
        ),
    },
};
</script>

---

10.事件循环机制
事件循环理论先执行同步任务，再去执行我们的异步任务（先执行微任务再执行宏任务）。
异步任务进一步划分分为：
宏任务：script标签、setTimeout()、setInterval
微任务：Promise.then、nextTick

---

11.原型与原型链
原型（prototype）是JavaScript中的一个概念，它是一个对象，其他对象可以通过它进行属性和方法的继承。每个JavaScript对象都有一个原型，可以通过__proto__属性来访问。

原型链（prototype chain）是指当访问一个对象的属性或方法时，如果该对象本身没有该属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（即Object.prototype）。

当我们创建一个对象时，JavaScript会自动为该对象关联一个原型。我们可以通过构造函数来创建对象，构造函数中的prototype属性就是该构造函数创建的对象的原型。当我们使用new关键字创建一个对象时，该对象的原型就是构造函数的prototype属性。

例如，我们有一个构造函数Person，它有一个name属性和一个sayHello方法：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}

var person1 = new Person("Alice");
person1.sayHello(); // 输出：Hello, my name is Alice

在上面的例子中，person1对象通过new Person("Alice")创建，它的原型是Person.prototype。当我们调用person1.sayHello()时，JavaScript引擎会先在person1对象中查找sayHello方法，如果找不到，就会沿着原型链向上查找，最终找到Person.prototype中的sayHello方法并执行。

这就是原型和原型链的基本概念和用法。它们是JavaScript中实现继承的重要机制。

---

12.localStorage、sessionStorage、cookie区别
localStorage、sessionStorage和cookie是用于在浏览器端存储数据的三种不同的机制。

1. localStorage：localStorage是HTML5引入的一种持久化存储机制，它可以在浏览器关闭后仍然保留数据。存储在localStorage中的数据没有过期时间，除非手动清除或者通过代码删除，否则数据将一直存在。localStorage可以存储大量的数据，一般有5MB或更大的容量限制。

2. sessionStorage：sessionStorage也是HTML5引入的一种存储机制，它与localStorage相似，但是存储在sessionStorage中的数据在浏览器关闭后会被清除。sessionStorage的作用域是在当前会话中，即同一个浏览器窗口或者标签页。sessionStorage的容量限制与localStorage相同。

3. cookie：cookie是一种在浏览器端存储数据的机制，它可以设置过期时间。存储在cookie中的数据会在每次请求时发送到服务器端，因此可以用于实现用户登录状态的保持。cookie的容量限制较小，一般为4KB左右。

总结：

• localStorage和sessionStorage都是在浏览器端存储数据的机制，可以用于在不同页面之间共享数据。
• localStorage的数据在浏览器关闭后仍然保留，而sessionStorage的数据在浏览器关闭后会被清除。
• cookie可以设置过期时间，并且在每次请求时会发送到服务器端，适合用于实现用户登录状态的保持。

---

13.typeof 和 instanceof 他们两者的区别

1.typeof：一般判断基本数据类型

2.instanceof ：一般判断引用类型数据，主要的作用就是判断一个实例是否属于某种类型，或者判断一个实例是否有它的原型。

---

14.null typeof为什么是一个object
因为在javaScript中，不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object

---

15.JS闭包

闭包是JavaScript中一种强大的特性，它可以让函数访问其外部作用域中的变量和函数。闭包有以下几个优点和缺点：

优点：

1. 保护变量：闭包可以将变量私有化，防止其被外部访问和修改，提高代码的安全性。
2. 延长变量生命周期：闭包可以使函数中的变量在函数执行完毕后仍然存在，可以在之后的调用中继续使用，提供了一种保存状态的机制。
3. 实现模块化：闭包可以将一组相关的变量和函数封装在一个作用域内，形成一个独立的模块，提高代码的可维护性和可复用性。

缺点：

1. 内存泄漏：闭包中的变量会一直存在于内存中，如果闭包被频繁创建且不被释放，可能会导致内存泄漏问题。
2. 性能问题：闭包会占用更多的内存和处理时间，因为它需要维护额外的作用域链和变量引用关系。
3. 难以理解和调试：闭包的嵌套结构和变量引用关系可能会增加代码的复杂性，使得代码难以理解和调试。

总的来说，闭包是一种强大的特性，但在使用时需要注意内存和性能问题，合理使用闭包可以提高代码的可维护性和可复用性。

---

16.js什么是深拷贝？什么是浅拷贝
深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在编程中常用的两个概念，用于描述对象或数据的复制方式。

深拷贝是指创建一个新的对象或数据，完全复制原始对象或数据的所有值和内容。深拷贝会递归地复制所有的子对象，确保原始对象和新对象之间的完全独立性。即使原始对象发生变化，新对象也不会受到影响。

浅拷贝是指创建一个新的对象或数据，只复制原始对象或数据的引用而不是实际的值和内容。浅拷贝只复制对象的第一层，而不会递归复制子对象。因此，如果原始对象包含引用类型的属性，浅拷贝后的对象和原始对象会共享这些属性的引用，导致它们之间的变化相互影响。

在编程中，深拷贝和浅拷贝的选择取决于具体的需求和场景。如果需要独立的对象或数据，不希望它们之间相互影响，就应该使用深拷贝。如果只需要引用原始对象或数据的副本，并且可以接受它们之间的相互影响，就可以使用浅拷贝。

---

VUE

1、vue生命周期

vue2生命周期函数

beforeCreate、created 、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue3生命周期函数

setup 、onBeforeMount 、 onMounted 、onBeforeUpdate 、onUpdated、onBeforeUnmount、onUnmounted

1. 生命周期钩子函数名称的变化：

   • Vue.js 2中的beforeCreate和created钩子函数在Vue.js 3中被重命名为beforeSetup和setup。
   • Vue.js 2中的beforeMount和mounted钩子函数在Vue.js 3中被重命名为beforeMount和onMounted。
   • Vue.js 2中的beforeUpdate和updated钩子函数在Vue.js 3中被重命名为beforeUpdate和onUpdated。
   • Vue.js 2中的beforeDestroy和destroyed钩子函数在Vue.js 3中被重命名为beforeUnmount和onUnmounted。

2. 新增的生命周期钩子函数：

   • Vue.js 3引入了一些新的生命周期钩子函数，如beforeUnmount、onUnmounted、beforeUpdate、onUpdated等。这些钩子函数提供了更精细的控制和更好的性能优化。

3. Composition API的引入：

   • Vue.js 3引入了Composition API，它是一种新的组合式API，可以更好地组织和重用组件逻辑。与Vue.js 2的Options API相比，Composition API提供了更灵活和可组合的方式来编写代码，从而改变了组件的生命周期使用方式。

总的来说，Vue.js 3在生命周期方面进行了一些改进和优化，引入了新的钩子函数和Composition API，提供了更好的性能和更灵活的开发方式。

2.vue的特性
共同特性：

1. 声明式渲染：Vue使用模板语法将组件的状态映射到DOM元素，使得开发者可以轻松地编写和理解代码。
2. 组件化开发：Vue将应用程序拆分为多个可重用的组件，使得代码更加模块化和可维护。
3. 响应式数据绑定：Vue使用双向绑定机制，当数据发生变化时，自动更新相关的视图。
4. 虚拟DOM：Vue使用虚拟DOM来提高性能，只更新需要变化的部分，而不是整个DOM树。

Vue2的特性：

1. 过滤器：Vue2支持过滤器，可以在模板中对数据进行格式化和处理。
2. mixins：可以将多个组件共享的逻辑提取为mixin，减少重复代码。
3. keep-alive：可以使用keep-alive组件缓存组件的状态，提高性能。

Vue3的特性：

1. Composition API：Vue3引入了Composition API，提供了更灵活和可组合的方式来组织和重用组件逻辑。
2. 更好的性能：Vue3在虚拟DOM的实现上进行了优化，提高了性能。
3. 更小的体积：Vue3的体积比Vue2更小，加载速度更快。
4. TypeScript支持：Vue3对TypeScript的支持更加完善，提供了更好的类型检查和开发体验。

3.vue数据的双向绑定

在Vue2中，数据双向绑定是通过使用Object.defineProperty()方法来实现的。当数据发生变化时，Vue会通过劫持数据的getter和setter方法来监听数据的变化，并且在数据变化时更新相关的视图。这种方式需要对每个数据进行劫持，因此在大规模数据变化时会有一定的性能问题。

而在Vue3中，采用了Proxy对象来实现数据双向绑定。Proxy对象可以直接监听整个对象的变化，而不需要对每个属性进行劫持。当数据发生变化时，Proxy对象会触发相应的代理方法，从而更新相关的视图。这种方式相比Vue2的方式更加高效，尤其在处理大规模数据变化时性能更好。

---

项目中配置文件

1.Enlint文件是什么?
答：Enlint是一个JavaScript代码风格检查工具，可以帮助开发者检查代码中的语法错误、代码风格问题等。Enlint的配置文件为enlint.json，可以通过配置文件来设置检查规则和忽略某些文件或目录

---

2.prettier文件是什么?
答：一款代码格式化工具，可以帮助开发者自动格式化代码，使代码风格更加统一、易读。在项目中，通常会在根目录下创建一个.prettierrc文件，用于配置Prettier的格式化规则，在项目中，通常会使用Prettier来格式化代码，并将其集成到代码编辑器或代码仓库中，以便在提交代码时自动格式化代码。

---

3.Husky文件是什么?
答：Husky是一个Git钩子管理工具，可以帮助我们在Git仓库中管理和执行Git钩子。在项目中，通常会使用Husky来管理Git钩子，以确保代码质量和一致性。
Husky的配置文件通常命名为.huskyrc或.huskyrc.js，它定义了Git钩子的执行命令和参数。例如，我们可以在.huskyrc文件中定义pre-commit钩子的执行命令为lint-staged，以确保在每次提交代码前都会执行代码风格检查和格式化。
Husky还可以与其他工具集成，例如lint-staged和linters，以实现更全面的代码检查和自动化流程。在项目中使用Husky可以提高代码质量和开发效率，是一个非常有用的工具

---

4.Commitlint文件是什么?
答：是一个用于规范Git提交信息的工具，它可以帮助团队规范化提交信息的格式，从而提高代码的可读性和可维护性。在项目中，通常会在根目录下创建一个.commitlintrc.js或.commitlintrc.json文件，用于配置Commitlint的规则。

---

5.Commitlint文件是什么?
答：是一个用于规范Git提交信息的工具，它可以帮助团队规范化提交信息的格式，从而提高代码的可读性和可维护性。在项目中，通常会在根目录下创建一个.commitlintrc.js或.commitlintrc.json文件，用于配置Commitlint的规则。

---

6.preinstall文件是什么?
答：preinstall文件是一个在安装软件之前运行的脚本文件，它可以用来执行一些预安装操作，例如检查系统环境、安装依赖项、创建目录等。在项目中，preinstall文件通常用于在安装依赖项之前执行一些操作，以确保依赖项安装成功。preinstall文件通常被放置在项目根目录下的“scripts”文件夹中，并在package.json文件中的“scripts”字段中定义。在运行“npm install”命令时，npm会自动执行preinstall文件中的命令。

---

6.svg文件是什么?
答：SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它可以在不失真的情况下缩放和调整大小。在项目中使用SVG文件可以使图像在不同分辨率和屏幕尺寸下保持清晰度和清晰度，而不会失真或模糊。
在项目中，SVG文件可以用于图标、图形和其他矢量图形的展示。它们可以通过HTML、CSS和JavaScript进行操作和控制，使它们更加交互和动态。

---

6.Sass文件是什么?
答：Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它可以让开发者使用类似编程语言的方式编写CSS代码，包括变量、函数、嵌套、继承等功能，从而提高CSS代码的可维护性和可读性。
在项目中，通常会将Sass文件（.scss或.sass扩展名）放在一个单独的文件夹中，例如“sass”或“styles”。这些文件可以包含全局的样式规则、变量、混合器和函数等，也可以包含特定页面或组件的样式规则。
为了将Sass文件编译成浏览器可识别的CSS文件，需要使用Sass编译器。常见的编译方式包括使用命令行工具、使用构建工具（如Webpack、Gulp等）或使用集成开发环境（如VS Code、WebStorm等）中的插件。编译后的CSS文件可以直接引用到HTML文件中，以应用样式规则。。