前端面试问题总结-第二篇

综述：对常见问题进行总结，帮助自己提高，找到自己基础问题的不足之处，这些问题属于基础，工作中的实践才是最重要的

1.es6中的箭头函数？其中的this指向谁？

由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值

var obj = {
  i: 10,
  b: () => console.log(this.i, this), //捕获上下文的this，作为自己的this值
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

 可以看到，作为方法的箭头函数this指向全局window对象，而普通函数则指向调用它的对象，es6中的箭头函数没有this,他继承外部的函数的this值，以上为个人学习整理内容， 文中例子参考MDN， 欢迎交流学习

2.如何实现一个数组的去重？使用es6中的set数据结构即可？不能存储重复的数据结构？Map数据结构有什么好处？

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));  //将从事数组中获取的值添加到set数据结构中
for(let i of s ) {  //遍历set的方法
    console.log(i); //2 3 5 4
}

Map是以键值来存储数据的，传统的对象都是键值对的（字符串--值），但是键只能是字符串，Map中的键不仅仅是字符串，可以为任何值（值--值），扩展了，灵活性更大；

3.浏览器兼容性问题？简单的说几个？

• 使用meta标签来调节浏览器的渲染方式，可以强制要求360浏览器使用哪个内核来渲染页面，也可以强制要求浏览器其使用最新的内核来渲染浏览器

• 使用pie.htc让IE6/7/8支持部分css3属性，像css3的border-radius，box-shadow,Gradients,RGBA属性，

• css hack通过不同的css前缀，针对IE6/7/8写相对应的样式

• 识别html5中的标签，可以使用html5shiv框架

 4.Vue框架？

• 简述Vue的生命周期？

Vue对象在实例化之后，从建立到最终销毁有一个流程，在这个过程中，存在很多生命周期钩子函数，我们写的函数就是挂载在这些生命周期函数上的；

• 如何实现一个自定义组件？不同组件之间如何通信？

首先可以定义一个Vue组件，再将其import进入另一个Vue页面中，还统一通过Vue.extend()/Vue.component()的方式来定义组件；

• 父子组件如何通信？

使用$emit将消息发送出去；

• 前端路由，在项目中怎么实现路由嵌套？

在定义一个路由数组的时候，再定义它的子组件，实现路由的嵌套；

• nextTick和VueX有没有使用过？分别在什么情况下使用到？

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

vueX相当于是一个集中管理数据的仓库，当项目较大时，避免状态交互过于复杂；

• Vue的响应式式原理（数据双向绑定）是怎样实现的？你觉得订阅者-发布者和观察者模式有区别吗？有的话说一下区别？

view到data是通过绑定事件实现的；

data到view层是通过es5中的Object.defineProperty()中的set和get方法实现的；

Object.defineProperty("obj","obj.key",{
         set:function(){

         },
         get:function(){

         }
})

5.css部分

• 怎样实现左边和右边两列固定比例宽度，且在关闭左边的管理按钮部分后，右边自动占满全屏？比如民情中的后台管理系统？

• flex和grid布局有没有用过？简述？

• 怎样实现上下，左右居中，且在不知道高度和宽度的情况下？

 #test{
         position: fixed;
         left:50%;
         top:50%;
         transform: translate(-50%,-50%); 
         /*在分别向上和左边走自己的50%，这里是相对于自己的-50%，经典答案*/
         background-color: #2aabd2;
      }

2018-06-16      星期四

1、实现页面宽度等于网页宽度的设置？使用meta标签来搞定？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2、五种原始类型数据？和一种引用类型？还有es6中的symbol新增类型？

  五种原始类型： string/boolean/bumber/null/undefined            引用类型：object

3、onload和domcontentonload之间的区别是什么？

4、实现Function.prototype.bind()方法？实现对象深拷贝方法？实现trim方法？

5、查看函数执行结果的题目？

2018-08-06  星期一

1.浏览器缓存技术有哪些？卡牛公司也问过类似的问题：将那几个http请求头中的作用说清楚，怎样来控制这些请求标志为？

