面试笔记2

1。数据类型

2。localstoryStorage与sessionStorage与cookie区别

1.sessionStorage不是一种持久化的本地存储。仅仅是会话级别的存储
2.localstoryStorage 用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。
3.cookie 和 localstoryStorage 比较相似，但是，cookie的容量有限。
4.cookie 需要指定作用域，不可以跨域调用

3。React是在哪个生命周期发请求–componentDidMount

react的生命周期：
constructor() —> componentWillMount() —> render() -----> componentDidMount()
上面这些方法的调用是有次序的，由上而下，也就是当说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。
1.constructor被调用是在组件准备要挂载的最一开始，所以此时组件尚未挂载到网页上。
2.constructor()中获取数据的话，如果时间太长，或者出错，组件就渲染不出来，你整个页面都没法渲染了。
3.componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码

4。状态码

100	Continue	继续。客户端应继续其请求
101	Switching Protocols	切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
202	Accepted	已接受。已经接受请求，但未处理完成
203	Non-Authoritative Information	非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204	No Content	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205	Reset Content	重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content	部分内容。服务器成功处理了部分GET请求
300	Multiple Choices	多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy	使用代理。所请求的资源必须通过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向。与302类似。使用GET请求重定向
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405	Method Not Allowed	客户端请求中的方法被禁止
406	Not Acceptable	服务器无法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408	Request Time-out	服务器等待客户端发送的请求时间过长，超时
409	Conflict	服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411	Length Required	服务器无法处理客户端发送的不带Content-Length的请求信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长（URI通常为网址），服务器无法处理
415	Unsupported Media Type	服务器无法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	服务器无法满足Expect的请求头信息
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的HTTP协议的版本，无法完成处理

E. jsonp原理

借鉴a标签，使用js嵌入
<script src=""></script>
<a href=""/>

5. 箭头函数与普通函数的区别

 1. 箭头函数是匿名函数，不能作为构造函数，不能使用new
 2. 箭头函数没有原型属性
 3. 箭头函数的this永远指向其上下文的this，没有办改变其指向，普通函数的this指向调用它的对象
 4. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

6. 项目亮点高德地图

我在应用中心模块中的考勤签到里面使用了高德地图api

1)注册高德的账号
   2)登陆进入高德地图api控制台 添加一个web端应用 ,记录下key值
   3）主页 搜索 citySearch
   4) 在页面上引入高德地图api 比如index.html 引入
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxx&plugin=AMap.CitySearch"></script>
   5)封装一个方法获取定位
   

7. es6新增方法------foreach() 、map()、filter()、reduce() 、 some()、every()的总结。

关于数组中foreach() 、map()、filter()、reduce() 、 some()、every()的总结。

1.foreach()

var arr = [1,2,3,4];

arr.foreach((item,index,arr)=>{

    console.log(item);  //结果为1,2,3,4

});

//foreach遍历数组，无返回值，不改变原数组，仅仅只是遍历，常用于注册组件、指令等等。

2.map()

var arr = [1,2,3,4];

arr.map((item,index,arr)=>{

    return item*10;  //结果为10,20,30,40

});

//map遍历数组，返回一个新数组，不改变原数组

3.filter()

var arr = [1,2,3,4];

arr.filter((item,index,arr)=>{

   return item >2; //结果为[3,4]

});

//filter过滤掉数组中不满足条件的值,返回一个新数组,不改变原数组

4.reduce()

var arr = [1,2,3,4];

arr.reduce((result,item,index,arr)=>{

  console.log(result);

  console.log(item);

  console.log(inddx);

  return result+item; 

});

//reduce让数组的前后两项进行某种计算,然后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历。

5.some()

var arr = [1,2,3,4];

arr.some((item,index,arr)=>{

   return item > 2; //返回true

});

//遍历数组每一项,有一项返回true,则停止遍历，结果返回true。不改变原数组。

6.every()

var arr = [1,2,3,4];

arr.every((item,index,arr)=>{

   return item >1; //返回false

});

//遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组。

 

以上6个方法均为ES6语法，IE9及以上才支持。不过可以通过babel转意支持IE低版本。
以上均不改变原数组。
some、every返回true、false。
map、filter返回一个新数组。
reduce让数组的前后两项进行某种计算，返回最终操作的结果。
forEach 无返回值。

8. 兼容问题

1.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
3.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
//解决方案：
var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;
4.Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none; 解决。
5.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

9. 什么是webpack

 1. webpack是一个模块打包工具
 2. webpack能够很好的管理与打包Web开发中所遇到的HTML、js、CSS、以及各种静态文件
 3. 让开发过程更加的高效。
