前端八股文（仅适用于像我这种刚毕业找工作的。。。待整理）

 实习即将结束，答辩已结束，等发毕业证。。。恶补一下基础面试题，免得被问的一个答不上来。。。文章内容是网上他人总结和自己面试遇到的问题的一个简单汇总

面试小结：

面的1-3工作经验的岗，我遇到的大部分面试官提问技术时更多的是关心面试者对框架的使用熟练程度、实现原理、组件封装、项目中负责什么重点部分。。还有写在简历中的内容会被重点盘问。。。。

第一章 面试题基础篇

1.1 HTML面试题      

面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
 

行内元素:

   1. 和有他元素都在一行上, 它是依附于其他块级元素存在的;

   2. 高度、行高、外边距、内边距 都不可改变, 因此, 对行内元素设置 高度、宽度、内外边距 等属性,

 都是无效的;

   3. 文字的宽度不可改变, 只能容纳文本或者其他行内元素, 其中 'img' 是行元素 。


块级元素:

   1. 矩形，独占一行, 可以通过设置 高度、宽度、内外边距 等属性来调整这个矩形。




1. 行内元素(11): a、b、span、img、input、strong、select、label、em、button、textarea 。

2. 块级元素(9): div、列表元素(ul、li、dl、dt、dd)、p、h1-h6、blockquote 。

3. 空元素(6): 即没有内容的HTML元素, 例如: br、meta、hr、link、input、img 。




元素之间的转换问题：

display: inline;        把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高

display: inline-block;  把某元素转换成了行内块元素    ===>不独占一行的，可以设置宽高

display: block;         把某元素转换成了块元素        ===>独占一行，并且可以设置宽高

面试题：页面导入样式时，使用link和@import有什么区别？

区别一：link先有，后有@import（兼容性link比@import兼容）；

区别二：加载顺序差别，浏览器先加载的标签link，后加载@import

面试题：title与h1的区别、b与strong的区别、i与em的区别？

```

title与h1的区别：



定义：

  title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么

  h1：文章主题内容，告诉我们的网站内容最主要是什么

区别：

  title他是显示在网页标题上、h1是显示在网页内容上

  title比h1添加的重要 (title > h1 ) ==》对于seo的了解

场景：

  网站的logo都是用h1标签包裹的

```



```

b与strong的区别：



定义：

  b：实体标签，用来给文字加粗的。

  strong：逻辑标签，用来加强字符语气的。

区别：

  b标签只有加粗的样式，没有实际含义。

  strong表示标签内字符比较重要，用以强调的。

题外话：为了符合css3的规范，b尽量少用该用strong就行了。

```



```

i与em的区别：



定义：

  i:实体标签，用来做文字倾斜的。

  em：是逻辑标签，用来强调文字内容的

区别：

  i只是一个倾斜标签，没有实际含义。

  em表示标签内字符重要，用以强调的。

场景：

  i更多的用在字体图标，em术语上（医药，生物）。

```

面试题：img标签的title和alt有什么区别？

```

区别一：

  title ： 鼠标移入到图片显示的值

  alt   ： 图片无法加载时显示的值

区别二：

  在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

```

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

```

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。

jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。

gif:一般是做动图的。

webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

```

1.2 CSS面试题

面试题：介绍一下CSS的盒子模型

```

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型

CSS的盒子模型区别：

  标准盒子模型：margin、border、padding、content

  IE盒子模型 ：margin、content（ border +  padding  + content ）

通过CSS如何转换盒子模型：

  box-sizing: content-box;  /*标准盒子模型*/

  box-sizing: border-box;   /*IE盒子模型*/

```

​  面试题：line-height和heigh区别【大厂】

```

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。

height是一个死值，就是这个盒子的高度。

```

面试题：CSS选择符有哪些？哪些属性可以继承？

```

CSS选择符：

    通配（*）

    id选择器（#）

    类选择器（.）

    标签选择器（div、p、h1...）

    相邻选择器(+)

    后代选择器(ul li)

    子元素选择器（ > ）

    属性选择器(a[href])

   

CSS属性哪些可以继承：

    文字系列：font-size、color、line-height、text-align...

***不可继承属性：border、padding、margin...

```

​面试题：CSS优先级算法如何计算？

优先级比较：!important > 内联样式 > id > class > 标签 > 通配


CSS权重计算：

