面试题总结

Waxiangyu

1. vue的双向绑定原理:

vue的双向绑定原理是通过Object.definedPropertygettersetter来对属性进行数据劫持的。

因为Object.definedProperty最低是支持到浏览器IE9的,所以如果想要兼容IE8,只能去做Object.definedProperty的兼容,那最终使用的是做的兼容,而不是Object.definedProperty.

图片描述

找了一张图片来表示响应原理。首先Object.definedProperty会对data的每个属性进行数据的劫持,当我们把data属性的值改了,就会触发它的setter,然后通知到watcherwatcher再更新指令所绑定的属性的值。

  • 通过Observerdata做监听,并提供了订阅某个数据项变化的能力
  • template编译成一段document fragment,然后解析其中的Directive,得到每一个Directive所依赖的数据项和update方法。
  • 通过Watcher把上述2部分结合起来,即把Directive中的数据依赖通过Watcher订阅在对应数据的ObserverDep上,当数据变化时,

就会触发ObserverDep上的notify方法通知对应的Watcherupdate,进而触发Directiveupdate方法来更新dom视图,最后达到模型和视图关联起来。

2. vue的钩子函数:

图片描述

依次为:beforeCreate ==> created ==> beforeMount ==> mounted ==> beforeUpdate ==> updated ==> beforeDestroy ==> destroyed
初始化的时候只有一次,只有当数据更改的时候才会去触发update钩子

3. vuemethod,computed,watch的区别:

computed是对结果进行缓存的,只要依赖的值没有变化,结果就不会变化。method就是普通的方法。computed减少执行的getter减去了重复计算,节省内存。watch是一直在监听。比如this.num + new Date(),虽然new Date的值一直在变,但只要this.num没变,结果还是一样的。

4. flex做骰子的3点:

html:
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

style:
.box{
    display:flex;
}
.item:nth-child(2){
    align-self:center;
}
.item:nth-child(3){
    align-self:right;
}

5. css的伪类:

    :first-child/:last-children   //选择第一个孩子,:nth-of-type(n)
    :checked/:disabled   //选择checkbox已选中的
    :afeter/:before //标签的伪类
    :not(selecter) //非元素的其它元素
    

6. 三行文本垂直居中:

1.加上下一样的padding值,达到上下居中的目的。
2.利用table

<div class="wrapper">
    <div class="cell">
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
.wapper{
    displaty:table;
 }
.cell{
    display:table-cell;
    vertical-align:center;
}

3.{position:relative;top:50%;transform:translateY(-50%)}
4.通过box:

<div class="center">
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
.center{
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

5.flex:

<div class="flex">
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
.flex{
    display:flex;
    align-items:center;
}

7. 跨域的方法:

浏览器为了安全机制,采用同源策略,域名,协议,端口号一致的才可以进行访问,否则容易受到XSSCSRF等攻击;
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了

1,jsonp:是通过script标签的src属性来实现跨域的。通过src传过去一个函数,把数据放在函数的实参调用就可以拿到数据。由于是用src的链接,所以jsonp只支持get方式。content-type:javascript
2,cors:改变请求头信息。客户端加:Origin:地址。服务器:Access-Control-Allow-Origin:地址.支持IE10以上。
3,webpack:devServer里配置proxy:{api:'地址'};
实际是http-proxy-middleware这个中间件,
同源策略是浏览器遵循的标准,如果是服务器向服务器请求就不需要.
接受客户端请示-->将请求转发给服务器-->拿到服务器响应数据-->将响应转发给客户端

浏览器 <--转发响应 请求--> 代理服务器 <--响应请求 转发请求--> 服务器

// server1.js 代理服务器(http://localhost:3000)
const http = require('http')
// 第一步:接受客户端请求
const server = http.createServer((request, response) => {
  // 代理服务器,直接和浏览器直接交互,需要设置CORS 的首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  // 第二步:将请求转发给服务器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },
      serverResponse => {
        // 第三步:收到服务器的响应
        var body = ''
        serverResponse.on('data', chunk => {
          body += chunk
        })
        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步:将响应结果转发给浏览器
          response.end(body)
        })
      }
    )
    .end()
})
server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})

4,nginx反向代理:
类似于Node中间件代理,只需要搭载一个中转nginx服务器,支持所有浏览器,不会影响性能,不用改代码。
通过nginx配置一个代理服务器(域名和aaa相同,端口不同)做跳板机,反向代理访问bbb接口
aaa-->bbb

