备战前端面试

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无效
【注意：块级元素即使设置了宽度，仍然是独占一行的】
1. 块级元素可以设置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{
			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>

2、绝对定位，左侧块元素绝对定位；右侧默认宽度，且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>

3、弹性盒子，父元素设置为弹性布局，子元素通过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. 三栏布局，如何实现左右定宽中间自适应宽度？

1、左右两栏浮动，中间宽度自适应（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>

2、绝对定位法，左右侧盒子定位到两侧，中间盒子默认宽度，设置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>

3、弹性盒子。

     <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>

posted @ 2019-08-05 10:44 sunidol 阅读(224) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

诗情画意，金声玉润