第一：内联样式（style）  权重值:1000

第二：id选择器           权重值:100

第三：类选择器           权重值:10

第四：标签&伪元素选择器   权重值:1

第五：通配、>、+         权重值:0

面试题：用CSS画一个三角形

用边框画（border）,例如：

{

    width: 0;

    height: 0;



    border-left:100px solid transparent;

    border-right:100px solid transparent;

    border-top:100px solid transparent;

    border-bottom:100px solid #ccc;

}

面试题：一个盒子不给宽度和高度如何水平垂直居中？

##### 方式一：flex布局



```

<div class='container'>

  <div class='main'>main</div>

</div>



.container{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 300px;

    height: 300px;

    border:5px solid #ccc;

}

.main{

    background: red;

}

```



##### 方式二：绝对定位



```

<div class='container'>

  <div class='main'>main</div>

</div>



.container{

    position: relative;

    width: 300px;

    height: 300px;

    border:5px solid #ccc;

}

.main{

    position: absolute;

    left:50%;

    top:50%;

    background: red;

    transform: translate(-50%,-50%);

}

```

面试题：display有哪些值？说明他们的作用。

```

none          隐藏元素

block         把某某元素转换成块元素

inline        把某某元素转换成内联元素

inline-block  把某某元素转换成行内块元素

```

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

```

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。



1. 了解BFC ： 块级格式化上下文。

2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。

3. 如何触发BFC：

    float的值非none

    overflow的值非visible

    display的值为：inline-block、table-cell...

    position的值为:absoute、fixed

```


display：inline-block与overflow: hidden都可以开启BFC，但原理不同，

inline-block会形成一行外框把元素包裹起来，所以能形成一个独立区域，解决外边距塌陷问题。

但overflow: hidden主要作用于子元素，所以给外边距塌陷的元素加这个属性，不会解决外边距塌陷问题。


作用：

1. 相邻元素外边距合并问题

2. 父子元素外边距塌陷问题

3. 子元素浮动，父元素高度坍塌

4.元素浮动，脱落文档流，使元素发生重叠

更详细的说明：BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！-CSDN博客

面试题：清除浮动有哪些方式？

```

1. 触发BFC

2. 多创建一个盒子，添加样式：clear: both;

3. after方式

  ul:after{

      content: '';

      display: block;

      clear: both;

  }

```

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

```

偶数 : 让文字在浏览器上表现更好看。



另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。

```

​面试题：position有哪些值？分别是根据什么定位的？

```

static [默认]  没有定位

fixed  固定定位，相对于浏览器窗口进行定位。

relative  相对于自身定位，不脱离文档流。

absolute  相对于第一个有relative的父元素，脱离文档流。

sticky  relative + fixed 


relative和absolute区别

1. relative不脱离文档流 、absolute脱离文档流

2. relative相对于自身 、 absolute相对于第一个有relative的父元素

3. relative如果有left、right、top、bottom ==》left、top

   absolute如果有left、right、top、bottom ==》left、right、top、bottom

```

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。(考法过时)

```

双飞翼

```

面试题：什么是CSS reset？

```

reset.css       是一个css文件，用来重置css样式的。

normalize.css   为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。

```

面试题：css sprite是什么,有什么优缺点（精灵图）

```

1. 是什么

  把多个小图标合并成一张大图片。

2. 优缺点

  优点：减少了http请求的次数，提升了性能。

  缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

```

面试题：display: none;与visibility: hidden;的区别

```

1. 占用位置的区别

display: none;        是不占用位置的

visibility: hidden;   虽然隐藏了，但是占用位置



2. 重绘和回流（重排）的问题



visibility: hidden; 、 display: none;  产生重绘

display: none;     还会产生一次回流



产生回流（重排）一定会造成重绘，但是重绘不一定会造成回流。



产生回流（重排）的情况：改变元素的位置(left、top...)、显示隐藏元素....

产生重绘的情况：样式改变、换皮肤

```

面试题：opacity 和 rgba区别

```

共同性：实现透明效果



1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明

2. rgba   R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间



区别：继承的区别

opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

```

1.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

```

延迟加载：async、defer

    例如：<script defer type="text/javascript" src='script.js'></script>

   

defer : 等html全部解析完成，才会执行js代码，顺次执行js脚本。

async : async是和html解析同步的（一起的），不是顺次执行js脚本（谁先加载完谁先执行）。

```