nginx.conf

upstream tomcatserver{
    server 192.168.72.49:8081//3.找到代理服务器的ip地址进行请求
}
server{
    listen        81;
    server_name   www.aaa.com;//1.客户端调用名
    
    location / {
        proxy_pass    http://www.bbb.com:8080;//2.到代理服务器
        index   index.html  index.html;
    }
}

8. webpack

loaderplugins的区别:loader是负责解析代码的,而且plugins是去做优化,代码整合之类的。

new ExtractTextPlugin('styles.css'):分隔出css单独打包;

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {
       // 该配置假定你引入的 vendor 存在于 node_modules 目录中
       return module.context && module.context.indexOf('node_modules') !== -1;
    }
})//依赖项不重复打包,分隔模块
<LazilyLoad modules={{
  TodoHandler: () => importLazy(import('./components/TodoHandler')),
  TodoMenuHandler: () => importLazy(import('./components/TodoMenuHandler')),
  TodoMenu: () => importLazy(import('./components/TodoMenu')),
}}>//懒加载

解析es7用到的babelbabel-core,babel-loader,babel-preset-es2015,babel-preset-stage-2,babe-plugin-transform-runtime,babel-runtime,babel-register.

9. es6的声明方法,es5:var,function

var:会存在变量提升,如果在声明之前用到会报undefined.
let:不存在变量提升,如果在声明之前用到会报错。暂时性死区。块级作用域。
const:声明之后就不能改变。同上,如果是对象的话,只是指向引用的地址,所以对象里面的值改变了,是没有任何反应的。
function:声明属于window.function
class:声明一个类
import:声明一个引用过来的模块

10. 性能优化:

压缩css,js:体积更小,加载速度更快。
css在前,js在后:css在前可以和dom树一起合成render树,js在后不阻塞dom渲染。
减少http请求:http请求需要时间。而且要等到它请求完才能执行。请求是异步的,不知道什么时候才能请求完。
webpack配置:按需加载。分离css。分隔依赖,把相同的依赖只打包到一起,不必重复加载。

11. 异步管理:

promise:promise等到执行完成后返回2种状态,resolve代表成功,reject代表失败。
如果有多个异步可以用promise.all([]).
async await:async声明一个函数返回一个promiseawait等到promise异步执行结束拿到的一个结果

12. angularJS双向绑定实现原理:

脏值检测:angularscope模型上设置了一个监听队列,用来监听数据变化并更新view,每次绑定一个东西到view上时angular就会往$watch队列插入一条$watch,用来检测它监视的model里是否有变化的东西(一个数据一个$watcher,对象会有一个,里面的值还会有,数组中每个对象也都会有一个)。这些$watch列表会在$digest循环中通过一个叫做‘脏值检测’的程序解析。
angular对大部分能产生数据变动的事件进行封装(如click,mouse-enter,timeout),在每次事件发生后,比如更改了scope中的一条数据,angular会自动调用$digest来触发一轮$digest循环,它会触发每个watcher,检查scope中的当前model值是否和上一次计算得到的Model值是否一样,如不同,对应的回调函数会被执行,调用该函数的结果,就是view中的表达式内容会被更新。

如果执行了非angular的方法,如setTimeout需要调用$apply()应用到angular上,它会调用$rootScope.$digest()。因此,一轮$digest循环在$rootScope开始,随后会访问到所有的children scope中的watchers

$apply()里面可以加参数,而且会触发作用域树上所有的监控。$digest()只作用在当前作用域和它的子作用域上。

angular服务:sevicer对象的实例化this.xx=factory返回一个对象return{a:xx}

13. 在arr=[1,2,4],4之前插入3

arr.splice(2,0,3)

14. json字符串与json对象的转换:

在数据传输过程中,json是以文本,即字符串的形式传递的。而js操作的是json对象。

转对象:str.parseJSON(),JSON.parse(str),eval('('+str+')')
转字符串:obj.toJSONString(),JSON.stringify(obj)

15. requestAnimationFramesetTimeout/setInterval:

因为js是单线程的,setTimeout/setInterval是在定时器线程,要等主线程走完了,才会执行事件队列。如果主线程的计算执行时间过长,那么定时器就要一直等着不能执行,就导致了,动画卡,或者一下堆在一起执行重叠过快。
requestAnimationFrame不需要设置时间间隔。IE9以下不支持。cancelAnimationFrame()用来取消。

16. 原型链:

每一个构造函数都有自己的原型对象,用prototype属性来表示。每个原型对象都有一个隐式的_proto_属性指向它父级的原型对象。如:

let a= new A() 
a._proto_=A.prototype
a._proto_._proto_=A.prototype._proto_=Object.prototype
a._proto_._proto_._proto_=A.prototype._proto_._proto_=Object.prototype._proto_=null

17. 闭包:

闭包简单来说就是函数套函数。我们在函数内声明的变量叫局部变量,局部变量只能在里面访问,外面是访问不到的。如果我们想访问局部变量就可以在函数的内部在写一个函数,根据作用域链的原则就可以往上找父级的变量。
闭包会导致内存泄露的问题,解决办法是用过之后把这个变量清空还原。

18. arguments

arguments是一个对应于传递给函数的参数的类数组对象。它是一个类似于数组的对象,但还不是数组。
arguments.length:实参长度。arguments.callee.length:形参长度
可以用[].slice.call(arguments);或Array.from(arguments);[...arguments]

19. getpost

get一般表示从服务器获取数据,post是向服务器传递数据。
get的方式是url,因为在地址栏所以长度有限,而且地址栏的内容可以看到,所以保密性较差。
post是放在requst body。对长度没有限制,保密性也较好。
get一般用于搜索。post一般用于表单提交。

20.String+Number

3 + '3' = 33
undefined + 3 = NaN //undefined为NaN,
null + 3 = 3 //null为空。
'null' + 3 = 'null3'

当有+的时候会检查是否有类型为string的,如果有就会把其它值也转化为string格式进行字符连接。如果没有string,有number,那么会把其它值转化为number类型的值执行加法运算。

21. 循环

for(vari=0,j=0;i<5,j<10;i++,j++){
    
}
console.log(i+j) //20

22. 给数组加一个数组去重的方法:


Array.prototype.q=function(arr){
    let obj={},a=[];
    for(let i=0;i<arr.length;i++;){
        if(!obj[arr[i]]){
            obj[arr[i]]=true;
            a.push(arr[i])
        }
    }
    return a;
}

let arr=[3,4,4,5,6,7,72,4,3];
console.log(Array.q(a));

23. 类的继承:

es6:extends

es5:
1.构造函数绑定:

function Cat(name,color){
    Animal.apply(this,arguments);
    this.name=name;
    this.color=color;
}

2.利用prototype:

function Cat(name,color){
    this.name=name;
    this.color=color;
}
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;

3.组合继承:

function Cat(){
    Animal.call(this)
}
Cat.prototype=new Animal();

4.通过空对象:

function extend(Child,Parent){
    var F=function(){};
    F.prototype=Parent.prototype;
    
    Child.prototype=new F();
    Child.prototype.constructor=Child;
}

function Animal(){}
Animal.prototype.species='动物';

function Cat(name){
    this.name=name;
}

extend(Cat,Animal)

5.拷贝继承:

function extend2(Child,Parent){
    var p=Parent.prototype;
    var c=Child.prototype;
    
    for(var i in p){ //浅拷贝
        c[i]=p[i]
    }
}

extend2(Cat,Animal)

24. mapforEach的区别:

forEach不能breack,也不能return.
map循环每一个的时候就相当于在内存中新建了一个数据,比较占内存

25. 获取url地址:

window.location.href

26. async的好处:

最开始的异步都是用回调函数解决的,比如ajax,setTimeout,addEventListener.但是如果回调函数过多就会形成回调地狱。那么promise就是为解决这一问题的。promise可以用链式写法等到异步有结果再进行下一步。但如果promise写多了也会变的不直观,asyncawait等到promise的返回。可以让代码看起来更加简洁高效。

27. 解构出a.b.c的值:

let obj={a:{b:{c:1}}}
let {a:{b:{c}}}=obj
console.log(c) //1

28.react的生命周期:

图片描述

29. reactvue的对比:

