如何在面试中优雅的回答这些题？

如何在面试中优雅的回答这些题？

介绍

学习方面、为什么选择前端

exp:我是csu_zipple，csu 软件学院的一名学生。在校主修的是Java以及软件项目开发的一些课程，但充分利用了课余时间学习了web前端的知识，拥有不错的开发能力。在校期间参加了不少大大小小的比赛，并且帮助团队拿到了不错的成绩。 
前端是最贴近用户的层面，前端的能力就是能够让产品从90分进化到100分，甚至更多。我希望能够通过自己的努力能够让更多的用户喜欢上我们的产品，更希望能够加入贵公司贡献自己的一份力量。

数组对象中的forEach方法和map方法有什么不同？

map方法返回一个对每一项进行处理后的新数组，并且不会检测空对象（会报错）。而forEach方法是遍历每一项，不会返回新数组。

for循环中的in会遍历原型吗？

会的，并且会遍历原型链上所有的原型属性，除非属性设置了不可枚举属性：enumerable:false，而Object.keys()则不会遍历原型

js 中如何模拟块级作用域？

ES6之前js没有块级作用域的概念，这意味着在块语句中定义的变量实际上是在其包含函数中而非语句中创建的。在团队协作开发的时候，js不会告诉你是不是多次声明了同一变量，这为代码的维护带来了问题。 
在ES6中js为我们解决了这个问题：使用let和const标识符来声明变量，同时这也意味着没有了变量提升。 
在ES5中，使用匿名函数可以模仿块级作用域：

  (function(){
      //块级作用域
  })()

• 1
• 2
• 3

接触过跨域这个概念吗？你知道哪些解决跨域的方法？

• 在IE8中使用XDR对象进行跨域通信
• websocket
• sse
• comet 
  • comet是一种服务器向页面推送数据的技术，适合实时数据展示。
  • 实现comet的方式有两种：http流和长轮询
  • http流的实现如下：（服务器保持http链接，周期性的向浏览器发送数据）

  xhr.onreadystatechange=function(){
    var result;
    if(xhr.readystate==3){
        //调用回调
    }
  }

• 1
• 2
• 3
• 4
• 5
• 6

长轮询：服务器接收到请求后如果有数据则立即响应请求，如果没有数据在服务器端hold住一段时间，这段时间内如果有数据就响应请求。如果没有则响应请求，让浏览器再请求。这种方式容易产生服务器瓶颈。 
短轮询：短轮询和长轮询相反，短轮询是指服务器接收到请求之后不管有没有数据都立即响应。浏览器判断如果是无效数据则等待一段时间后再请求。 
两者的区别在于服务器如何发送数据。短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。轮询的优势是所有浏览器都支持。

• nginx代理
• jsonp 
  • jsonp由两部分组成回调函数和数据：js实现jsonp
  • 缺点：jsonp是从其他域加载代码执行。如果其他域不安全，很可能在响应中夹带一些恶意代码，而此时除了放弃jsonp调用之外别无选择。
  • 其次要确定jsonp请求是否失败并不容易，他和图像ping一样也是只能发送get请求。因为两者的本质都是通过src属性进行web请求。

• 图像ping 

  • 图像ping是与服务器进行简单、单向的跨域通信的一种方式，请求的数据是通过查询字符串形式发送的。而相应可以是任何内容，但一般是像素图或者204响应。
  • 最常用于跟踪用户点击页面或者动态广告曝光次数。服务端通过接收点击或者图片请求在后台进行统计或其他操作
  • 缺点：只能发送get请求，并且无法访问服务器的响应文本。这也解释了为什么图像ping是单向的跨域通信。 

   

  204代表响应报文中包含若干首部和一个状态行，但是没有实体的主体内容

• h5中的postmessage

ES6中的generator函数了解过吗？

参考链接

React的生命周期函数？哪一个生命周期函数会返回boolean值

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

react调用setState之后发生了什么？

参考链接 
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。

一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。

通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。

react组件间通信的方式？

组件之间的通信方式主要可以分成这几类：

• 父子组件之间相互通信 
  • 父子间通信的方法很简单，父亲给儿子传递信息通过props。儿子给父亲传递消息通过父组件的回调函数，调用setState方法使重新渲染达到通信的目的。
• 同级组件之间相互通信 
  • 同级组件之间通常是将信息流预定义在共同父组件之间，让这个父组件达到一个中间件的效果来完成通信。
• 无嵌套组件之间通信 
  • 无嵌套组件之间可以通过自定义事件，也就是发布-订阅模式来触发相对应的方法，达到通信的目的。 
    也可以使用redux统一管理组件的state，实现数据的双向流动。

redux可以分成哪些模块？

action、reducer、store？

react的router

参考链接传送门