面试题：JS数据类型有哪些？（常考）

```

基本类型：string、number、boolean、undefined、null、symbol、bigint

引用类型：object date array function



NaN是一个数值类型，但是不是一个具体的数字。

```

```
扩展 浅拷贝 深拷贝 (被问过)


深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝拷贝地址，深拷贝拷贝数据本身


浅拷贝方式：

Object.assign()  注意：当object只有一层的时候，是深拷贝

Array.prototype.concat()

Array.prototype.slice()



深拷贝方式：

JSON.parse(JSON.stringify())
```

 面试题：JS数据类型考题  

##### 考题一：

```

console.log( true + 1 );          //2

console.log( 'name'+true );       //nametrue

console.log( undefined + 1 );     //NaN

console.log( typeof undefined ); //undefined

```

##### 考题二：

```  

console.log( typeof(NaN) );       //number

console.log( typeof(null) );      //object

```

 面试题：null和undefined的区别

```

1. 作者在设计js的都是先设计的null（为什么设计了null：最初设计js的时候借鉴了java的语言）

2. null会被隐式转换成0，很不容易发现错误。

3. 先有null后有undefined，出来undefined是为了填补之前的坑。



具体区别：JavaScript的最初版本是这样区分的：null是一个表示"无"的对象（空对象指针），转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

```

面试题：==和===有什么不同？

```

==  :  比较的是值

   

    string == number || boolean || number ....都会隐式转换

    通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）



=== ： 除了比较值，还比较类型

```

面试题：JS微任务和宏任务

```

1. js是单线程的语言。

2. js代码执行流程：同步执行完==》事件循环

  同步的任务都执行完了，才会执行事件循环的内容

  进入事件循环：请求、定时器、事件....

3. 事件循环中包含：【微任务、宏任务】

微任务：promise.then

宏任务：setTimeout..

要执行宏任务的前提是清空了所有的微任务

流程：同步==》事件循环【微任务和宏任务】==》微任务==》宏任务=》微任务...

```

面试题：JS作用域考题

```

1. 除了函数外，js是没有块级作用域。

2. 作用域链：内部可以访问外部的变量，但是外部不能访问内部的变量。

   注意：如果内部有，优先查找到内部，如果内部没有就查找外部的。

3. 注意声明变量是用var还是没有写（window.）

4. 注意：js有变量提升的机制【变量悬挂声明】

5. 优先级：声明变量 > 声明普通函数 > 参数 > 变量提升

```

##### 考题一：

```

function c(){

  var b = 1;

  function a(){

    console.log( b );

    var b = 2;

    console.log( b );

  }

  a();

  console.log( b );

}

c();

```

##### 考题二：

```

var name = 'a';

(function(){

  if( typeof name == 'undefined' ){

    var name = 'b';

    console.log('111'+name);

  }else{

    console.log('222'+name);

  }

})()

```

##### 考题三：

```

function fun( a ){

  var a = 10;

  function a(){}

  console.log( a );

}

fun( 100 );

```

面试题：JS对象考题

JS对象注意点：

```

1. 对象是通过new操作符构建出来的，所以对象之间不想等(除了引用外)；

2. 对象注意：引用类型(共同一个地址)；

3. 对象的key都是字符串类型；

4. 对象如何找属性|方法；

  查找规则：先在对象本身找 ===> 构造函数中找 ===> 对象原型中找 ===> 构造函数原型中找 ===> 对象上一层原型查找

```

##### 考题一：

```

 [1,2,3] === [1,2,3]   //false

```

##### 考题二：

```

var obj1 = {

  a:'hellow'

}

var obj2 = obj1;

obj2.a = 'world';

console.log(obj1);  //{a:world}

(function(){

  console.log(a);   //undefined

  var a = 1;

})();

```

##### 考题三：

```

var a = {}

var b = {

  key:'a'

}

var c = {

  key:'c'

}

a[b] = '123';

a[c] = '456';

console.log( a[b] ); // 456

```

面试题：JS作用域+this指向+原型的考题

##### 考题一：

```

function Foo(){

  getName = function(){console.log(1)} //注意是全局的window.

  return this;

}

Foo.getName = function(){console.log(2)}

Foo.prototype.getName = function(){console.log(3)}

var getName = function(){console.log(4)}

function getName(){

  console.log(5)

}

Foo.getName();    //2

getName();      //4

Foo().getName();  //1

getName();      //1

new Foo().getName();//3

```