2.Vue中的methods和computed之间的区别是？（金蝶）

3.jquery中的实现深拷贝和浅拷贝的方法？什么是深浅拷贝？

浅拷贝仅仅只是对将一个对象的值复制到另一个对象中，两个对象的引用还是一样的，共享同一块内存，如果改变其中一个对象的值，另一个对象也会跟着改变。深拷则不仅仅是将值复制了一份，也会在内存中重新开辟一个单元来存储对象的引用，改变一个对象的值，另一个对象的值不会改变。

 方法如下：

// 浅层复制（只复制顶层的非 object 元素）
var newObject = jQuery.extend({}, oldObject);
// 深层复制（一层一层往下复制直到最底层）
var newObject = jQuery.extend(true, {}, oldObject);

2018-08-03

1.设计稿还原的步骤是？

• 将设计稿按照语义化的方式进行分块

• 将公共的样式抽取出来

• 确定响应式布局方案

• 根据设计图对页面进行布局

2.标准化的好处，了解前端开发中的哪些标准？（应该是指前端开发中一些常见的开发规范相关内容）

标准化避免开发的时候出现兼容性问题，提高开发效率，便于开发人员之间的沟通；

3.css中的reseting和normalizing的区别，你会怎样来选择？

reseting:直接重置所有的格式，没有任何的前提，无视任何 user agent 预置样式

normalizing:重置部分格式的；

所以建议在设置的时候使用normalizing进行设置，避免造成所有数据的丢失，resetting这个需要谨慎使用；

4.怎样使你的网页适合打印？这种需求在平时有哪些应用呢？

在页面上右键有打印按钮，还可以选中页面的其中的一部分进行打印；

5.有没有使用过预编译器（sass、less等），并且描述其利弊？

有使用过sass预处理器，他依赖于ruby（runtime），在开发前需要先安装开发环境，sass的主要特点有：

• sass分为sass和scss两个版本，scss版本是最新的，其中是由大括号的，更加靠近css的语法，sass则是上一个版本的语法

• 可以使用变量来定义宽度，高度等，做到统一管理的效果

• 可以使用嵌套css规则，避免针对一个元素中的子元素，要写好几遍的父元素的选择器

• 可以在scss文件中使用@import导入scss的文件，然后在发布的时候，自动将文件合并为一个css文件

• 静默注释，例如：/*注释内容*/，在代码中注释，方便开发人员理解，但是在最终上线的时候，会自动将这些注释清除掉。避免他人通过浏览器理解我们的代码

• 混合器@mixin

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

•  使用选择器继承来精简CSS，避免写多余的css样式

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

6.伪元素（：：before）一般在什么地方使用？给出伪元素(::before, ::after)的几种使用场景？

• 清除浮动时

• 利用attr()来实现某些动态功能时

• 与counter()结合实现序号问题，而不用使用列表元素

• 实现各种特效

7.inline和inline-block之间的区别是？display的值常见的有block/inline-block/inline/none/table-cell等？

block：元素就变成了一个块级元素，单独占一行，可以设置盒子模型相关属性；

inline:元素变为行元素，可以和别行元素处于同一行，但是不能设置高度和宽度，其宽度随元素额内容而变化，inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block:简单来说就是将对象呈现为inline对象，让block元素不再单独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体；

8.什么情况下使用translate来代替position，理由是什么？

当实现某些动画的时候,使用translate来代替position来实现某些动画，这样会默认使用GPU来渲染动画，使用硬件加速功能；

使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）

9.说一下你知道的js模块化规范，以及他们之间的区别?

AMD和CMD模块化规范，分别的实现方案有sea.js和require.js

10.描述一下jsonp的工作过程？

利用script标签中的src属性天然的可以获取外部的js代码，在其中去获取服务器的代码，服务器中的代码是一个在前端定义的函数，服务器端将通信数据以参数的形式发给前端，实现数据的通信，只能处理get方式的请求；不能处理post请求；

11.==和===之间的区别？

