前端常见问题React 基于属性传递即可，而且传递是单方向的：只能父亲通过属性把信息给儿子，儿子不能直接把信息作为属性给

React

react组件之间是怎么通信的？(父传子、子改父、redux)

父传子：

基于属性传递即可，而且传递是单方向的：只能父亲通过属性把信息给儿子，儿子不能直接把信息作为属性给父亲
后期子组件中的信息需要修改：可以让父组件传递给子组件的信息发生变化(也就是子组件接受的属性发生变化，子组件会重新渲染，而且触发 componentWillReceiveProps钩子函数)
只要实现，点击子组件按钮的时候，可以修改父组件的状态信息，父组件的状态改变，会重新执行render渲染，而重新执行render 的时候，会把最新的状态值作为属性传递给子组件，子组件接受的属性值发生改变，子组件也会重新渲染

子传父：

把父组件中的一个方法，作为属性传递给子组件
在子组件中把基于属性传递进来的方法，在合适的时候执行，相当于在执行父组件的方法，而这个方法中完全可以操作父组件中的信息

setState为啥是异步？

保证内部的一致性
无论setState是同步还是异步，就算他是同步，state更新了，props也不行，因为当父组件重新渲染之后你才能知道props，如果想让props也立即更新，就必须放弃批量处理，这样性能可能会显著下降，Dan总结说，React模型更愿意保持内部的一致性和状态提升的安全性，而不是追求代码的简洁性
性能优化我们通常人为状态更新会按照既定顺序被应用，举个例子：假设你在一个聊天窗口，正在输入消息，setState调用需要被立即应用，然而，你在输入过程中又收到一条新消息，更好的处理方式是延迟渲染新的组件，从而让你输入的更加顺畅，而不是立即渲染来阻塞线程，导致你输入抖动和延迟
更多的可能性和灵活性
异步更新并不只是性能优化，而是React组建模型能做什么的根本转变；比如，页面导航到另一个页面，通常都需要一个加载动画，等待新的页面加载，但是如果导航非常快，闪烁一下加载动画会降低用户体验；但是如果你简单的调用一下setstate去渲染一个新的页面，这样你不需要写任何的协调代码，React会在幕后开始渲染这个新的页面，如果这个更新花了较长的时间，你可以展示一个加载动画，否则就展示一个切换效果。

简述一下React组件的生命周期

componentWillMount 渲染前 
render 渲染 
componentDidMount渲染后 
shouldcomponentUpdate 是否允许更新，返回一个布尔值 
componentWillUpdate 更新之前，有两个参数，nextProps，nextState，接受最新的状态和属性 
componentDidUpdate 更新之后 
componentWillReceiveProps 属性改变后，也有两个参数 
componentUnmount 卸载之前，清定时器，缓存，也可以把状态信息，存储到redux 中，方便其他组件调用

state和props的区别？

state：是状态信息，不能直接修改，只能他通过dispatch修改，
props：是属性信息，在本组件内不能修改，只能配置默认值或者规则，可以在父组件传递过来的时候修改。

HTML

块级元素在父元素内水平、垂直居中

line-height：父元素高度; text-aline：center ;
position：absolute；top：50%；left：50%
transform:tanslate(-50%,-50%)
display: flex; align-items: center; justify-content: center;

简述css盒子模型

可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。
W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。

content-box（标准盒模型） 
width = 内容的宽度 
height = 内容的高度 
border-box（IE盒模型） 
width = border + padding + 内容的宽度 
height = border + padding + 内容的高度

H5新特性

标签

header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。
footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。 nav标签一般包含多个a标签，构建导航组件。 aside标签主要装载广告、侧边栏。 article标签包含文章，一般内嵌header、footer、h1、p标签。 section标签可以用在以上任一一个标签中划分组件。 hgroup顾名思义是h1~h6的集合。总体来说，这些标签就是div标签的语义化转化，过去我们曾用div来包裹某个块或者说组件，现在h5使用这些标签实现语义化，有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用

本地存储：h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况，判断window.sessionStorage,或者window.localStorage是否存在
离线web应用：页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用
表单新增功能：以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定；placeholder属性：表单默认文字；autofocus属性：是否默认选中，页面只能有一个
CSS3 ：CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size

一排盒子水平排列，平均分布

父元素：display：flex，子元素：flex：1

JS

数组去重的方法？

new Set(); 双for

求字符串中出现最多次数的字符次数？