##### 考题二：

```

var o = {

  a:10,

  b:{

    a:2,

    fn:function(){

      console.log( this.a ); // 2

      console.log( this );   //代表b对象

    }

  }

}

o.b.fn();

```

##### 考题三：

```

window.name = 'ByteDance';

function A(){

  this.name = 123;

}

A.prototype.getA = function(){

  console.log( this );

  return this.name + 1;

}

let a = new A();

let funcA = a.getA;

funcA();  //this代表window

```

##### 考题四：

```

var length = 10;

function fn(){

  return this.length + 1;

}

var obj = {

  length:5,

  test1:function(){

    return fn();

  }

}

obj.test2 = fn;

console.log( obj.test1() );               //1

console.log( fn()===obj.test2() );        //false

console.log( obj.test1() == obj.test2() ); //false

```

面试题：JS判断变量是不是数组，你能写出哪些方法？

##### 方式一：isArray



```

var arr = [1,2,3];

console.log( Array.isArray( arr ) );

```



##### 方式二：instanceof  【可写,可不写】



```

var arr = [1,2,3];

console.log( arr instanceof Array );

```



##### 方式三：原型prototype



```

var arr = [1,2,3];

console.log( Object.prototype.toString.call(arr).indexOf('Array') > -1 );

```



#### 方式四：isPrototypeOf()



```

var arr = [1,2,3];

console.log(  Array.prototype.isPrototypeOf(arr) )

```



#### 方式五：constructor



```

var arr = [1,2,3];

console.log(  arr.constructor.toString().indexOf('Array') > -1 )

```

面试题：slice是干嘛的、splice是否会改变原数组(易混淆)

```

1. slice是来截取的

  参数可以写slice(3)、slice(1,3)、slice(-3)

  返回的是一个新的数组

2. splice 功能有：插入、删除、替换

  返回：删除的元素

  该方法会改变原数组

```

面试题：JS数组去重

##### 方式一：new set



```

var arr1 = [1,2,3,2,4,1];

function unique(arr){

  return [...new Set(arr)]

}

console.log(  unique(arr1) );

```



##### 方式二：indexOf



```

var arr2 = [1,2,3,2,4,1];

function unique( arr ){

  var brr = [];

  for( var i=0;i<arr.length;i++){

    if(  brr.indexOf(arr[i]) == -1 ){

      brr.push( arr[i] );

    }

  }

  return brr;

}

console.log( unique(arr2) );

```



##### 方式三：sort



```

var arr3 = [1,2,3,2,4,1];

function unique( arr ){

  arr = arr.sort();

  var brr = [];

  for(var i=0;i<arr.length;i++){

    if( arr[i] !== arr[i-1]){

      brr.push( arr[i] );

    }

  }

  return brr;

}

console.log( unique(arr3) );

```

面试题：new操作符具体做了什么

```

1. 创建了一个空的对象

2. 将空对象的原型，指向于构造函数的原型

3. 将空对象作为构造函数的上下文（改变this指向）

4. 对构造函数有返回值的处理判断

```

```

function Fun( age,name ){

  this.age = age;

  this.name = name;

}

function create( fn , ...args ){

  //1. 创建了一个空的对象

  var obj = {}; //var obj = Object.create({})

  //2. 将空对象的原型，指向于构造函数的原型

  Object.setPrototypeOf(obj,fn.prototype);

  //3. 将空对象作为构造函数的上下文（改变this指向）

  var result = fn.apply(obj,args);

  //4. 对构造函数有返回值的处理判断

  return result instanceof Object ? result : obj;

}

console.log( create(Fun,18,'张三')   )

```

面试题：闭包

```

1. 闭包是什么

  闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。

2. 闭包可以解决什么问题【闭包的优点】

  2.1 内部函数可以访问到外部函数的局部变量

  2.2 闭包可以解决的问题

      var lis = document.getElementsByTagName('li');

      for(var i=0;i<lis.length;i++){

        (function(i){

          lis[i].onclick = function(){

            alert(i);

          }

        })(i)

      }

3. 闭包的缺点

  3.1 变量会驻留在内存中，造成内存损耗问题。

        解决：把闭包的函数设置为null

  3.2 内存泄漏【ie】 ==> 可说可不说，如果说一定要提到ie

```

