First Blood

来北京后第一次参加面试，紧张的要死，时间不充分，感觉没有准备好，所以硬着头皮去的，挂的毫无疑问。现在将面试题总结，吃一堑长一智吧！

1、简述一下你在上一家公司做的主要产品？
2、把React原理讲一下？
3、虚拟DOM是什么？
4、react的生命周期？
5、数组中对象去重？
6、数组中的value去除偶数？
7、数组中常用的操作方法？

1、简述一下你在上一家公司做的主要产品？

主要是移动端的H5开发的webApp产品。因为对于我们的APP而言，大部分都是webkit内核，所以不需要考虑浏览器之间的兼容问题。

2、把React原理讲一下？

React的主要思想是创建了虚拟DOM，并且在虚拟DOM和真实DOM之间建立Diff算法，用户操作某个组件的时候是并不是直接操作了真实DOM，而是操作了虚拟DOM，react也并不是立即渲染，而是利用“React合成事件系统”对事件合并后统一对真实DOM进行差异渲染。
React有一套自己独有的JSX（JavaScript XML）语法，它是将所有的图片，HTML，CSS全部放入JS文件中，在主入口html文件中只需要创建一个div标签。
JSX的渲染机制主要有3个步骤：
1、基于babel的语法解析模块babel-preset-react把JSX语法编译为react.createElement(...)结构。
2、执行React.createElement(type,props,children)，创建一个对象（虚拟DOM）
3、执行ReactDOM.render(JSX语法最后生成的对象，容器)，基于render方法把生成的对象动态创建为DOM元素，插入到指定的容器中。

3、虚拟DOM是什么？

虚拟DOM就是JS创建的一个对象。它是执行react.createElement(type,props,children)创建的。里面包含，type容器类型，属性props，和子元素children。

4、react的生命周期？

react的生命周期分为3种状态：1、初始化 2、更新 3、修改。
A、初始化：
1、getDefaultProps （相当于es6 中staticDefaultProps）
2、getInitialState (相当于constructor中的this.setState)
3、componentWillMount
4、render
5、componentDidMount
B、更新：
更新分为两种：props更新，state更新
props更新：
1、componentWillRecieveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate
state更新
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate
C、销毁
componentWillUnmount
注意
1、在componentWillUpdate，和componentDidUpdate两个状态中存在nextProps和nextState两个参数可以操作下一步属性/状态。
2、不能再shouldComponentUpdate，componentWillUpdate两个状态中切勿使用this.setState（有判断条件的部分情况可以用），如果使用了则会进入死循环！

5、数组中对象去重？

举例：
let arr = [
{name: 'tom', age: 10},
{name: 'jim', age: 18},
{name: 'tom', age: 15},
{name: 'rose', age: 12}];
解答：
let obj = {};
arr = arr.reduce(function (item, next) {
/**
* 判断obj中是否存在下一项的name,如果存在，则什么也不做；如果不存在，obj[next.name] = true，这样下一次不会重复加入；同时，将next这一项加入到累加器item中。
*/
obj[next.name] ? '' : obj[next.name] = true && item.push(next);
return item
}, [ ]);
console.log(arr);

6、数组中的value去除偶数？

举例：
let arr = [
{name: 'tom', age: 10},
{name: 'jim', age: 18},
{name: 'tom', age: 15},
{name: 'rose', age: 12}];
解答：
arr=arr.filter(item=>item.age%2!==0);
console.log(arr);

7、数组中常用的操作方法？

splice find some every includes forEach map filter