遍历字符串，创建一个对象，遍历字符串，判断对象中如果有这一项，那就让这一项的值+1，没有就在对象中加添加一项属性名为当前项的，属性值为1；

如何阻止事件传播？

ev.stopPropagation();

瀑布流实现原理？

1.并排列三列，三列没有具体的高度，靠内容撑开

2.首先通过API接口地址，基于AJAX，从服务器端获取数据，拿出数据的前三项一次插入到三列当中(数据绑定)

3.计算目前三列的高度，按照高度有从小到大把三列进行排序，再次拿出获取数据中的三条，按照排好序的LI依次插入….一直基于这个规律插入完成即可

4.当用户下拉到页面底部，加载更多的数据即可

lazyload(懒加载)实现原理？

首先将页面上的图片的 src 设为一张默认的小图，而图片的真实路径则设置在 data-src 属性中，页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的 src 属性设置为 data-src 的值，这样，就可以实现延迟加载。

例举原生查找DOM的方法？

document.queryselect();
document.queryselectAll();
getAttribute()
getElementById
getElementByTagName
getElementByClassName
getElementByName

H5中新增的存储本地数据的方法(localStorage/sessionStorage)，并说明区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。用于支付功能
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。第二天、第二周或下一年之后，数据依然可用。

localStorage.setItem([key],[value]):[value]必须是字符串格式的(即是写的不是字符串，也会默认转换为字符串) 
localStorage.getItem([key]):通过属性名获取存储的信息 
localStorage.removeItem([key]):删除指定的存储信息 
localStorage.clear():清除当前域下存储的所有信息 
localStorage.key(0):基于索引获取指定的key名/

cookie 在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

Generator函数，以及如何使用？ (管理异步)

function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

function* fn(){   // 定义一个Generator函数
    yield 'hello';
    yield 'world';
    return 'end';
}
var f1 =fn();           // 调用Generator函数
console.log(f1);        // fn {[[GeneratorStatus]]: "suspended"}
console.log(f1.next()); // {value: "hello", done: false}
console.log(f1.next()); // {value: "world", done: false}
console.log(f1.next()); // {value: "end", done: true}
console.log(f1.next()); // {value: undefined, done: true}

但是，调用Generator函数后，函数并不执行，返回的也不是函数执行后的结果，而是一个指向内部状态的指针对象。

下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。即：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

Generator函数的暂停执行的效果，意味着可以把异步操作写在yield语句里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield语句下面，反正要等到调用next方法时再执行。所以，Generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。

深克隆和浅克隆？

什么是深克隆？

将一个对象的所有属性均复制，并将该对象与原对象放在内存中不同的位置，此时，改变新对象的属性不会对原对象造成影响，这种行为叫做深克隆。

什么是浅克隆

浅克隆只是简单的复制对象，若对象其中一个属性是引用值，由于引用型变量保存的是内存的一个地址,所以一个里面的值改变会影响到复制对象 JS中如何判断一个对象为数组类型

instanceof

强类型转换和隐类型转换

强类型：用Number，toString、Boolean
隐类型：两个等号，或三个等号比较时，或者数学运算是的转化，间接转换

forEach、map区别？

forEach是遍历数组，没有返回值
map是映射，return什么就是把数组的每一项替换成什么

Promise作用是什么，解决了什么问题？

管理异步操作，解决了回调地狱
箭头函数和传统函数的区别？
箭头函数没有this，继承上下文中的this，没有aguments，可以用 …arg 代替，而且他是数组，更方便，

AJAX原理？ new一个xmlHttpRequest实例，xhr.open(“请求方式”，url);然后用onreadystatechange监听状态改变，根据状态码，决定成功或者失败，

get、post区别

传递给服务器信息的方式不一样
get不如post安全， get通过url传参，post请求主体
get会产生不可控的缓存，加随机数或时间戳
但是并没有规定get必须url传参，post必须请求主体，只是浏览器对url的大小有限制，超过的部分会截取，get请求一般内容较短，所以用url传参，比较快，

src&&herf&&url

src 是指向物件的来源。
href是指向需要连结的地方。url是通用的 "连结" 的专业代名词，在 HTML语法里几乎不会使用。
url不是属性，src和href是属性，src用于替换当前元素，href用于在当前文档和引用资源之间确立联系，也就是说src引用的路径是img自己的路径，href引用的路径是要跳转到的地方