面试题：原型链

```

1. 原型可以解决什么问题

  对象共享属性和共享方法

2. 谁有原型

函数拥有：prototype

对象拥有：__proto__

3. 对象查找属性或者方法的顺序

  先在对象本身查找 --> 构造函数中查找 --> 对象的原型 --> 构造函数的原型中 --> 当前原型的原型中查找

4. 原型链

  4.1 是什么？：就是把原型串联起来

  4.2 原型链的最顶端是null

```

面试题： JS继承有哪些方式

##### 方式一：ES6

```

class Parent{

  constructor(){

    this.age = 18;

  }

}

class Child extends Parent{

  constructor(){

    super();

    this.name = '张三';

  }

}

let o1 = new Child();

console.log( o1,o1.name,o1.age );

```

##### 方式二：原型链继承

```

function Parent(){

  this.age = 20;

}

function Child(){

  this.name = '张三'

}

Child.prototype = new Parent();

let o2 = new Child();

console.log( o2,o2.name,o2.age );

```

##### 方式三：借用构造函数继承

```

function Parent(){

  this.age = 22;

}

function Child(){

  this.name = '张三'

  Parent.call(this);

}

let o3 = new Child();

console.log( o3,o3.name,o3.age );

```

##### 方式四：组合式继承

```

function Parent(){

  this.age = 100;

}

function Child(){

  Parent.call(this);

  this.name = '张三'

}

Child.prototype = new Parent();

let o4 = new Child();

console.log( o4,o4.name,o4.age );

```

面试题：说一下call、apply、bind区别

##### 共同点：功能一致



```

可以改变this指向



语法： 函数.call()、函数.apply()、函数.bind()

```



##### 区别：



```

1. call、apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。

2. 参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写。

```



##### 场景：



```

1. 用apply的情况

var arr1 = [1,2,4,5,7,3,321];

console.log( Math.max.apply(null,arr1) )



2. 用bind的情况

var btn = document.getElementById('btn');

var h1s = document.getElementById('h1s');

btn.onclick = function(){

  console.log( this.id );

}.bind(h1s)

```

面试题：sort背后原理是什么？

```

V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort，数量小于10的数组使用 InsertionSort，比10大的数组则使用 QuickSort。

之前的版本是：插入排序和快排，现在是冒泡

原理实现链接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js

***710行代码开始***

```

面试题：localStorage、sessionStorage、cookie的区别

```

公共点：在客户端存放数据

区别：

1. 数据存放有效期

    sessionStorage : 仅在当前浏览器窗口关闭之前有效。【关闭浏览器就没了】

    localStorage   : 始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储。

    cookie         : 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。

2. localStorage、sessionStorage不可以设置过期时间

   cookie 有过期时间，可以设置过期（把时间调整到之前的时间，就过期了）

3. 存储大小的限制

  cookie存储量不能超过4k

  localStorage、sessionStorage不能超过5M



  ****根据不同的浏览器存储的大小是不同的。

```

1.4 H5/C3面试题  

面试题：什么是语义化标签

```

1. 易读性和维护性更好。

2. seo成分会更好，蜘蛛抓取更好。

3. IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理。

```

面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

```

1. 区别

  :是伪类、::伪元素  ===》是为了做区分



2.是什么？作用

  元素before之前 、 元素after之后

  作用：清除浮动、样式布局上也有作用

```

面试题：rem和em区别

```

相对于font-size



em针对于父元素的font-size

rem针对于根(html)元素的font-size

```

面试题：自适应

随着屏幕尺寸的变化，内容大小等比例缩放，布局不改变

单位可使用vh rem em 百分百等

面试题：响应式

```

1. 是什么？

  响应多端 如电脑 平板 手机

2. 语法结构

  @media only screen and (max-width: 1000px){

    ul li:last-child{

      display: none;

    }

  }



  only : 可以排除不支持媒体查询的浏览器

  screen ： 设备类型

  max-width | max-height

  min-width | min-height

3. 响应式图片【性能优化】

  <picture>

    <source srcset="1.jpg" media='(min-width:1000px)'>

    <source srcset="2.jpg" media='(min-width:700px)'>

    <img srcset="3.jpg">

  </picture>

```



布局方案



