1. js的typeof返回哪些数据类型？
答案：
js有哪几种数据类型：
object（复杂类型）
number function boolean undefined string symbol(ES6)（基本类型）
其中typeof isNaN //Function
2. 面向对象编程与面向过程编程的区别
答案：
面向对象和面向过程是两种不同的编程思想。
- 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
- 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
3. 普通函数与箭头函数的区别
答案：
- 箭头函数是匿名函数，不能作为构造函数，不能使用new
- 箭头函数不绑定arguments，取而代之用rest参数...解决
- 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
- 箭头函数通过
call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。 - 箭头函数没有原型属性
- 箭头函数不能当做Generator函数,不能使用yield关键字
4. eval函数的作用
答案：
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行
5. 函数防抖和节流
以防止一个函数被无意义的高频率调用
防抖: 触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流: 指连续触发事件但是在 n 秒中只执行一次函数
https://www.jianshu.com/p/c8b86b09daf0
6. h5新增的标签有哪些？为什么要加强语义化
HTML5 现在已经不是 SGML(标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 语义化更好的内容标签（header,nav,footer,aside,article,section,datalistfieldset）
- 表单元素：calendar，date，time，number, url , search , mail;
- 拖拽释放(Drag and drop) API
- 音频、视频(audio,video)API
- 画布(Canvas) API
- 地理(Geolocation) API
- 存储(localStorage , sessionStorage)API (本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除)
新标签：
文档类型设定：<!doctype html>
字符设定：
加强语义化：
- 用正确的标签做正确的事情。
- html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析;
- 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
7. 为什么要清除浮动？如何清除浮动？
浮动引起的问题：
1）子元素浮动导致父元素内高度为0，父级盒子不能被撑开，发生高度塌陷，父元素背景不能正常显示，边框不能被撑开，margin和padding值不能正常显示。
2）与子元素同级的非浮动元素会被遮盖
如何清除浮动？
1）给父元素设置合适的高度
2）给父元素添加样式：overflow:hidden/auto,这个属性相当于触发了BFC,让父级紧贴内容
3）在最后一个子元素的后面追加一个空元素，并为其添加样式.clear{clear:both};
4）采用为元素，给父元素后面追加:after,并设置样式为.clearfix{content:""; clear:both; display:block;}
8. 行内元素，块级元素有哪些？它们的区别
- （1）行内元素
<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del> - （2）块级元素
<div>、<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<tr>、<td>、<div>、<form> - 两者区别：
- 1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容 而变化 - 2） 块级元素可以设置 width, height属性，行内元素设置width, height无效
【注意：块级元素即使设置了宽度，仍然是独占一行的】 -
- 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
9. HTML5有几种存储方式？它们之间的区别？
-
h5之前，存储主要是用cookies。用来维护用户计算机中的信息，直到用户删除。
主要应用：购物车、客户登录 -
cookie的数量（<20条）和大小（<4KB）都有限制；
-
cookie数据会在http请求头中携带（即cookie在浏览器和服务器间来回传递）；
-
cookie在过期时间之前都一直有效，即使窗口或浏览器关闭。
-
cookie在所有同源窗口中都是共享的
-
localStorage，以键值对(Key-Value)的方式存储，
主要应用：数组，图片，json，样式，脚本。（只要是能序列化成字符串的内容都可以存储） -
localStorage大小限制为5M
-
localStorage不会自动把数据发给服务器，仅在本地保存
-
localStorage始终有效，窗口和浏览器关闭也一直保存，因此用作持久数据
-
localStorage在所有同源窗口中都是共享的
-
sessionStorage用于在本地存储一个会话中的数据。
-
sessionStorage大小限制为5M
-
sessionStorage不会自动把数据发给服务器，仅在本地保存
-
sessionStorage仅在当前浏览器窗口关闭钱有效，不能持久保持；
-
sessionStorage不能再不同的浏览器窗口共享，即使事同一个页面
-
application cache，应用程序离线缓存，在用户没有与网络连接时，可以正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件。
使用方法： -
①配置manifest文件
<html manifest = "demo.appcache">...</html> -
②Manifest 文件：
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：- ①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- ②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- ③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
-
③服务器上：manifest文件需要配置正确的MIME-type，即
text/cache-manifest。 -
Application Cache的三个优势：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
https://www.cnblogs.com/LuckyWinty/p/5699117.html
10. ES6新的特性有哪些？
- 1、新增了let,const关键字
避免了变量提升，定义的变量只在块级作用域中起作用 - 2、提供了定义类的语法糖(class)
- 3、新增了一种基本数据类型(Symbol)
- 4、新增了变量的解构赋值
- 5、函数参数允许设置默认值，引入了rest参数，新增了箭头函数
默认参数：
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
- 6、数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
- 7、对象和数组新增了扩展运算符（...）
将一个数组转为用逗号分隔的参数序列 - 8、ES6 新增了模块化(import/export)
- 9、ES6 新增了 Set 和 Map 数据结构
- 10、ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
- 11、ES6 新增了生成器(Generator)和遍历器(Iterator)
- 12、ES6中的模板表达式
模版表达式在其他语言中一般是为了在模版字符串中输出变量
在反引号包裹的字符串中，使用${NAME}语法来表示模板字符
//ES5
var name = 'Your name is ' + name + '.'
var url = 'http://localhost:3000/api/messages/' + id
//ES6
var name = `Your name is ${first} ${last}`
var url = `http://localhost:3000/api/messages/${id}`
- 13、ES6中的多行字符串
利用反引号 ``
11. 下面程序输出的是什么？如何修改能够输出1-10
for(var i = 0; i < 10; i++){
setTimeout(function(){
console.log(i)
},10)
}
输出：10个10
//改进：
for(var i = 1; i <= 10; i++){
(function(i){
setTimeout(function(){
console.log(i)
},10)
})(i);
}
//改进2：
for(let i = 0; i <= 10; i++){
setTimeout(function(){
console.log(i)
},10)
}
12. vue实现双向绑定的原理是什么？
13. vue组件之间是怎么传值的？（父子组件，兄弟组件）
14. 让A、B两个按钮实现按点击次序执行请求
15. 怎么实现文本不换行？超出部分显示省略号
white-space:nowrap;/*强制在一行显示*/
overflow:hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/*文本超出部分用省略号代替*/
16. 两栏布局，如何实现左侧固定右侧自适应？
1、浮动，使左侧div浮动起来脱离文档流，右侧自动向上，默认宽度。
<style>
*{
margin: 0;
padding: 0;
}
.left{
200px;
float: left;
height: 400px;
background-color: #99F;
}
.main{
height: 400px;
background: #ccc;
}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>
2、绝对定位，左侧块元素绝对定位；右侧默认宽度，且margin-left设置为左侧盒子的宽度
<style>
*{
margin: 0;
padding: 0;
}
.left{
200px;
position: absolute;
top: 0;
left: 0;
height: 400px;
background-color: #99F;
}
.main{
margin-left: 200px;
height: 400px;
background: #ccc;
}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>
3、弹性盒子，父元素设置为弹性布局，子元素通过flex的数值来控制所占空间的比例
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
}
.left{
200px;
height: 400px;
background-color: #99F;
}
.main{
height: 400px;
background: #ccc;
flex: 1;
}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>
17. 三栏布局，如何实现左右定宽中间自适应宽度？
1、左右两栏浮动，中间宽度自适应（html布局中注意顺序）
<style>
*{
margin: 0;
padding: 0;
}
.left{
200px;
height: 400px;
float: left;
background-color: #99F;
}
.main{
height: 400px;
background: #ccc;
}
.right{
200px;
height: 400px;
float: right;
background-color: #99F;
}
</style>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">主要</div>
</body>
2、绝对定位法，左右侧盒子定位到两侧，中间盒子默认宽度，设置margin值
<style>
*{
margin: 0;
padding: 0;
}
.left,.right{
200px;
height: 400px;
background-color: #99F;
position: absolute;
top: 0;
}
.left{
left:0;
}
.main{
height: 400px;
background: #ccc;
margin: 0 200px;
}
.right{
right: 0;
}
</style>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">主要</div>
</body>
3、弹性盒子。
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
}
.left,.right{
200px;
height: 400px;
background-color: #99F;
}
.main{
height: 400px;
background: #ccc;
flex: 1;
}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
<div class="right">右侧</div>
</body>