前者仅仅只比较两者的值是否相等，不比较类型，后者比较

12.描述一下你知道的polyfill?

 在js中有些方法，不同的浏览器支持情况是不同的，polyfill就是一个js修补器，他是一个库，提高相关js方法的兼容性；

13.实现下列函数？记得淘宝还是谁在校招中出现过类似的问题？

add(2,5);  //7
add(2)(5); //7

//传统的函数
function add(a,b){
    return a+b;
}

function add(a){
   var test=a;
   console.log(test+add(a));
   return  test+add(a);
}
add(2)(5);

14.foo.x是多少？仔细两者之间的区别是？

//思考两者之间的区别？
var  foo={n:1};
var  bar=foo;   //这里写一个bar的作用是什么？看不懂啥意思？
foo.x=foo={n:2};
console.log(foo.x);   //undefined

 var  foo={n:1};
 var  bar=foo;
      foo={n:2}
      foo.x={n:2};
console.log(foo.x);   //{n:2}

15.react和vue之间的区别？

•  vue是双向数据绑定，react是单向数据流

• Vue创造了.vue文件，html/css/js依然是相互分离开，react提倡all  in  js

• react 适合构建大型的应用，相对学习曲线更加陡峭，Vue则是构建小型应用的首选，开发速度快，易于掌握

16.Git使用过程中，如果你在开发这业务，突然另一个分支有一个bug要改，你怎么办？

17.autoprefixer的作用？autoprefixer是什么？autoprefixer(自动前缀，解决css在各个浏览器中不兼容的问题)

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixe添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 [1]  。

18.es6中增加了Map对象，如何让老浏览器也支持Map对象，说说你的思路？

map对象一些来的浏览器是不支持的，方法就是，可以判断浏览器的版本号，或者判断浏览器是否是支持map对象的，如果是不支持的，则直接用自己写的map兑现过来替换；按照这种思路，set对象也可以直接自定义了；

// 自定义Map对象
function Map() {
    this.keys = new Array();
    this.data = new Object();
    this.set = function(key, value) {
        if (this.data[key] == null) {
            if (this.keys.indexOf(key) == -1) {
                this.keys.push(key);
            }
        }
        this.data[key] = value;
    }
    this.get = function(key) {
        return this.data[key];
    }
}
// new Map()
var map = new Map();

19.http缓存有哪几种方案？下边的这几个概念十分重要；

cache-control

expires

Etag

last-modified

20.目前来看vue项目的实践经验是是十分重要的，这是一个非常重要的点；一定要加强学习和认识，找到工作后，要将react的东西也学起来，并在框架层面进行分析，知道每个框架的优劣，怎样做技术选型，要形成自己的全面的知识体系？

21.在js中给元素添加事件绑定的三个参数说明？非常的重要，如果这里返回data呢？

<button id="test">点击</button>

var test=document.getElementById("test");
button.addEventLisner("click",function(this){
    console.log(this);//这里的this指的是<button id="test">点击</button>元素
},false);  //false代表在事件冒泡阶段触发函数,true代表在事件捕获阶段触发函数

<button id="test">点击</button>

var test=document.getElementById("test");
button.addEventLisner("click",function(data){
    console.log(data);  //这里的data返回了非常多的信息，非常多
},false);  //false代表在事件冒泡阶段触发函数,true代表在事件捕获阶段触发函数

22.什么是原型？原型链？能用你自己的话将其讲清楚吗？

js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。

也就是说：当生产一个function对象的时候，就有一个原型prototype

通过这个属性可以给构造函数添加方法，通过构造函数示例化出来的对象，默认大家都有这个属性，在这个原型上添加方法可以实现大家的共享，当我们在调用的一个对象的方法时，会先从自己的范围能寻找，如果没有则通过原型去寻找，知道找到null，这样就形成了一个链条，叫原型链；

var Person=function(name,age){
     this.name=name;
     this.age=age;
}
Person.prototype.sayHello=function(){
    console.log("你哈");
    console.log(this.name+this.age);
}
var person=new Person("xiaoming",25);
person.sayHello();
console.log(person.__proto__);

