modelmap前端怎么取值_【百度】前端开发岗面试题

来都来了

不关注一下吗

二面三面都有手写代码的环节，对于我这种动手能力弱的人来说还是挺吃力。当时提前批投递的是深圳百度，总共只招五个前端，没过也很正常。后面正式批笔试过了，但是要去北京面试，也就直接放弃了。

一面：

1.为什么要用flex布局，align-items和justify-content的区别

传统布局基于盒模型，非常依赖 display属性 、position属性 、float属性。而flex布局更灵活，可以简便、完整、响应式地实现各种页面布局，比如水平垂直居中。

align-items：定义在垂直方向上的对齐方式；

justify-content：定义在水平方向上的对齐方式。

2. webpack是怎么打包的，babel又是什么？

把项目当做一个整体，通过一个给定的主文件(如：index.js)，Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个(或多个)浏览器可识别的JavaScript文件。

babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

3. saas和less不同于普通css的地方

·定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值；

·嵌套写法，父子关系一目了然；

·使用运算符，可以进行样式的计算；

·内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等；

·继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；

·Mixins (混入)：有点像是函数或者是宏，当某段 CSS经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

4. es 6模块和其他模块不同的地方

对比了一下es6模块和CommonJS模块：
区别 | CommonJS | es6
---|---|---
加载原理 | 第一次加载模块就会执行整个模块，再次用到时，不会执行该模块，而是到缓存中取值。| 不会缓存运行结果，动态的去被加载的模块中取值，并且变量总是绑定其所在模块。
输出 | 值的拷贝(模块中值的改变不会影响已经加载的值) | 值的引用(静态分析，动态引用，原来模块值改变会改变加载的值)
加载方式 | 运行时加载(加载整个模块，即模块中的所有接口) | 编译时加载(只加载需要的接口)
this指向 | 指向当前模块 | 指向undefined
循环加载 | 只输出已经执行的部分，还未执行的部分不会输出 | 遇到模块加载命令import时不会去执行模块，而是生成一个动态的只读引用，等到真正用到时再去模块中取值。只要引用存在，代码就能执行。

5. 有没有用过es6的一些异步处理函数

Promise，generator，async await

6. redux怎么处理异步***作

可以引入Redux-thunk或者redux-promise这种中间件，可以延迟事件的派发。

其中的原理：是因为他们用了applymiddleware()包装了store的dispatch方法，拥有可以处理异步的能力。

7. 为什么reducer要是个纯函数，纯函数是什么？

纯函数：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。

原因：Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同(浅比较)。如果你在reducer内部直接修改旧的state对象的属性值，那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变，返回的state将为旧的state。两个state相同的话，页面就不会重新渲染了。

因为比较两个Javascript对象所有的属性是否相同的的唯一方法是对它们进行深比较。但是深比较在真实的应用当中代价昂贵，因为通常js的对象都很大，同时需要比较的次数很多。因此一个有效的解决方法是作出一个规定：无论何时发生变化时，开发者都要创建一个新的对象，然后将新对象传递出去。同时，当没有任何变化发生时，开发者发送回旧的对象。也就是说，新的对象代表新的state。

8. 高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。

编写高阶函数，就是让函数的参数能够接收别的函数。

9. vue跟react的区别是什么

没有用过vue，所以就只说了vue具有双向绑定，react是单向数据流。

10. nodejs处理了什么问题

可以处理高并发的I/O，也能与websocket配合，开发长连接的实时交互应用程序。

11. 响应式布局，怎么做移动端适配

使用媒体查询可以实现响应式布局。

移动端适配方案：

(1)meta viewport：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

(2)媒体查询(响应式)

(3)动态 rem 方案

二面：

1. 怎么做一个实时的聊天系统

使用WebSocket和nodejs，《nodejs实战》这本书详细介绍了这个项目。

2. 当消息有延迟的时候，怎么保证消息的正确顺序

每个消息在被创建时，都将被赋予一个全局唯一的、单调递增的、连续的序列号(SerialNumber，SN)。可以通过一个全局计数器来实现这一点。通过比较两个消息的SN，确定其先后顺序。

