1. sort 的原理
当数组长度小于等于10的时候，采用插入排序；大于10的时候，采用快排
2. 堆、栈、池 的区别
栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new出来的对象）或者常量池中（字符串常量对象存放在常量池中）
堆：存放所有new出来的对象
常量池：存在字符串常量和基本类型常量
3. Object.keys() 和 for ... in 的区别
Object.keys() 返回所有可遍历的键名，它的成员只是参数对象自身的（不含继承的）
for ... in 是遍历拿到所有的键名（包括原型链上的），结合hasOwnProperty才能拿到对象自身的
4. 用两个队列实现栈
1）构建队列
2）栈中包含两个队列Q1 和 Q2
3）入栈：若Q1 和 Q2 都为空，则随便一个队列进入队列；若某一个不为空，则不为空的那个队列进入队列；不存在两个都不为空的i情况
4）出栈：将不为空的队列从队首将元素复制到另一个队列中，同时进行出栈操作，直到剩下一个元素位置，再进行最后一次出队列操作
5. 用原生JS实现拖拽
实现拖拽分三个阶段：onmousedown 鼠标按下时，onmousemove 移动，onmouseup 抬起
当鼠标按下时，记录当前xy坐标；移动时计算水平垂直移动距离，设置元素left，top值；鼠标抬起时，取消down事件
6. 如何判断数组还是对象
Array.isArray()
Object.prototype.toString.call()
7. prototype 和 _proto_ 的区别
prototype是一个静态属性，_proto_ 是一个实例属性
每个方法Function都有自己的原型属性prototype，指向它的原型对象Function.prototype
每个对象都有_proto_属性，指向自身构造函数的prototype
8. .call() 是做什么的
可以通过call显式改变this指向，apply，bind 也有类似作用
9. 手写一个call
Function.prototype.myCall = function (obj, ...args) { let fn = this obj = obj || window obj.fn = fn args = args || [] let res = obj.fn(...args) delete obj.fn return res }
10. 看代码，说输出
window.num = 1 var obj = { 'num': 4, 'dbl': (function () { this.num *= 2 return function () { this.num *= 2 } })() } var obj1 = obj.dbl obj1() obj.dbl() console.log(window.num + obj.num) // 12
11. 为什么自执行函数的this指向window
因为函数执行时，实际window调用了它，也就是window.函数名()，那么，里面的this指向当前调用函数的对象，就是window
12. promise 和 async await 有什么区别
两者都是实现异步的方案，Pormise是通过 .then 里卖弄的回调实现，async await 代码会更简介些，像同步代码的写法，可以说是改良版的promise
13. async await 怎么处理异常
可以用try catch
14. 如果有很多async await，不想每个都写try catch，有什么第三方库可以用
有个npm包，await-to-js
15. CSS三栏布局
- flex布局，中间flex：1
- 浮动布局，左右浮动，中间设margin
- 绝对定位，左右absolute，中间设margin
- 双飞翼布局
- 圣杯布局
16. flex的三个属性
flex-grow，flex-shrink，flex-basis；默认 0 1 auto
17. 发布者/订阅者模式 和 观察者模式有什么区别
发布者订阅者模式中有调度中心，统一收发信息
观察者模式中发布者订阅者存在依赖，发布订阅者模式不会
18. 为什么diff要有key
key能唯一的确定vnode节点，更高效的更新虚拟dom
19. 常用html5新标签有哪些
语义标签：<header> <footer> <nav> <article> <section>
多媒体标签：<video> <audio> <source>
还有<canvas>等
20. reset.css 是干什么的？为什么要用
reset.css 重置浏览器标签的样式表
HTML标签在浏览器中有默认样式，但是不同浏览器的默认样式也有差别，有时候浏览器的默认样式会带来一定麻烦
CSS reset就是定义一个css样式，吧浏览器的默认样式覆盖掉，便于开发
21. 知道哪些CSS单位
- px像素
- em相当于父元素的font-size；rem相当于根元素html的font-size
- vw / vh 相当于浏览器窗口的宽 / 高
22. chrome默认字体是12px，怎么去实现一个小于12px的字体大小
- 修改浏览器设置，更改最小字号
- 用transform: scale () 缩放
- 使用zoom变焦缩小
23. 伪类选择器和伪元素选择器的区别
伪类选择器（单冒号：）将特殊效果添加到特定选择器上，如 a:hover
伪元素选择器（双冒号：）在元素前后插入元素或样式，不在dom树中，只外部显示可见，如p::before
24. 伪元素选择器哪个属性不能少？
content属性必需，如果没有的话设为 content:' '
25. 普通函数的this指向
按照优先级：new绑定 > 显式绑定 (call, apply, bind) > 隐式绑定(指向调用它的对象) > 默认绑定
26. async await 本质上是什么
generator的语法糖
27. 如何把一个变量变为promise对象
Promise.resolve(obj)
28. 实现一个sleep函数
function sleep(time) { return new Promise(resolve => { setTimeout(() => { resolve() },time) }) }
29. 了解BFC吗？怎么开启
BFC：块级格式化上下文，个人理解BFC就是开启了一块独立的渲染区域，容器内的布局不会影响到外部解决margin重叠、高度塌陷等问题
创建BFC的方式：
①position设为absolute／fixed
②float设为除none之外的值
③overflow设为hidden／auto／scroll
④display设为inline-block／table-cell／table-caption／flex等
30. 常见的浏览器有什么区别？
全球常用的五大浏览器：IE浏览器／Edge浏览器Q、谷歌（Chrome）、火狐（Firefox）、Safari、Opera等。
浏览器的区别在于浏览器内核（渲染引擎）。
浏览器内核负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
IE浏览器
Trident 内核 同样用此内核的浏览器有：猎豹安全、360急速浏览器、百度浏览器
Firefox
Gecko 火狐浏览器内核
Safari
Webkit 苹果浏览器内核
Chrome/Opera
Blink 内核
其中Blink内核其实是Webkit内核的分支，谷歌浏览器的出现晚于苹果浏览器，是在Webkit内核的基础上二次开发升级的内核国产浏览器出现的更晚，一般都采用的是Webkit／Blink内核，比如：360、UC、QQ、搜狗等
31. 什么是同源策略？为什么需要同源策略
同源策略：
同源策略（Same Origin Policy）是一种约定，它是浏览器最核心最基本的安全功能。所谓的同源是指域名、协议、端口相同。不同源的客户端脚本在没有明确授权的情况下是不允许读写其他网站的资源
同源策略的限制：
1．Cookie、LocalStorage和IndexDB会话存储无法读取。
2．DOM无法获得。
3．AJAX请求不能发送。
同源策略作用：
1．防止恶意网页可以获取其他网站的本地数据。
2．防止恶意网站 iframe其他网站的时候，获取数据。
3．防止恶意网站在自已网站有访问其他网站的权利，以免通过cookie免登，拿到数据。
32. 常用的选择器 CSS
- 标签选择器
- 类选择器
- ID选择器
- 全局选择器
- 组合选择器
- 继承选择器
- 伪类选择器
33. 对一个元素清除浮动，有哪些解决办法？
- 额外标签法（该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清楚浮动的样式）
- 父元素添加overflow: hidden
- :after 伪元素法，为父元素清除浮动
- :after 和 :before 双伪元素清除浮动
34. 数组查询，删除 和 插入 的时间复杂度
查询的时间复杂度 O(1)
删除，插入 的时间复杂度 O(n)
35. 对称加密和非对称加密的区别
对称加密：加密，解密都用同一个密钥，比如：DES，3DES，AES
非对称加密：用来加密的密钥叫公钥；用来解密的密钥叫私钥；公钥，私钥都是成对生成的，公钥分发给其他人用来加密，私钥用来解密
比如：RSA，DSA，ECC，DH
36. 数字签名和数字证书的定义
1．数字证书
数字证书是一个经证书授权中心数字签名的包含公开密钥拥有者信息以及公开密钥的文件。简单地说，数字证书是一段包含用户身份信息、用户公钥信息以及份验证机构数字签名的数据。
它主要包含：
证书的版本信息；
证书的序列号，每个证书都有一个唯一的证书序列号；
证书所使用的签名算法；
证书的发行机构名称；
证书的有效期；
证书所有人的名称；
证书所有人的密钥对；
证书发行者对证书的签名；
2．数字签名的原理
数字签名是基于非对称密钥加密技术与数字摘要技术的应用，是一个包含电子文件信息以及发送者身份，并能够鉴别发送者身份以及发送信息是否被篡改的一段数字串。一段数字签名数字串，包含了电子文件经过Hash编码后产生的数字摘要，即一个Hash函数值以及发送者的公钥和私钥三部分内容。发送方通过私钥加密后发送给接收方，接收方使用公钥解密，通过对比解密后的Hash函数值确定数据电文是否被篡改。
3．数字签名和数字证书的关系
数字签名和数字证书的目的：
- 数字签名保证内容是真实的，没有被篡改
- 数字证书验证【内容的签署者】是否是【证书的登记者】
37. http有哪些请求方法
post方法，options方法，put方法，trace方法，head方法，connect方法，delete方法，get方法
38. http请求头字段有哪些
- HTTP Request Header 请求头
- Accept：指定客户端能够接收的内容类型。
- Accept—Charset：浏览器可以接受的字符编码集。
- Accept—Encoding：指定浏览器可以支持的web服务器返回内容压缩编码类型。Accept-Language：浏览器可接受的语言。
- Accept—Ranges：可以请求网页实体的一个或者多个子范围字段。AuthorizationHTTP：授权的授权证书。
- Cache—Control：指定请求和响应遵循的缓存机制。
- Connection：表示是否需要持久连接。（HTTP 1.1默认进行持久连接）
- CookieHTTP：请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。Content-Length：请求的内容长度。
- Content-Type：请求的与实体对应的MIME信息。 Date：请求发送的日期和时间。
- Expect：请求的特定的服务器行为。
- From：发出请求的用户的Email。
- Host：指定请求的服务器的域名和端口号。
- If—Match：只有请求内容与实体相匹配才有效。
- If—Modified—Since：如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码。
- If—None—Match：如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变。
- If—Range：如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。
- If—Unmodified—Since：只在实体在指定时间之后未被修改才请求成功。Max—Forwards：限制信息通过代理和网关传送的时间。
- Pragma：用来包含实现特定的指令。
- Proxy-Authorization：连接到代理的授权证书。 Range：只请求实体的一部分，指定范围。
- Referer：先前网页的地址，当前请求网页紧随其后，即来路。
- TE：客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息。
- Upgrade：向服务器指定某种传输协议以便服务器进行转换（如果支持。User-AgentUser-Agent：的内容包含发出请求的用户信息。
- Via：通知中间网关或代理服务器地址，通信协议。
- Warning：关于消息实体的警告信息
39. Content-Type 有哪些可选值
- text / html
- text / plain
- text / css
- text / javascript
- image / gif
- image / jpeg
- image / png
- application / x-www-form-urlencoded
- multipart / from-data
- application / json
- application / xml
40. spa单页面应用得优缺点
SPA (single-page application) 仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成，SPA不会因为
用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。
优点:
1) 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
2) SPA相对对服务器压力小;
3) 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点:
1) 首屏(初次)加载慢：为实现单页面Web应用功能及显示效果，需要在加载资源的时候将JavaScript、CSS统一加载，部分页面按
需加载;
2) 不利于SEOΩ：由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势。
41. 获取cookie的方法
1）插件获取 （谷歌浏览器插件Get Cookie For FPlus 可以一键获取当前网页的cookie）
2）通过浏览器控制台（输入console.log(document.cookie)）
3）书签获取 （新建书签，输入一个网址，获取cookie的时候，点击这个书签，就复制好了cookie）
42. prototype 和 constructor 的区别
注意：单从constructor这个属性来讲，只有prototype对象才有。每个函数在创建的时候，JS会同时创建一个该函数对应的prototype对象，而函数创建的对象。proto===该函数，prototype，该函数。prototype.constructor===该函数本身。故通过函数创建的对象即使自己
没有constructor属性,它也能通过proto找到对应的constructor,所以任何对象最终都可以找到其构造函数(null如果当成对象的话，将null除外)。记住，单从constructor这个属性来讲，只有prototype对象才有，所以才能实现继承。
43. Vue生命周期
- 创建前 / 后：beforeCreate / created
- 载入前 / 后：beforeMount / mounted
- 更新前 / 后：beforeUpdate / updated
- 销毁前 / 后：beforeDestroy / destroyed
第一次加载页面会调用beforeCreate，created，beforeMount，mounted(渲染在mounted完成)
44. Vuex
Vuex是一个专门为vue.js应用设计的状态管理架构，统一管理和维护这个Vue组件的可变化状态（可以理解为Vue组件中的data）
五大核心概念：state, getters, mutations, actions, modules
45. React中的props和state的用法
state是一种数据结构，用于组件挂载时所需数据的默认值
props是组件的配置，props由父组件传给子组件
46. react 组件之间如何通信
父子：
父传子：props
子传父：子调用父组件中的函数并传参
兄弟：
利用redux实现
所有关系通用方法：利用Pubsub订阅
47. React生命周期
挂载阶段：
- Mounting Component
- constructor ()
- static getDrivedStateFromProps (nextProps, prevState)
- render ()
- componentDidMount () 此阶段发送AJAX请求
更新时：
- Updateing State and Props
- static getDerivedStateFromProps (nextProps, prevState)
- shouldComponentUpdate (nextProps, nextState) 允许我们手动判断是否进行组件更新
- render()
- getSnapshotBeforeUpdate（prevProps, prevState)
- componentDidUpdate (previousProps, previousState, snapshot)
卸载时：
- Unmounting Component
- componentWillUnmount ()
48. React setState 的原理
当调用setState时，它并不会立即改变，而是会把要修改的状态放入一个任务队列，等到事件循环结束时，再合并更新，因此setState有异步、合并更新两个特性
49. 如何选择class Component 和 functional Component
在组件要包含内部状态或者使用到生命周期函数的时候，使用class Component，否则使用函数式组件
50. React 中 refs 的作用
refs是React提供给我们的安全访问DOM元素或者某个组件实例的句柄，我们可以为元素添加ref属性，然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