2018-08-20   星期一

1.h5和css3的特性？

语义化标签，video，radio，canvas，input中增加很多type等；

增加了媒体查询，box-shadow，text-shadow，tansform等可以实现很多的动画

2.性能优化？

3.各种技术原理？要能将一些技术的核心原理讲解出来

4.项目和后端知识问的挺多？

怎样来使用SpringMVC架构来开发后端接口，怎样来实现数据的增删改查；

5.this的指向有哪些情况？

• 一般是谁调用this就指向谁(这句话在大部分情况下是正确的)，

• 在箭头函数中，因为箭头函数中是没有this的，他是调用上一级词法环境中的this；

• 情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

• 情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

• 情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

6.原生ajax的原理？过程讲解？ajax的操作必须要懂？最起码能简单的说几句他的核心内容是什么？

ajax是创建一个异步调用对象的方法，可以和服务器建立联系通信的方法：

function CreateXmlHttp() {
    //非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject){
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }
}
function Ustbwuyi() {
    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常！");
        return false;
    }
    xmlhttp.open("POST", url,false); //false代表异步，必须等到请求完成了才能执行后边的代码
    xmlhttp.send(); //发送请求的相关数据，只有post请求是需要的
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status==200){
                document.write(xmlhttp.responseText);
            }
        }
    }
}

7.自我介绍，要将重点技术能力展示出来？自己的核心竞争力在哪里？

8.es6问的还挺多的？

2018-08-20     星期一

1.数组去重的方法？说的方法不够全面？

2.HTML5和css3中的新加了哪些内容？

3.ajax的原理？将其中的原理说清楚？

4.http1.0/http1.1/http2.0之间的区别？2.0相对于前边的有哪些优势？

5.将多个块元素放到一行的方法？多说方法？

6.将一个元素上下左右居中的方法？

7.浏览器端缓存的方法？常见的那几个标志位的作用是什么？

8.es6中新加了哪些东西？能说出哪些内容？set和map数据结构的应用？

9.常见的性能优化的方法有哪些？越多越好？

10.node.js端的应用以及相关的信息?当初是怎样处理那个问题的？明天问问明华是怎样处理子文留下的问题的?

11.常见的http状态码有哪些呢？分别有啥作用呢？

100  200  301   304   404   500  505等；

2018-08-21     星期二 

1.熟悉模块化开发，熟练使用css预处理工具？

2.webpack工具的使用，熟悉node开发；

3.有js通用组件的抽象和编写能力；

1.具有小程序的开发经验

2.熟悉模块化开发

3.熟悉各个浏览器之间的常见的兼容性问题

4.一定的前端的架构能力，对前端框架有深刻的理解，某些东西即使自己并不了解，但是也要不能表现的过于慌乱，有一个问题回答不了，可以将其牵引到自己熟悉的领域，一定要表现的落落大方，不要太怯场，要有自行；

1.八种http的理解？

HTTP协议中共定义了八种方法或者叫“动作”来表明对Request-URI指定的资源的不同操作方式，具体介绍如下： 

• GET：向特定的资源发出请求。 

• POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。

• OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。 

• HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。  

• PUT：向指定资源位置上传其最新内容。 

• DELETE：请求服务器删除Request-URI所标识的资源。 

• TRACE：回显服务器收到的请求，主要用于测试或诊断。 

• CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

   虽然HTTP的请求方式有8种，但是我们在实际应用中常用的也就是get和post，其他请求方式也都可以通过这两种方式间接的来实现。

2.针对hybrid APP对于jsbrige的理解？我们在开发的时候是怎样来实现安卓和前端之间的交互的？这里的一些细节的探讨？

3.sessionStorage是一个会话层面的本地存储，这个存储并不是说关闭一个页面之后就将相关的存储信息给删除掉，有可能这个信息在多个页面之间都应用到了，关闭其中一个并不代表就一定删除了；

4.post和get请求方式的区别？