==========================================》
打包流程
 1. 通过entry配置入口文件
 2. 通过output配置输出文件
 3. 使用各种loader处理css、JS、image等资源，并将他们编译与打包成浏览器可以解析的内容

10. webpack核心思想

1.一切皆模块
2.正如js文件可以使一个模块，其他文件如css,image,html也可以是一个模块。
3.这样我们可以将事务分割成更小，易于管理的片段。从而达到重复利用的目的。
4.实现按需加载。
5.传统的打包工具（moduel bundler）最终将所有的模块编译并生成一个庞大的bundle.js
6.bundle.js大小一般在10MB到15mb之间，这样会导致应用一直处于加载状态
7.因此webpack使用许多特性来分割代码，然后生成许多bundle.js文件

11. 路由传参方式

通过params
  1.路由表中 使用冒号参数名     
    <Route path=' /sort/:id '   component={Sort}></Route>　　　　　　　
  2.Link处        使用字符串拼接出要传递的参数
            HTML方式 
                 <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>          　　　　
          JS方式
                this.props.history.push(  '/sort/'+'2'  )
 3.sort页面       
 通过  this.props.match.params.id        就可以接受到传递过来的参数（id）
==================
1.params
<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name
优势 ： 刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

2.query
<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name
优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失

3.state
<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state 
优缺点同query

4.search
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search
优缺点同params

12. get与post区别

get
1、请求参数会在地址栏中显示，会封装到请求行中。
2、请求参数大小是有限制的。
3、不安全，容易被偷窥

post
1、请求参数不会在地址栏中显示
2、请求参数大小没有限制
3、相对比较安全

13. 虚拟DOM

1.使用js对象模拟DOM元素
2.为了高效更新数据

14. 垂直居中布局

通过display：flex来实现垂直居中；

父级：display：flex；

子元素：align-self：center；
---------------------------------------》
通过display：flex来实现垂直居中；
父级：
display：flex;
justify-content：center;
align-items：center；

15. git冲突解决方案

二阶段day35笔记
 - 解决冲突
        - 查看冲突文件：`git status`
        - 打开冲突文件，查看冲突代码，线下真人决定保留某个版本，删除无用信息
        - 重新git add和git commit即可
===========================================
- 当多人团队开发项目时，如果大家都直接操作项目，当出现程序员A写了同一个文件的代码，程序员B写了同一个文件代码，同时修改项目，有可能会发生冲突
    - 为了减少这种情况，让程序员A写代码时，不要直接操作项目，先拷贝一个副本出来，操作这个副本
    - 让程序员B写代码时，不要直接操作项目，先拷贝一个副本出来，操作这个副本
    - 程序员A和B操作不同的副本，会有影响么？不会
    - 副本就是分支

3. 分支的使用原则：
    - 每个开发者，最好都拥有自己的分支
    - 每写一个功能，最好都创建一个分支
    
4. 如何操作分支：
    - 查看本地分支：`git branch`
    - 查看所有分支：`git branch -a`
    - 查看远程分支：`git branch -r`

    - 创建分支：`git branch 分支名`
    - 如有创建了同名分支，会报错

    - 选择分支：`git checkout 分支名`
    
    - 合并分支：`git merge 分支名`
    - *慎重！*

    - 删除分支：`git branch -d 分支名`
    - 强制删除分支(分支上有 没有合并的代码)：`git branch -D 分支名`

    - 不冲突的场景
        - 创建了一个新分支a1，在a1上写代码，提交。
        - 此时要合并到的分支，没有操作，可以直接合并，不会发生冲突

    - 冲突的场景
        - 创建了一个新分支a1，在a1上写代码，提交。
        - 此时要合并到的分支，也有操作，而且操作的是和a1同一个文件，如果直接合并，会发生冲突

    - 解决冲突
        - 查看冲突文件：`git status`
        - 打开冲突文件，查看冲突代码，线下真人决定保留某个版本，删除无用信息
        - 重新git add和git commit即可

16. 登陆

登陆模块
1。点击登陆按钮将用户名密码发送到后台进行验证
2. 登陆成功，使用localstory存储用户名和密码，
3. 并且设置一个标志位，用与判断是否登陆
4. 推出时清除localstory中的标志位，和用户名密码
==============================
1。不同的用户具有不用的权限
2，当用户登录时，根据用户名密码判断用户权限
3.返回不同的数据
4.前端显示不同的菜单，不同的数据
5，左侧菜单是用Menu组件，
6.在他的点击事件中设置编程式导航，路由表中设置相应的路由
7.跳转到指定页面