前端知识点

实际面试题

1.组件封装过哪些组件

2.v-for，key属性的作用和原理

Vue中为v-for提供了一个属性，key，在写v-for的时候，都需要给元素加上一个key属性，这个key属性必须是唯一的标识，并且给key赋值的内容不能是可变的。
一句话来讲：key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点
如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去

一、key属性的作用：

    1. 提升v-for渲染的效率

    2. 提高渲染性能
    若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。
    3.避免数据混乱的情况出现

如果结构中还包含输入类的DOM：会产生错误DOM更新，出现数据混乱。

二、开发中如何选择key?
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，只是简单的展示数据，用index也是可以的。

3.如果对数据的逆序添加、逆序删除等破坏顺序操作，用index作为key值，效率低。

3.echart自适应问题

在了解echarts绘制机制,echarts图形只绘制一次,且绘制时自动获取父级大小填写宽度,考虑让echarts延迟绘制使用setTimeout
echart图表本身提供了一个resize的函数，我们只需要监听页面(window)的resize(事件)变化以后，去执行echarts的resize方法即可重绘canvas(画布)，从而实现对应自适应效果。请看代码中的注释步骤

记得移除绑定的监听resize事件

 <script>
// 第一步，引入echarts插件以供使用
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 定义变量用来存放echarts实例
      option: { // 配置项写在data里面方便管理
        title: {
          text: "ECharts 示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    // 第二步，在页面加载渲染的时候执行echarts画图方法
    this.drawEcharts();
  },
  methods: {
    drawEcharts() {
      // 第三步，通过echarts的init方法实例化一个echarts对象myChart，并，保存在data变量中
      this.myChart = Echarts.init(document.getElementById("echart"));
      // 第四步，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好，这里的配置项
      //         写在data中，方便我们在一些事件中去修改对应配置项，比如点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
      //        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
      //        我们一般使用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    beforeDestroy() {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

4.el-tree懒加载，回显问题

5.iframe优缺点

iframe 标签承载了一个单独的嵌入的窗口，它有自己的 document 和 window，当我们访问嵌入的窗口中的东西时，浏览器会检查 iframe 是否具有相同的源。如果不是，则会拒绝访问（对 location 进行写入是一个例外，它是会被允许的）。

同源策略会限制窗口(window) 和 frame 之间的通信，因此首先要知道同源策略。同源策略目的是保护用户信息免遭信息盗窃：加入小王有两个打开的页面：一个是 shop.com，一个是 email.com。小王不希望 shop.com 的脚本可以读取 mail 的邮件，这时同源策略就起作用了。

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决。

5.iframe会堵塞主页面的Onload事件。

6.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

iframe的缺点：

1.会产生很多的页面，不容易管理

2.iframe框架结构个数多的话，可能会出现上下左右滚动条，会分散访问者的注意，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于搜索引擎优化。

4.很多移动设备无法完全显示框架，设备兼容性差

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐退出了前端开发**

面试题1

1、水平垂直居中的方式

第一种，用纯flex布局吧。

直接给对应的父盒子加一个display：flex开启布局。然后使用主轴居中;侧轴居中。（两者都是添加给父盒子的。）

第二种，用flex+margin的方式。

还是同样的先给父盒子添加一个display：flex开启布局，然后给子盒子添加一个margin：auto就可以水平垂直居中了。

第三种，用定位+margin的方式

首先根据子绝父相的方式进行定位，然后子盒子的绝对定位是top：50%，left：50%，但由于这里的50%都是以盒子的左上角为中心点的，所以需要用margin来返回自身宽高的一半，也就是margin-top：负的子盒子高度的一半。margin-left：负的子盒子宽度的一半。

第四种，用定位+transform的位移操作

这种方法可以说是上一种方法的改进，他省略了我们自己计算盒子宽高一半的过程。因为transform的位移，可以使用百分比的方式，并且百分比的对象就是盒子本身。也就是在子绝父相的情况下，直接使用transform：translate（-50%，-50%）即可。

第五种，用定位+margin的方式

在子绝父相的情况下，给子盒子添加上下左右都设置为0，最后再给子盒子添加一个margin：auto，就可以达到水平垂直居中的效果。

像很多人都会说直接采用margin：auto的方式，但是当盒子没有高度的情况下，这样的方式是不可取的。所以基本不会采用。

2、盒模型

盒模型由四个部分组成，分别是内容、内边距、外边距和边框

盒模型的分类有两种，content-box和border-box，可以通过box-sizing来设置。默认值是content-box。

两者的区别主要是对盒子的大小计算方式不同。

●content-box又被称为w3c标准盒模型。

○width设置的是内容的宽度

○实际宽度=padding+border+width

●border-box又被称为c3模型/ie盒模型等

○width设置的是实际的宽度

○width=内容+padding+border

3、关于flex：1

flex其实是flex-grow、flex-shrink、flex-basis 这三个属性的简化版

flex-grow：用来增大盒子。当父盒子有剩余空间的时候，可以利用flex-grow来设置盒子增大的比例。比如，有两个子盒子，剩余200，盒子a的flex-grow=1，盒子b的flex-grow=3，那么盒子a在原有的基础上加50，盒子b在原有的基础上加150.

flex-shrink：用来缩小盒子。当总数超过父盒子的时候，可以利用flex-shrink来设置盒子缩小的比例。比如，有两个子盒子，超出200，盒子a的flex-shrink为1，盒子b的flex-shrink为3，那么盒子a在原有的基础上减去50，盒子b在原有的基础上减去150.

flex-basis：用来设置盒子的基础宽度。（如果存在，会覆盖原本的width）直接用px设置大小。

flex：1表示1,1,0% 可扩大可缩小，一般为平均分

flex：auto表示1,1，auto 可扩大可缩小，根据内容的大小来分

flex：0表示0，1,0% 不可扩大，可缩小，最小内容宽度（一般为一个字的宽度）

flex：none表示0,0，auto 不可扩大，不可缩小，一般为内容本身的宽度

auto表示的是容器原本的大小，0%表示为零尺寸的。

4、css3的新特性

css3的新特性，那太多了。我讲几个常用的吧

●（1）选择器

○新增了属性选择器，伪类选择器等等，最常用的应该是

■：hover鼠标移动到元素上面

■：nth-child（n）某个元素的第n个子元素

■：last-child 某个元素的最后一个子元素

■：first-child 某个元素的第一个子元素

●（2）新样式

○边框方面

■border-radius：圆角边框,如果设置50%则表示为圆形

■box-shadow：添加阴影

○背景方面

■background-size图片的缩放，cover表示要铺满整个盒子，contain表示宽高有一个铺满就结束

○颜色方面

■rgba（），hsla（）以及opacity的透明度

●（3）转换transform

○主要是位移translate、旋转rotate、缩放scale几个技能

●（4）过渡动画transition

○ CSS属性，花费时间，运动曲线（默认ease)，延迟时间(默认0)

●（5）自定义动画animation，和transition差不多，最大的区别就是自定义动画不需要触发，定义了就会有动画

●（6）flex布局

5、BFC

.BFC就是块级格式上下文，它是一种属性，可以让渲染区域独立，并且渲染区域中的布局不会影响外界。

BFC的触发情况有很多种，像overflow,float,position,display等等，最常用的应该是overflow：hidden，position：absolute吧。

BFC解决的问题有很多。

情况一：兄弟上下重叠

当上下两个盒子同时拥有上下间距，不是取两个间距之和，而是取最大值。

解决方式就是给盒子添加一个父盒子，并且给父盒子开启BFC。

情况二：外边距塌陷

就是父盒子不存在boder或者是padding的时候，子盒子有一个margin-top，那么父盒子也会对这个指令进行生效。解决方式是给父盒子开启BFC模式，当然，可以给父盒子加一个border或者padding，但是这样容易改变原本的样式，不可取。

情况三：左右布局问题

当A盒子浮动，B盒子不浮动的时候，两者就会产生覆盖。解决的方式就是给非浮动的盒子添加一个BFC模式。一定是给没有浮动的盒子进行添加。

情况四：清除浮动

在父盒子没有设置高度的时候，高度是由内容撑开的，所以子盒子浮动以后，父盒子就会没有高度。只要给父盒子添加BFC布局即可。

6、rem适配原理，响应式布局

rem是相对长度单位，相对于根元素的fomt-size计算值的大小。

1rem=根节点的字体大小

原理：在不同的屏幕下，修改根节点的字体大小。

在项目中：下载一个flexible包，即可动态更改html的字体大小

7、重绘和回流(重排)

重排和重绘是浏览器关键渲染路径上的两个节点，浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过一个布局步骤来确定页面上所有内容的大小和位置，确定布局后，将像素绘制到屏幕上。

其中重排就是当元素的位置发生变动的时候，浏览器重新执行布局这个步骤，来重新确定页面上内容的大小和位置，确定完之后就会进行重新绘制到屏幕上，所以重排一定会导致重绘。

如果元素位置没有发生变动，仅仅只是样式发生变动，这个时候浏览器重新渲染的时候会跳过布局步骤，直接进入绘制步骤，这就是重绘，所以重绘不一定会导致重排。

8、状态码 3

200；请求成功

201：请求成功，但是逻辑有问题

204：请求正常处理，但是没有数据可以返回

304：协商缓存

400：传的参数出现问题

401：一般都是登录过期

404：资源不存在

500：服务器出错

3XX表示重定向，表明浏览器需要执行某些特殊的处理以正确处理请求。

301永久移动，302临时移动

303和302状态码有着相同的功能，但303明确表示客户端应当采用get方法获取资源，这点与302状态码有区别。

9、浏览器的缓存机制

浏览器会将请求后的资源进行存贮为离线资源，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。

--作用：

●减少了不必要数据的传输、降低服务器的压力

●加快了客户端访问速度

●增强用户体验

缓存机制分为强缓存和协商缓存

强缓存：

概念：不向服务端发送请求，强制使用缓存数据

实现方式：后端在响应头中返回 Expires 和 Cache-Control
- Expires ：http 协议 1.0 的字段，缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点
  
  缺点：浏览器使用 expires 到期时间和本地时间进行对比，如果本地时间被修改或者和服务器时间差距较大，造成不准确的问题
- Cache-Control： HTTP 1.1 的字段，约定过期时间的相对时间。
  
  ！当 cache-control 和 expires 同时存在 cache-control 的优先级会比 expires 高。
协商缓存：

当强缓存失效后，会使用协商缓存

协商缓存由服务器决定是否使用缓存
1. 向服务器发送请求资源并携带标识
  
  ●Etag 字段：表示请求资源在服务器的唯一标识，浏览器可以根据 ETag 值缓存数据，下次请求的时候以 If-None-Match 字段请求
  
  ●Last-Modified 字段：用于标记请求资源的最后一次修改时间
2. 服务器会进行判断浏览器缓存的资源是否真的失效（也就是是否更新）
  
  ●服务端已经更新，返回 200，重新返回最新资源和缓存标识
  
  ●浏览器再次存入缓存
  
  ●后续再次从强缓存开始
3. 缓存时间到了，但是资源没更新，就还使用本地的，直接返回 304

10、slice，substr，substring

三者都是截取的意思。都可以截取字符串，slice可以截取数组。

第一个参数为开始位置，substr的第二个参数是个数，其他两个第二参数表示结束位置。

第一个参数大于第二个参数时，substring会自动调换顺序，slice会在第一参数大于第二参数时返回空，substr不在乎两者的比较。

参数<0，substring无效，slice会给负数加上数据长度，substr第一参数为负数也会加上数据长度，第二参数不可为负数。

11、slice，splice，split

splice

●可以进行增删改

●修改原数组，返回修改的内容

●第一个参数为起始索引，第二个参数是个数，第三个参数开始是添加或修改的值

slice

●进行截取

●原数组不变，返回截取的内容

●第一个参数为起始索引（包括），第二个参数为截止索引（不包括）

○start (可选)

如果start为负数，则加上数组长度

如果start被省略，则从索引 0 开始。

如果start超出原数组的索引范围，则会返回空数组。

○end (可选)

如果 end 被省略，则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

如果end小于start，则会返回空数组。

split：字符串 => 数组

○字符串的方法，不是数组的方法。

○返回一个字符串数组。

○str.split(分隔符)

12、数据类型，检测数据类型 3

简单数据类型和复杂数据类型。

简单数据类型有number数字，boolen布尔值，字符串，null，undefined，还有es6新增的symbol唯一值。

复杂数据类型有object对象，array数组，function函数以及特殊对象正则RegExp和日期dDate。
检测数据类型

第一种：typeof可以正常检测出：number、boolean、string、object、function、undefined、symbol、bigint

检测基本数据类型，null会检测object，因为null是一个空的引用对象
检测复杂数据类型，除function外，均为object
对象，数组以及null无法区分都会被检测为object。
infinity和NaN会被识别为number

第二种：instance of，检测引用数据类型，用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。写法就是：某个实例对象A instanceof 某个构造函数B。检测null和undefined会返回false

第三种：toString.call(xxx)

toString是Object原型对象上的一个方法，必须通过Object.prototype.toString.call(xxx)来获取。
因为从原型链的角度讲，所有的对象最终都会指向object。但大部分的对象，本身也可能有toString的方法，这样就会导致没有查到object的toString方法就会被自身的发放给终止掉。
需要用call来强制执行,改变方法的this指向所要检测的数据。
可以检测出所有数据类型

第四种：是根据对象的constructor（con s jua k t）来判断该对象实例由哪个构造函数创建的，检测的是由字面量方式创建出来的数据类型。（不能用于检测由自定义构造函数new出来的数据）
obj.constructor=== Object //true

第五种：isArray()检测数组

13、递增递减

x++ 先返回值后递增

++x 先递增后返回值

undefined++ = NaN

14、作用域

作用域就是所作用的一个范围。作用域和函数的定义有关。而和函数的调用有关的是this的指向
作用域的作用是提高了程序逻辑的局部性，增强了程序的可靠性，减少了命名的冲突。
有全局作用域和局部作用域两种。
- 全局作用域是作用于所有代码执行的环境，局部作用域是作用于函数内部的代码环境。
相对应的还有全局变量和局部变量。
- 全局变量可以在任何一个地方使用，只有在浏览器关闭的时候才会被销毁，比较占内存。
  这里有一个特殊就是，如果在函数内部，没有声明直接赋值的变量，也属于全局变量。
- 局部变量是在函数内部使用的，只有所在函数被执行，才会初始化，函数执行结束，就会被销毁。因此比较节省内存空间。
作用域链

内部函数访问外部函数的变量，采取的就是链式查找的方式，站在目标角度出发，一层一层往外找，并追求就近原则

15、预解析

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行.

预解析会把变量和函数的声明在代码执行之前执行完成。

预解析有两种，变量预解析和函数预解析

变量预解析，也就是变量的提升，变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。（只提升声明，不提升赋值，提升的是var的，和let，const无关）
函数预解析，函数的声明会被提升到当前作用域最上面，但是不会调用函数
函数预解析优先级大于变量预解析（先声明函数再声明变量）

16、new的过程 3

内存中创建一个空对象
将这个空对象的__proto__指向了构造函数的Prototype属性,obj.__proto__=Person.prototype
构造函数内部的this被赋值为这个新对象（即this指向新对象）。
调用构造函数，执行构造函数内部的代码（给新对象添加属性和方法）
构造函数默认返回return this ，也就是this的实例化对象

●如果写了return，那么看return后面的数据类型

●如果是简单数据类型，忽略return简单数据类型，return this

●如果是复杂数据类型，忽略return this，return复杂数据类型

17、静态成员和实例成员

实例成员就是构造函数通过this添加的成员，只能够通过实例化的对象来访问

静态成员就是在构造函数本身上添加的成员，只能够通过构造函数来访问，如Object.keys()

18、关于原型链、构造函数

构造函数的prototype和其实例的__proto__是等价的，都指向原型对象。
构造函数就是可以用来new的函数。（箭头函数不能当做构造函数）
也是在new的过程中，将实例.__proto__指向了对应的构造函数的prototype

1、每个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数所拥有的。

（通过构造函数创建的实例，实例再去访问属性的时候，自身没有就会去构造函数的prototype上面寻找。我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。也可以解决构造函数方法浪费内存的问题。）

2、每一个对象（除了null）都会有一个__proto__属性，指向构造函数的prototype。

（之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 的存在。 __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype。）

3、每个原型对象都有一个constructor 属性，指向构造函数。

（constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。）

原型链的底层基础，首先是创建一个构造函数，然后new得到一个实例。构造函数的prototype和其实例的__proto__都指向原型对象。这就形成了一个三角形。并且原型对象的constructor指回构造函数本身。又因为原型对象也是一个对象，也有__proto__属性，这样一层一层往上就形成了原型链。原型链的最上面一层是Object的原型对象。再往上就指向了null。

实例对象在查找属性的时候，如果找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查不到，就去找原型的原型，直至查到顶层的Object.prototype，这也就是原型链的概念。或者也可以说顶层是Object.prototype.proto,也就是null。

19、继承有哪几种方式 3

继承和多态、封装共为面向对象的三个基本特征。继承可以使子类具有父类的属性和方法。

第一种：原型链继承
- 关键核心：让父类的实例作为子类的原型。SonFn.prototype=new FatherFn()
- 将子类共有的方法，创建在父类的原型对象上。
- 将子类共有的属性，创建在父类的构造函数内。
- 缺点：
  1. 子类new实例的时候无法向父类传递参数。
  2. 如果原型属性值是复杂数据类型，那么该属性会被所有的实例共享。
  3. 因为重写了子类的原型对象，所有子类的原型对象就没有了constructor属性，需要手动加
第二种：借用构造函数继承
- 关键核心：在子类构造函数中使用call（）调用父类构造函数
```
function Animal(name,age){
    this.name=name,
    this.age=age,
}
function Cat(name,age){
	Animal.call(this,name,age)  //new Cat时即将父类的this改成指向子类实例对象
}
const cat = new Cat('花花'，12)
console.log(cat)  //{name:'花花',age:'12'}
```
- 让父类的this指向子类的实例，在子类的构造函数中,用call改变this的指向
- 缺点：
  只能实现属性的继承，不能继承方法（因为方法不写在构造函数中，写在原型中，原型链继承可以）

第三种：组合式继承（组合上两种方法）

关键核心：子类构造函数中使用 call() 调用父类的属性，让父类的实例作为子类的原型(能够调方法)

通俗的讲，就是将原型链继承中的方法继承和借用构造函数继承中的属性继承进行组合

缺点：多次调用了父类构造函数。原型链继承方法的时候，会创建一个没有用的父类构造函数，比较浪费。

第四种：寄生式组合继承（组合改进第三种方法）

关键核心：使用 Object.create() 来解决多次调用父类构造函数问题
用Object.create（参数），作用是创建出来一个新空对象，他的原型对象是括号内的参数。
子类的prototype=Object.create(父类的prototype)，（用于替换子类的prototype=父类的prototype）
也就是新对象的原型对象为父类的prototype，而实例的原型对象指向了新对象，也就是实例的原型对象的原型对象为父类的prototype

第五种：es6类继承

使用class 父类，并且用extends使子类继承父类。

class Person {
  say() {
    console.log('说话了')
  }
}
class Child extends Person {}
const child = new Child()
child.say()