不能说get方式不能向服务器端携带参数，在url的尾部是可以携带参数的，只是不安全而已，还有get携带的参数的体积是相对比较小的，post携带更多的数据量，post更加的安全，post会涉及一个100的状态码

5.编码题目？这个问题还是挺有深度的？知识点涉及到同步异步，块级作用域，闭包，let-var，扩展性也挺强的，可以将Promise等引入进来

for(var i=0;i<=5;i++){
   setTimeout(function(){
       console.log(new Date(),i);
  },i*1000);
}
console.log(new Date(),i);

2018-08-23    星期四     

1.管理系统中，是怎样来做超时逻辑处理的？想想当初春晖的做法是怎样的？

每请求一个接口的时候，后端都会针对当前的登录状态进行一个判断，如果超时，则直接要求其回到登录页面

2.node.js和浏览器下的js之间的区别？为什么他会火？

3.四个console.log()的打印顺序是什么？promise和setTimeout之间的关系，怎样做这个处理的呢？

//请问下方的代码打印顺序,探讨对于promise的理解
  console.log(1);
  let promise=new Promise(function(resolve,reject){});
  promise.then(console.log(2));
  setTimeout(()=>{console.log(3)},0);
  console.log(4);
  //1  2  4  3

4.如果你的Vue中使用了es6的语法，但是再使用babel将其转为es5之后，其依然不能兼容IE8的浏览器时，你们是怎么处理的？

2018-08-20   星期四   

1.原型链和闭包？你知道底层的闭包的实现的数据结构是怎样的吗？那本大红书上有写？

2.你希望什么样的团队呢？主要是使用Vue来开发？

3.你觉得长处和缺点是什么？

2018-08-20   星期四

1.写出常见的五个Linux命令?

2.遇到跨域请求时资源时，如何处理呢?

3.网站常见的安全漏洞有哪些？如何防范？

4.编写冒泡排序算法程序？

5.什么是闭包？

6.tcp和udp的区别是？

7.常见的设计模式有哪些?

8.http和https的区别是？

9.什么是守护进程？如何实现守护进程？

对于设计模式要有基本的理解，对于Linux系统要有简单的认识；

两个主要的学习方向：Vue和微信小程序，这四个方向自己的认识都不是非常的深刻，要自己去探索。

提问阶段：

1.你使用VueX来存储数据，但是如果当你跳转到另一个页面的时候，突然刷新了页面，数据丢失了怎么办，解决方案是将其存储到本地localStorage当中？

这种问题确实存在，自己没有真正使用Vue来做过这个项目，针对这里的细节还是不能完全的领会，但是别人在问的时候要尽可能用现有的办法来解决这个问题；最近要尽快熟悉一个vue项目，将其中的逻辑理解清楚；

2.es6的相关的应用，比如解构赋值等等？

3.如果让你单独设计一个秒杀的活动，该怎样来处理相关的工作呢？

2018-08-20   星期四    

笔试试题汇总：

1.js有几种数据类型？

string  number  null   undefined   boolean  Object 

2.如何点击每一个li之后，弹出相应的index值？

<ul id="test">
    <li>这是第一条</li>
    <li>这是第一条</li>
    <li>这是第一条</li>
<ul>

//基础答案-代码如下
var ul=document.getElementById("test");
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    var index=i+1;
    li[i].onclick=function(){
       console.log("我的序号是:"+index);
 }
}
//最好的应该使用事件委托，当点击了之后再去获取index
var ul=document.getElementById("test");
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    var index=i+1;
    li[i].onclick=function(){
       console.log("我的序号是:"+index);
 }
}

3.this对象的理解？

var User={
   count:1,
   getCount:function(){
          return this.count;
  }
}
console.log(User.count);   //1
var func=User.getCount;
console.log(func());   //undefined

4.如何解决跨域的问题？

CORS   JSONP   document.domain

5.如何设置浏览器缓存，缓存和不缓存两种？

• Last-Modified：服务器上文件的最后修改时间

• Etag：文件标识,文件指纹，提高传输性能

