备战前端面试

时间 2019-11-12

原文原文链接

1. js的typeof返回哪些数据类型？

答案：
js有哪几种数据类型：
object（复杂类型）
number function boolean undefined string symbol(ES6)（基本类型）
其中typeof isNaN //Functionhtml

2. 面向对象编程与面向过程编程的区别

答案：
面向对象和面向过程是两种不一样的编程思想。vue

面向过程就是分析出解决问题所须要的步骤，而后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就能够了。
面向对象是把构成问题事务分解成各个对象，创建对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

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

答案：
1) 箭头函数是匿名函数，不能做为构造函数，不能使用new
2) 箭头函数不绑定arguments，取而代之用rest参数...解决
3) 箭头函数不绑定this，会捕获其所在的上下文的this值，做为本身的this值
4) 箭头函数经过call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并无影响。
5) 箭头函数没有原型属性
6) 箭头函数不能当作Generator函数,不能使用yield关键字html5

4. eval函数的做用

答案：
eval() 函数计算 JavaScript 字符串，并把它做为脚本代码来执行es6

5. 函数防抖和节流

以防止一个函数被无心义的高频率调用
防抖: 触发事件后在 n 秒内函数只能执行一次，若是在 n 秒内又触发了事件，则会从新计算函数执行时间。编程

节流: 指连续触发事件可是在 n 秒中只执行一次函数
https://www.jianshu.com/p/c8b86b09daf0json

6. h5新增的标签有哪些？为何要增强语义化

HTML5 如今已经不是 SGML(标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增长。api

语义化更好的内容标签（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无效
【注意：块级元素即便设置了宽度，仍然是独占一行的】
3) 块级元素能够设置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的三个优点：
① 离线浏览
② 提高页面载入速度
③ 下降服务器压力

http://www.javashuo.com/article/p-hmzkrrnw-dp.html

10. ES6新的特性有哪些？

一、新增了let,const关键字
避免了变量提高，定义的变量只在块级做用域中起做用
二、提供了定义类的语法糖(class)
三、新增了一种基本数据类型(Symbol)
四、新增了变量的解构赋值
五、函数参数容许设置默认值，引入了rest参数，新增了箭头函数
默认参数：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
 ...
}

六、数组新增了一些API，如 isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
七、对象和数组新增了扩展运算符（...）
将一个数组转为用逗号分隔的参数序列
八、ES6 新增了模块化(import/export)
九、ES6 新增了 Set 和 Map 数据结构
十、ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
十一、ES6 新增了生成器(Generator)和遍历器(Iterator)
十二、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}`

1三、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. 两栏布局，如何实现左侧固定右侧自适应？

一、浮动，使左侧div浮动起来脱离文档流，右侧自动向上，默认宽度。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            float: left;
            height: 400px;
            background-color: #99F;
        }
        .main{
            height: 400px;
            background: #ccc;
        }
   </style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>

二、绝对定位，左侧块元素绝对定位；右侧默认宽度，且margin-left设置为左侧盒子的宽度

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 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>

三、弹性盒子，父元素设置为弹性布局，子元素经过flex的数值来控制所占空间的比例

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        }
        .left{
            width: 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. 三栏布局，如何实现左右定宽中间自适应宽度？

一、左右两栏浮动，中间宽度自适应（html布局中注意顺序）

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 400px;
            float: left;
            background-color: #99F;
        }
        .main{
            height: 400px;
            background: #ccc;
        }
        .right{
            width: 200px;
            height: 400px;
            float: right;
            background-color: #99F;
        }
    </style>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">主要</div>
</body>

二、绝对定位法，左右侧盒子定位到两侧，中间盒子默认宽度，设置margin值

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left,.right{
            width: 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>

三、弹性盒子。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        }
        .left,.right{
            width: 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>