```

一、什么情况下采用响应式布局



  数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局



  例如：公司的官网、专题页面



  特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。



二、pc + 移动端应该做什么样的布局方案

  注意：访问量还可以或者比较大，类似于淘宝网。



  pc是一套，会加入一点点响应式。

  移动端是一套，会使用自适应的布局方式。



三、pc的设计图



  ui：1980

  笔记本电脑：1280

  ui图的宽度和电脑的宽度不对应该怎么办？

    1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸

    2. 换1980的电脑

   

四、移动端的设计图



  宽度：750

  因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。

```

第二章 面试题进阶篇

2.1 ES6面试题

面试题：var、let、const区别

```

var、let、const 共同点都是可以声明变量的


注意：var因其变量提升，在编写代码中会存在一些不易察觉的问题。。。 实际项目中应避免使用


区别一：

  var 具有变量提升的机制

  let和const没有变量提升的机制

区别二：

  var 可以多次声明同一个变量

  let和const不可以多次声明同一个变量

区别三：

  var、let声明变量的

  const声明常量



  var和let声明的变量可以再次赋值，但是const不可以再次赋值了。

区别四：

  var声明的变量没有自身作用域

  let和const声明的变量有自身的作用域

```

面试题：合并对象
 

方式一：Object.assign



方式二：...扩展运算符

面试题：箭头函数和普通函数有什么区别？

```

1. this指向的问题

  箭头函数中的this只在箭头函数定义时就决定的，而且不可修改的（call、apply、bind）

  ****箭头函数的this指向定义时候、外层第一个普通函数的this

2. 箭头函数不能new（不能当作构造函数）

3. 箭头函数prototype

4. 箭头函数arguments

```

面试题：Promise有几种状态

```

有三种状态：

pending（进行中）

fulfilled（已成功）

rejected（已失败）


promise.then(onFulfilled).catch(onRejected)

```

2.2 webpack面试题

​       面试题：webpack插件

2.3 Git面试题

​       面试题：git常用命令

       虽然现在用的都是管理工具。。不过常用的那几个命令有的时候面试还是会问

git clone、git push、git add 、git commit、git checkout、git pull

```
1.提交代码之前，先确保本地仓库的代码是最新的  采用git push 拉取

2.存在冲突时，询问写那部分代码的人，他那部分代码是否要保留 
       一般解决冲突 可以保留自己的代码 或者对方的 或者合并代码

3.无冲突代码之后，先放入暂存区 即 git add

4.然后提交本地库至远程仓库 git pull

```

​       面试题：解决冲突

        同上

​       面试题：GitFlow

第三章 面试题框架篇

3.1 Vue面试题

vue2 现在停止维护。。。新项目基本都是vue3的 有的公司已经不做vue2项目了 所以需要重点掌握vue3

面试题：Vue2.x 生命周期

```

1. 有哪些生命周期

系统自带：

  beforeCreate

  created

  beforeMount

  mounted

  beforeUpdate

  updated

  beforeDestroy

  destroyed

2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。

 beforeCreate

 created

 beforeMount

 mounted

3. 在哪个阶段有$el，在哪个阶段有$data

  beforeCreate 啥也没有

  created  有data没有el

  beforeMount 有data没有el

  mounted 都有

4. 如果加入了keep-alive会多俩个生命周期

  activated、deactivated

5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？

 beforeCreate

 created

 beforeMount

 mounted

 activated

6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？

只执行一个生命周期：activated

```

面试题：谈谈你对keep-alive的了解

通常还会问到如何使用组件缓存

```

1. 是什么

vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能

2. 使用场景

就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

```

面试题：v-if和v-show区别

```

1. 展示形式不同

v-if是 创建一个dom节点

v-show 是display:none 、 block



2. 使用场景不同

初次加载v-if要比v-show好，页面不会做加载盒子

频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

```

面试题：v-if和v-for优先级，能否一起使用（面试被问到的问题）

```

v-for的优先级要比v-if高

***是在源码中体现的：function genElement



v-for v-if 不建议一起使用

因为v-for的优先级比v-if 的优先级高，所以每次渲染时都会先循环再进行条件判断，而又因为v-if 会根据渲染条件为true 或false来决定渲染与否的，所以如果将v-if 和v-for用在一起会特别消耗性能

```

面试题：ref是什么？

```

来获取dom的,子组件上绑定ref后，父组件可直接获取到子组件上的方法

```

面试题：nextTick是什么?

```

在修改数据之后立即使用这个方法，及时获取更新后的 DOM。

```

