前端面试常见问题小总结(更新中)_前端开发面试时项目中遇到的问题

1.什么是mvvm 、 mvc 模型？

  mvvm 简单理解的mvvm （模型-视图-控制器）m:可以理解成模块   v:可以理解成视图  vm: 可以理解成v-model ，它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

mvc 即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

2，v-if 和 v-show有什么区别？

     共同点:是能够控制页面元素的显示与隐藏, 他们有很大不同 ,

    第一:原理不一样, 第二:效率不一样 , 第三: 应用场景也不一样. (条理清晰)

    v-if 是“真正”的条件渲染，因为会确保在切换过程中条件的事件监听器和子组件适当地被销毁和      重建，操作的实际上是dom元素的创建或销毁

   v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS         进行切换 它操作的是display:none/block属性。

   总结：

          一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需                        要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if 较好

3.vue.nextTick() 方法

            定义：在下次DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这                                        个方法，获取更新后的DOM。

           使用位置： 需要在视图更新之后，基于新的视图进行操作

4.async awai是什么？它有那些作用？

          是什么： async awai是es7里面的新语法，他的作用就是async用于申明一个function是异                               步的，而await用于等待一个异步方法执行完成，它可以很好的替代promise中                                 的.then

          作用：     函数返回一个promise对象 ， 可以使用then方法添加回调函数，当函数执行的                                时候， 一旦遇到await就先返回，等到异步操作完成，在接着执行函数体内后面的                            语句。

5.什么是原型链?

    简单理解 :每一个实例对象上有一个 _proto_  属性,指向的构造函数的原型对象,构造函数的原型        对象也是一个对象, 也有 _proto_ 属性, 这样一层一层往上找的过层就会形成一个链式结构，我        们称为原型链

6.常用的数组方法有哪些？

   -concat() 方法用于合并两个或多个数组，此方法不会更改先有数组，而是返回一个新数组

   -find    ()  方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined 

  -findIndex( ) 方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回 -1.

  -includes( ) 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true,否则                       返回false

  -indexof( ) 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在则返回-1，（通常它判断数组中有没有这个元素）

  -join()  方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，如果数组只有一个项目，那么将返回该项目而不使用分隔符。

  -pop() 方法从数组中删除最后一个元素，并返回该元素的值，此方法更改数组的长度

  -push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的长度

  -shift() 方法从数组中删除第一个元素，并返回该元素的值，此方法更改数组的长度

  -unshift() 方法将一个或者多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有                   数组）

  -splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组的形式返回                 被修改的内容（参数一：数组索引，参数二：删除的个数，后面参数：添加）此方法会                   改变原数组

  -reverse() 方法将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组

  -sort ()     方法用原地算法对数组的元素进行重新排序，改变原有数组,并返回一个新的数组，默                      认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

                  举个例子：

                  // sort 对数组元素进行排序 从小到大   和  从大到小排序

                  let Arr = [2,32,55,3,56,21]

                  let newArr = Arr.sort((a,b)=>{

                    return a-b                                      //从小到大的数组排序  a-b

                  })

                  console.log(newArr)                       //打印结果   [2, 3, 21, 32, 55, 56]

                  let Arr1 = Arr.sort((a,b)=>{

                    return b-a                                      //从大到小的数组排序  b-a

                  })

                  console.log(Arr1)                            //打印结果  [56, 55, 32, 21, 3, 2]

7.数组有哪几种循环方式？分别有什么作用？

   -every()  方法测试一个数组内的所有元素是否都能通过某个指定函数的测试,它返回一个布尔值

   -filter()   方法创建一个新数组,新数组包含了所提供函数实现的测试后的所有元素

   -forEach()  方法对数组的每个元素执行一次提供的函数

   -some ()   方法测试是否至少有一个元素可以通过被提供的函数方法,该方法返回一个Boolean类                     型的值

8.v-for 循环为什么一定要绑定key ?

   页面上的标签都对应具体的虚拟dom对象(虚拟dom就是js对象), 循环中 ,如果没有唯一key , 页面     上删除一条标签, 由于并不知道删除的是那一条! 所以要把全部虚拟dom重新渲染, 如果知道key       为x标签被删除掉, 只需要把渲染的dom为x的标签去掉即可!

 9.this 的指向有哪些？

1、普通函数中的this指向window

2、定时器中的this指向window

3、箭头函数没有this,它的this指向取决于外部环境、

4、事件中的this指向事件的调用者

5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象

6、类 class中的this 指向 由constructor构造器new出来的实例对象

7、自调用函数中的this 指向window

10.什么是图片懒加载

 懒加载,即延迟加载(lazyload),简单来说就是一个长页面中需要展示很多图像的时候,如果在进入页面的时候一次性把所有图片加载完,需要很长时间,为了提升用户体验,我们使用懒加载,当图片出现在浏览器可视区域时,才加载图片

作用:    加快页面打开速度,提升用户体验

            减少服务器压力和浏览器的负担

11.什么是回流 什么是重绘 ,他们有什么区别?

   回流: 

      在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标          签,包括display : none 隐藏, 还有用JS动态添加的元素等.

      每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要       构建render tree,在回流的时候,浏览器会使渲染树种受到影响的部分失效,并重新构造这部分渲         染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程就是回流.

   重绘:

    当render tree 中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不影响布局        的,比如background-color,则就成为重绘

                  区别:

  他们的区别很大:

     回流必将引起重绘,而重绘不一定会引起回流,比如:只有颜色改变的时候就会发生重绘而不               会引起回流 当页面布局和几何属性改变时就需要回流

12.Promise概念

概念:Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。

Pending 正在做。。。

Resolved 完成这个承诺

Rejected 这个承诺没有完成，失败了

Promise 用来预定一个不一定能完成的任务，要么成功，要么失败

在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果

Promise 是异步编程的一种解决方案，主要用来解决回调地狱的问题，可以有效的减少回调嵌套。

13.什么是深拷贝 ,什么是浅拷贝?

    浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类        型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一      个对象改变了这个地址，就会影响到另一个对象。

    深拷贝:  会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一        起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不        影响。

14.JS执行机制是怎么样的?

   js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制

   所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务            （asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，   才能执行后一个任务。异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任      务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

15.es6有哪些新特性?

 Es6是2015年推出的一个新的版本,这个版本相对于Es5的语法做了很多优化,例如:新增了let,const

let和const具有块级作用域,不存在变量提升的问题,简化了定义函数的写法,同时可以巧用箭头函数的this (注意箭头函数本身没有this取决于外部的环境 ) ; 新增了promise解决了回调地狱的问题, 新增了模块化,利用import,export  来实现导入, 导出,新增了结构赋值,Es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).新增了class类的概念,它类似于对象