前端面试题2020.6.16（更新中）

就这…
来喽~~~~
1、已知数列（斐波拉契数列）：1，1，2，3，5，8… ，请写一个相关函数，获取数列的第n项值
function getNumber(_n)
{
var first=second=1,thrid;
if(n>2)
{
for(var i=0;i {
thrid = first+second
first = second
second = thrid
}
return thrid
}
else
{
return 1;
}
}
2、什么是面向对象。谈谈你面向对象的理解。什么时候适合用面向对象，什么时候不适合用面向对象
3、数组去重（不改变数组中原有的顺序）的方法
var arr = [1,1,2,3,5,5,6];
方法一：使用ES6提供的set()方法
var newArr = new Set(arr)
方法二：使用for循环套for循环，然后splice去重
function unique(_arr)
{
for(var i=0; i<_arr.length; i++)
{
for(var j=i+1; j<_arr.length; j++)
{
if(_arr[i]==_arr[j]) //第一个等同于第二个，splice方法删除第二个
{
_arr.splice(j,1)；
j–;
}
}
}
return arr;
}
方法三：使用indexOf()
function unique(_arr)
{
var newArr=[];
for(var i=0; i<_arr.length; i++)
{
if(array.indexOf(_arr[i]) <0)//等于-1
{
array.push(_arr[i]))
}
}
return arr;
}
4、array 和 set 的异同。什么时候用set，什么时候用array。
set是ES6提供的一个新的数据结构，用来存储任意对象的值。类似与数组。
set和array可以相互转化。
(1) array转set : set = new Set(array)
(2) set转array：array = […set]
唯一性。array中可以包含重复值。set中的值总是唯一的
获取长度的方法。array.length set.size
获取元素的方法。array[0] set需要遍历才行
添加元素的方法。 array.push()/unshift()/splice() set.add()
删除元素的方法。array.splice()/remove() set.detele()
清空数组的方式。 array.length=0/array.splice(0,array.length) set.clear()
是否存在某个值。 array.indexOf()>-1 set.has()
什么时候用set，什么时候用array：首先，Set与Array是不同的两种数据结构，它并不是要完全替换Array，而是提供额外的数据类型来完成Array缺少的一些功能。由于Set只包含不同的元素，如果我们只希望存储不同的元素，使用Set会更好。可以利用Set的一些原生方法轻松的完成数组去重，查找数组公共元素及不同元素等操作。Set的delete()方法，使求两个Set的交/并集的操作比求两个数组的交/并集的操作更简单。数组适用于希望保留重复元素，可能进行大量修改（增、删操作），或是希望通过索引对元素进行快速访问的场景
5、简述VUE组件间的参数传值
父组件与子组件之间的参数传值
父组件传给子组件：子组件通过props方法接受数据
子组件传给父组件：$emit方法传递参数
兄弟组件之间的参数传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。
6、谈谈对VUE的MVVM的理解
MVVM分为三个部分：
M（Model，模型层 ）主要负责业务数据相关；
V（View，视图层）负责视图相关，细分下来就是html+css层；
VM（ModelView ）V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
7、谈谈对vue生命周期函数的理解
beforeCreate（创建前） 在数据观测和初始化事件还未开始。
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来。
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2.vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3.vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
4.第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
8、Vue.js和React 以及 angularJs 的异同
1.与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
2.与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
9、浏览器的存储方式有哪些
cookie、localStorage、sessionStorage。
cookie属于文档对象模型DOM树根节点document。
sessionStorage 和 localStorage 属于浏览器对象模型BOM的对象window。sessionStorage：为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。localStorage：同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2、存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4、作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5、Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6、Web Storage 的 api 接口使用更方便，cookie的原生接口不友好，需要自己封装。
10、什么是面向过程、什么是面向对象
面向过程：自顶向下、逐步求精、模块化封装函数主张按功能把软件系统逐步细分，对每个涉及到的功能都进行一次数据处理然后输出。由主函数负责把函数中的所有接口串接起来，程序的实现非常强调达到某功能的算法。每个函数都有唯一的入口和出口。
面向对象：面向对象的方法也是利用面向过程的结构化程序流来设计的，
面向对象是一种更优秀的程序设计方法，它的基本思想是使用类、对象、继承、封装、消息等基本概念来进行程序设计的。它强调直接以现实世界中的事物(即对象)来思考、认识问题，并根据对象的本质特点把它们抽象为系统中的，使之成为构成系统的基本单元，于是就使得软件系统组件有了直接映像到客观世界的可能，并可以保持客观世界中事物及其相互关系的本来面貌。