面试题：scoped原理

```

1. 作用：让样式在本组件中生效，不影响其他组件。

2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

```

面试题：Vue中如何做样式穿透

```

stylus样式穿透使用：>>>

sass和less使用：/deep/

通用使用：  :v-deep

```

面试题：Vue组件传值

```

父组件-->子组件：



  1. 父组件：

    <user-detail :myName="name" />

   

    export default {

        components: {

            UserDetail

        }

        ......

    }

  2. 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。

    export default {

      props: ['myName']

    }



子组件-->父组件：



    1. 子组件

      <button @click="changeParentName">改变父组件的name</button>

      export default {

          methods: {

              //子组件的事件

              changeParentName: function() {

                  this.$emit('handleChange', 'Jack')

              }

          }

      }

    2. 父组件

      <child @handleChange="changeName"></child>



      methods: {

          changeName(name) {  

              this.name = name

          }

      }



兄弟组件之间：bus.js

```

面试题：computed、methods、watch有什么区别？

```

1. computed vs methods区别

  computed是有缓存的

  methods没有缓存

2. computed vs watch区别

  watch是监听，数据或者路由发生了改变才可以响应（执行）

  computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回

  watch是当前监听到数据改变了，才会执行内部代码

```

面试题：props和data优先级谁高？

```

props ===>  methods ===> data ===> computed ===>watch

```

面试题：Vuex有哪些属性？

```

state、getters、mutations、actions、modules



state 类似于组件中data，存放数据

getters 类型于组件中computed

mutations 类似于组件中methods

actions 提交mutations的

modules 把以上4个属性再细分，让仓库更好管理

```

面试题：Vuex是单向数据流还是双向数据流？

```

Vuex是单向数据流

```

面试题：Vuex中的mutaitons和actions区别

```

mutaitons   :  都是同步事物

actions     :  可以包含任意异步操作



***在调试中就看出来

```

面试题：Vuex如何做持久化存储

```

Vuex本身不是持久化存储



1. 使用localStorage自己写

2. 使用vuex-persist插件

```

面试题：Vue设置代理

###### vue.config.js



```

module.exports = {

  publicPath:'./',

  devServer: {

    proxy: 'http://localhost:3000'

  }

}

```

面试题：Vue项目打包上线

```

1. 自测==>修改路由模式

2. 代理不生效，使用ENV

3. 修改路径

```

面试题：Vue路由模式

```

路由模式有俩种：history、hash

区别：

  1. 表现形态不同

      history:http://localhost:8080/about

      hash:http://localhost:8080/#/about

  2. 跳转请求

      history : http://localhost:8080/id   ===>发送请求

      hash    : 不会发送请求

  3. 打包后前端自测要使用hash，如果使用history会出现空白页

```

面试题：介绍一下SPA以及SPA有什么缺点

```

SPA是什么？单页面应用

缺点：

  1. SEO优化不好

  2. 性能不是特别好

```

面试题：Vue路径传值

```

1. 显式

  http://localhost:8080/about?a=1

  1.1 传：this.$router.push({

        path:'/about',

        query:{

          a:1

        }

      })

  1.2 接：this.$route.query.a



2. 隐式

  http://localhost:8080/about

  2.1 传：this.$router.push({

        name:'About',

        params:{

          a:1

        }

      })

  2.2 接：this.$route.params.a

```

面试题：路由导航守卫有哪些

```

全局、路由独享、组件内

1. 全局

  beforeEach、beforeResolve、afterEach

2. 路由独享

  beforeEnter

3. 组件内

  beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

使用场景：判断是否登录，如果登录就next否则就跳转到登录页面

```

面试题：Vue动态路由

```

场景：详情页(文章、商品)

router.js配置：

  {

    path: "/list",

    name: "List",

    children:[

      {

        path:"/list/:id",

        name:'Details',

        component: () =>

          import("../views/Details.vue"),

      }

    ],

    component: () =>

      import("../views/List.vue"),

  },

```

面试题：双向绑定原理（重点）

```

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

通过Object.defineProperty()来实现数据劫持的。



1.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。



2.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。



3.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

```

面试题：什么是虚拟DOM

```

其实就是数据，把dom变成数据结构。

```

面试题：diff算法

```

利用diff算法可以更多提升dom之间对比的性能（采用虚拟dom数据进行对比）。

```