• Expires：本地缓存目录中，文件过期的时间（由服务器指定具体的时间）

• Cache-control：本地缓存目录中，文件过期的时间（由服务器指定过期的间隔时间，由浏览器根据间隔生成具体的时间）

6.实现一个clone函数，可以对js中的5种主要数据类型进行值复制？主要是考察对于对象的深拷贝的实现？null也是属于Object的；

7.代码实现（有几种实现）

var  arr=[
     {
     id:1,
     children:[...]|null
   }
]

变量arr是一个Object数组，数组元素为Object，有两个属性

id：数字类型

children：有两种类型。一种是数组，结构类似于变量arr;一种是null

请用代码实现从变量arr中提取子孙元素的id值组成一个一维数组，如[1,2,3...];

var arr=[{
    id:1,
    children:[{
        id:2,
        children:null
     }],
    },
    {
    id:3,
    children:null,
    },
];
function getId(arr){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
       newArr.push(arr[i].id);
       if(arr[i].children!=null){  //在使用递归调用的时候，不要忘记了将递归计算出来的值和外层的值进行合并
          newArr.push(arguments.callee(arr[i].children)[0]);  //这里递归调用产生的数  
          //newArr.concat(arguments.callee(arr[i].children));  //这里递归调用产生的数
       }
    }
    return newArr;
}
getId(arr);

8.不可变数组的范围求和？给定一个整数数组nums,计算出从第i个元素到第j个元素的和（i<=j）,包括nums[i]和nums[j]。

例子： 

      const  nums=Object.freeze([-2,0,3,-5,2,-1]);
      sumRange(0,2)->1
      sumRange(2,5)->-1
      sumRange(0,5)->-3
     //注意：
     假定数组的值不会改变（如上边的代码，nums因为Object.freeze的缘故可读不可写）
     sumRange可能会被使用很多次，求不同范围的值
     数组可能规模很大(比如超过10000个数)，注意运行时间
     

思路：

     主要为了提高效率，前边计算过的值，要保存到本地，供下次计算的时候使用，非常好的方法，但是一旦本地存储的数据过多的时候，这个检查的过程也是非常缓慢的。

var nums=[1,2,3,4];
function add(start,end){
 var newNums=nums.slice(start,end+1);
 var result=0;
 for(var i=0;i<newNums.length;i++){
     result+=newNums[i];
 }
  //在本地缓存中将这个start,end,result值一起缓存起来，下次计算的时候可以直接使用；减少工作量
  return result;
}

9.实现一个LazyMan，可以按照以下方式调用？非常经典的问题，涉及到代码组织方式，js的难点就是代码的组织方式和复合应用？用简单的语法开发出复杂的应用；

LazyMan("Hank"); 输出：
Hi!This is Hank!