共同点:数据驱动视图,组件化,虚拟DOM;

  1. 数据驱动视图:不用再操作DOM的方式,只用关注依赖的数据变化即可。
  2. 组件化:都遵循组件化思想,主要在UI层分细块的组件,组件嵌套都有父子组件传递。都有数据状态管理,前端路由,插槽等。
  3. 虚拟DOM:都使用了Virtual DOM+diff算法,不管是vuetemplate+options api写法还是reactclassfunction写法,最后都是生成render函数,而render函数执行返回VNode。每一次UI更新都会根据render重新生成最新的VNode,然后跟以前缓存起来的老VNode对比,再使用diff算法去更新真实的DOM(虚拟DOMjs对象存在js引擎中。而真实DOM在浏览器渲染引擎中,所以操作虚拟DOM比操作真实DOM开销要小的多)

不同点:核心思想不同,组件写法不同,diff算法不同,响应式原理不同,其它不同

  1. 核心思想不同:
    vue的定位是降低前端开发门槛,容易上手,所以vue的主要特点:灵活易用的渐进式框架,对数据进行劫持/代理,侦测数据变化更敏感精确。
    react背靠Fackbook,定位是UI开发新思想,用更好的方式颠覆前端开发方式。所以推崇函数式编程(纯组件),数据不可变及单向数据流。
  2. 组件写法不同:react推荐JSX+inline style,就是把htmlcss都写进javascript,就是all in jsvue就是传统的html,css,js,用template的单文件组件格式。
  3. diff算法不同:
    传统diff算法是循环递归每一个节点,合起来diff2棵树的复杂度就是O(n3)vuereact有相同的diff优化原则将算法复杂度降到了O(n)

    • 不同的组件产生不同的DOM结构,当type不同时,对应DOM操作就是直接销毁老的DOM,创建新DOM
    • 同一层的一级子节点,可以通过唯一key区分

    image.png

    react的核心算法实现:
    image.png

    1. react首先对新集合遍历,for(name in nextChildren)
    2. 通过唯一key来判断老集合中是否存在的节点,没有就创建
    3. 有的话:if(preChild===nextChild)将节点在新集合的位置和在老集合中lastIndex进行比较。如果if(child._mountIndex<lastIndex)进行移动操作,否则不移动。
    4. 如果遍历中,发现新集合中没有,老集合中有的节点,会删除掉

    vue的核心算法实现:
    image.png
    updateChildrenvue diff的核心:

    • children和新children各有2个头尾的变量startIdxendIdx,它们的2个变量相互比较,共有4种比较方式。
    • 如果4种比较都没匹配,如果设置了key,就会用key比较,比较过程中变量会往中间走,一旦startIdx>endIdx说明旧children和新children至少有一个已经遍历完了,会结束比较。

      vuediff采用了双端比较的算法,同时从新旧children的2端开始进行比较,借助key找到可以复用的节点,再进行相关操作。对比react可以减少节点移动次数,减少性能损耗,更加优雅。

  4. 响应式原理不同:
    vue:依赖收集,自动优化数据可变。递归监听data的所有属性,可以直接=改。当数据改变时,自动找到引用组件重新渲染。
    react:基于状态机,手动优化,数据不可变,需要setState驱动新的state替换老的state。当数据改变时,以组件为根目录,默认全部重新渲染,所以react中会需要shouldComponentUpdate生命周期函数进行优化控制。
  5. 比如api的差异也挺大的,vue为了更加简单易用加了指令,filter,以及watch,computed等概念。react的api就比较少了,相对来说react没有上限也没有下限,但如果js基础不够好,代码也会写的一蹋糊涂。
    react源码编译过程
    image.png

vue源码编译过程https://www.cnblogs.com/vicky...
image.png

30. 计算数组中元素出现的次数,并最多次数的值:

function getMost(arr) {
    let max=null;    //出现次数最多的元素
    let num=1;    //该元素出现次数
    
    let sum=arr.reduce((p,k)=>{//出现次数
        p[k]?p[k]++:p[k]=1;  //k代表当前正在遍历的元素。应用到p[k]里,k表示p对象里的一个键,p[k]表示该键对应的值。
        if(p[k]>num){//最大值
            num=p[k]
            max=k  
        }
        return p;//出现次数的对象
       },{});
       
       return {max:max,num:num}   
}
let arr= ["lujj","lujj2","lujj2","lujj","lujj"];
getMost(arr)
阅读 2.2k
628 声望
28 粉丝
0 条评论
628 声望
28 粉丝
文章目录
宣传栏