3. 怎么做一个登陆窗口，input有哪些兼容性

使用form表单。

4. input按钮如何校验

使用正则表达式。

5. 如何实现水平垂直居中，relative、absolute、fixed

我说了三种方式：

(1)使用表格

.container{   width: 600px;   height: 600px;   background: #eee;   display: table-cell;   text-align: center;   vertical-align: middle; } .center{   background: blue; }

(2)css3的transform属性

.container{   width: 100%;   height: 400px;   background: #eee;   position: relative; } .center{   background: blue;   position:absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }

(3)flex布局

.container{   width: 100%;   height: 400px;   background: #eee;   display: flex;   justify-content: center;   align-items: center; } .center{   width: 100px;   height: 100px;   background: blue;   text-align: center; }

·relative：相对于自己的定位；

·absolute：相对于最近一级定位元素的定位；

·fixed：相对于窗口的定位。

6. 写一个函数，1s之后依次输出1,2,3,4,5

直接使用了let和定时器。

for(let i = 1; i < 6; i++){     setTimeout(() => {         conosle.log(i)     }, 1000) }

7. 事件队列(宏任务、微任务)

8. 如何每隔三个数加一个逗号，还要考虑小数点的情况

这道题就是大疆的笔试题，当时候笔试题也是瞎写的，后面也没仔细看，没想到又成了一道面试题。

function transform(number){     var num = number.toString()     var numArr = num.split('.')     var [num, dotNum] = numArr     var operateNum = num.split('').reverse()     var result = [], len = operateNum.length     for(var i = 0; i< len; i++){          result.push(operateNum[i])          if(((i+1) % 3=== 0) && (i !== len-1)){               result.push(',')         }     }     if(dotNum){          result.reverse().push('.'， ...dotNum)          returnresult.join('')     }else{          returnresult.reverse().join('')     } }

9. webpack有配置过吗？原理知道吗

10. 父子组件如何通信，子组件怎么跟父组件通信？

父组件把state作为props传递给子组件进行通信。

父组件写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子组件，子组件调用父组件的函数，同时引起state变化。

11. 简单说一下pwa

面试的这个部门就是做pwa的，所以说了下自己对pwa的理解。

三面：

1. 手写indexOf

function indexOf(str, val){     var strLen = str.length, valLen = val.length     for(var i = 0; i < strLen; i++){         var matchLen = i + valLen         var matchStr = str.slice(i, matchLen)         if(matchLen > strLen){             return-1         }         if(matchStr === val){             returni         }     }     return-1 }

2. 实现 JS 的继承

function A () {    this.name = 'a';    } A.prototype.getName = function () {     returnthis.name; } function B () { } // B 如何继承 A

3. 从url输入到页面显示会有哪些步骤

(1)DNS服务器解析域名，找到对应服务器的IP地址;

(2)和服务器建立TCP三次握手连接；

(3)发送HTTP请求，服务器会根据HTTP请求到数据服务器取出相应的资源，并返回给浏览器；

(4)浏览器处理响应

·加载：浏览器对一个html页面的加载顺序是从上而下的。
当加载到外部css文件、图片等资源，浏览器会再发起一次http请求，来获取外部资源。
当加载到js文件，html文档会挂起渲染(加载解析渲染同步)的线程，等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

·解析：解析DOM树和CSSDOM树。

·渲染：构建渲染树，将DOM树进行可视化表示，将页面呈现给用户。

4. method有哪些方法，分别是什么意思？post和put的区别

post：上传资源

put：修改资源

5. https有几次握手

6. http2比http1好的地方

主要是考察http2的几个特性。

7. 页面刷新不出来，是有哪些问题

可以从第三题的每个步骤进行分析，大概是：

·域名不存在，或者ip地址错误

·网络问题，不能建立正常的tcp连接

·服务器找不到正确的资源

8. 上一次系统性的学习是什么时候，怎么学习的

学习react的时候，看文档、博客，照着网上写了点小项目。

9. 你觉得项目中最自豪的是什么

10. 上家公司有哪些不好的地方

——The  End——