LazyMan("Hank").sleep(0).eat("dinner);输出：
Hi!This is Hank!
//等待10秒..
Wake Up after 10
Eat dinner~

LazyMan("Hank").eat("dinner").eat("supper");输出：
Hi!This is Hank!
Eat dinner~
Eat supper~

LazyMan("Hank").sleepFirst(5).eat("supper");输出：
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper

依次类推。

//非常经典的一个问题，手动实现一个事件队列管理栈和链式调用的组合使用
function _LazyMan(name) {
        this.tasks = [];
        var self = this;
        var fn =(function(n){
            var name = n;
            return function(){
                console.log("Hi! This is " + name + "!");
                self.next();
            }
        })(name);
        this.tasks.push(fn);
        setTimeout(function(){
            self.next();
        }, 0); // 在下一个事件循环启动任务
    }
    /* 事件调度函数 */
    _LazyMan.prototype.next = function() {
        var fn = this.tasks.shift();
        fn && fn();
    }
    _LazyMan.prototype.eat = function(name) {
        var self = this;
        var fn =(function(name){
            return function(){
                console.log("Eat " + name + "~");
                self.next()
            }
        })(name);
        this.tasks.push(fn);
        return this; // 实现链式调用
    }
    _LazyMan.prototype.sleep = function(time) {
        var self = this;
        var fn = (function(time){
            return function() {
                setTimeout(function(){
                    console.log("Wake up after " + time + "s!");
                    self.next();
                }, time * 1000);
            }
        })(time);
        this.tasks.push(fn);//这几个都是直接将其加入到事件队列数组中
        return this;
    }
    _LazyMan.prototype.sleepFirst = function(time){
        var self = this;
        var fn = (function(time) {
            return function() {
                setTimeout(function() {
                    console.log("Wake up after " + time + "s!");
                    self.next();
                }, time * 1000);
            }
        })(time);
        this.tasks.unshift(fn);//这个则是直接将其插入到数组的最前边来执行
        return this;
    }
    /* 封装 */
    function LazyMan(name){
        return new _LazyMan(name);
    }
    LazyMan("Hank").sleepFirst(1).eat("supper");

 讨论的问题汇总：

1.面试题目还是非常的有高度？

2.大公司的试题难度相对还是比较高的？

3.关于Vue中的bus的问题，怎样使用bus来实现两个组件之间的通信？

简单的状态管理，可以用vue bus（事件总线），其实自己在面试中说的兄弟组件之间用$emit的方法先自己定义一个事件，再在另一个元素中一般在created钩子函数中写相应的方法，监听这个自定义事件，并获取信息，拿到后给后边的代码使用

vue bus可以实现不同组件间、不同页面间的通信，比如我在A页面出发点击事件，要B页面发生变化，使用方法如下：

全局定义：main.js

window.eventBus = new Vue()

在A页面的事件中触发：

eventBus.$emit('todo', '123')

在B页面的created中开始监听，越早监听越好：

eventBus.$on('todo', (params) => {
      console.log(params)
})

4.Vue中那几个钩子函数一般在什么情况下使用？还有methods、computed、watch之间的区别是？

2018-08-27     星期一   

1.我们的产品是部署在阿里云的oss服务上吗？

是的，相当于一个集中存储服务器，将我们的js/css/img上传上去之后就能自动进行请求使用了；

2.你们的产品是用webpack进行压缩，打包吗？为什么不进行压缩合并打包呢？你们不会使用sourcemap来解决压缩文档问题定位吗？

不是，以前是使用grunt合并，压缩，但是发现对于性能没有大的影响就放弃了，因为影响了调试，那你们不会使用sourcemap吗？

这个工具是专门用于定位压缩文件的问题的；想想Vue打包后的xx.map.js文件的作用是不是就是这个呢？

3.常见的设计模式有哪些？Vue中主要用了哪几种设计模式？

单例模式、单体模式、工厂模式、观察者模式、代理模式、策略模式你等

4.在跨域时，浏览器端和后端交互时，是不会将cookies信息携带给后端的？将cookies和localStorage合并成chache方法的实现过程？

5.你最近的学习方向和内容有哪些?

6.你的博客地址是多少？为什么不写到简历上呢？

地址是：https://blog.csdn.net/m0_37631322，目前的博客内容还是比较少的，写上去不能反映自己的能力，以后要多些，多思考，多总结；

7.promise的内部实现原理？（状态机）

8.弹性布局有应用过吗？实现原理是？三种定位，浮动的应用？

9.谈谈你对mvc/mvp/mvvm的深刻理解？让我回来查查，说明理解的不是非常的正确？

10.通过实时更改left不会影响页面的性能吗？相当于实时重绘？可以使用css中的translateX、translateY来实现实时改变坐标的效果。

个人总结：

 1.大公司对于代码的设计模式是有一定的要求的，代码组织方式

2.对于自己使用的框架一定要有自己的见解理解其核心点的实现原理

3.数据结构和算法是一个非常重要的方向，特别是大公司的高级前端，一般都会涉及到复杂数据的处理，算法很重要

4.对于框架的运用要有一个新的认识，平时多对于小的问题进行思考和总结十分重要

5.自己工作中多做一些有挑战的东西很重要