面试题：讲一下MVVM

```

M就是data的model层

V就是view视图层

VM就是理解为v-model原理实现，通过view更新model

```

3.2 微信小程序面试题

面试题：如何自定义头部？

```

app.json进行配置

"window":{

    "navigationStyle":"custom",

}

```

面试题：不校验URL

```

工具==》详情==》本地设置==》不校验合法域名  ： 项目上线前URL一定要请求到（不勾选也可以请求到数据）

```

3.3 uni-app面试题

面试题：生命周期

```

应用生命周期、页面生命周期、组件生命周期

```

面试题：条件编译

```

在工具中，打if出现的条件编译

例如：

<!-- #ifdef H5 -->

    <h1>这是h5端</h1>

<!-- #endif -->

```

第四章 面试题性能优化篇

4.1 加载优化

```

1. http请求

   能不能减少（能不能合并）

2. 图片的雪碧图

3. script标签位置

4. link标签（css引入）

```

4.2 图片优化

```

1. 图片懒加载

2. 响应式图片

3. webp代替其他格式

4. 小图标可以改用字体图标

```

4.3 渲染优化

```

1. 减少重绘和回流

2. 改变位置使用transform

3. 动画尽量用requestAnimationFrame，不要用定时器

```

4.4 首屏优化

```

1. 长列表

2. 项目的html文件、css文件、图片、js文件压缩打包

```

4.5 vue优化

```

1. keep-alive 缓存组件

2. 路由懒加载

3. 内容使用

  v-if和v-show

  computed、watch、methods

4. Object.freeze ：冻结对象

  纯展示类的接口数据，冻结就可以了

5. 使用ui组件按需引入

```

第五章 面试题兼容篇

5.1 页面样式兼容

第六章 面试题网络请求篇

6.1 跨域面试题

```

前端：jsonp、vue的项目可以设置代理（打包后无效。解决：.ENV文件）

后端：CORS

```

6.2 http和https的区别？

```

1. 端口不同

  http ：80端口

  https ：443端口

2. https比http更加安全

  ***https就是证书

```

第七章 WEB安全篇

7.1 XSS攻击

```

用户输入的文本框，需要替换某些特殊字符（ <> ... ）

```

7.2 SQL注入

```

用户输入的文本框中不可以有特殊符号（ 引号、空格 ）

```

7.3 接口安全

第八章 其他类面试题

​   8.1 token

​   8.2 SEO

   8.3 防抖节流

防抖（Debouncing）

防抖是一种在事件被触发后等待一段时间，如果在等待时间内没有再次触发该事件，则执行事件处理器。如果在等待时间内再次触发事件，则重新开始等待。常用于避免短时间内频繁触发的事件处理，例如窗口调整大小、搜索框输入等。

节流（Throttling）

节流是一种在一定时间间隔内只允许函数执行一次，无论该时间间隔内事件被触发了多少次。常用于控制高频率触发的事件处理，例如滚动、鼠标移动等。

新增面试题（重点）

vue2/vue3面试题

1. vue2双向绑定和vue3双向绑定区别

2. 说一说vue2和vue3区别

3. 在beforeMount中如何获取dom

4. nextTick原理

5. Vite使用过吗？说一说Vite与webpack区别

6. pinia使用过吗？说一说vuex与pinia区别

7. vue如何解决seo的问题

8. vue如何分包

9. Vue3自己封装过组件吗？如何设计一个modal组件

10. vue3提升性能有哪些点

11. Vue 3.0 性能提升主要是通过哪几方面体现的？

12. Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

13. Proxy 相对于 Object.defineProperty 有哪些优点？

14. Vue 3.0 在编译方面有哪些优化？

15.vue3 ref reative 的区别

Vue3: 如何在 ref() 与 reactive() 之间做正确选择？ - 掘金 (juejin.cn)

新增微信小程序面试题

1. 体积过大如何分包

2. 小程序js和javascript区别

 

新增TypeScript面试题

1. ts和js有什么不同？

2. 是否可以将多个.ts文件合并成一个.js文件？如果是，那么如何做？

3. 内部模块和外部模块有什么区别？

4. JavaScript不支持函数重载，但TypeScript是否支持函数重载？

5. TypeScript是否支持所有面向对象的原则？

6. 如何检查TypeScript中的null和undefined ？

7. TS的“接口”和“type”语句有什么区别？