面试题总结

1.JS基本数据类型有哪些？引用数据类型有哪些？

在 JS 中，存在着 7 种原始值，分别是： boolean null undefined number string symbol
引用数据类型:
对象Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function）

2.null和undefined 有什么区别？

（1）null是一个表示”无”的对象，转我数值是为0，undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined
（2）Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
（3）Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
典型用法是：
a、变量被声明了，但没有赋值时，就等于undefined
b、调用函数时，应该提供的参数没有提供，该参数等于undefined
c、对象没有赋值属性，该属性的值为undefined
d、函数没有返回值时，默认返回undefined
（4）null表示”没有对象”，即该处不应该有值。典型用法是： a、作为函数的参数，表示该函数的参数不是对象 b、作为对象原型链的终点

3.什么是闭包？

我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

4.谈谈你对原型链的理解

在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。
当函数经过new调用时，这个函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个__proto__属性，指向构造函数的原型对象。
JavaScript对象通过__proto__ 指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条, 即原型链。

5.定义一个函数add，实现add(2,3) //5 add(2,3)(5) //10

const add = (...args) => {let sum = args.reduce((pre, crt) => pre + crt);const accu = (...args2) => {sum += args2.reduce((pre, crt) => pre + crt);return accu;}accu.valueOf = () => sum;return accu;
}console.log(add(2, 3)(5)) //10

6.数组去重

es6:

function unique(arr){return Array.from(new Set(arr));
}

递归:

function unique(arr) {var array= arr;var len = array.length;array.sort(function(a,b){   //排序后更加方便去重return a - b;})function loop(index){if(index >= 1){if(array[index] === array[index-1]){array.splice(index,1);}loop(index - 1);    //递归loop，然后数组去重}}loop(len-1);return array;
}

7.call,bind,apply区别

call和apply基本一致，唯一的区别在于传参方式，apply把需要传参数放到一个数组（或者类数组）中传递进去，bind语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8。

8.CSS实现水平垂直居中

弹性布局

/*父元素*/
.father{display: flex;justify-content: center;align-items: center;
}

absolute + transform

.father{position:relative}
.son{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

vertical-align

.father{line-height: 300px;text-align: center;font-size: 0px;
}
.son{font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;text-align: left;
}

9.[“1”, “2”, “3”].map(parseInt)得到什么？

答案是：[1, NaN, NaN].

原因：主要是下面这3点

1. map函数传递参数的定义

2. parseInt函数针对于radix这个参数的理解

3. 二进制当中没有"3"这个数码

10.一个URL（统一资源路径地址）包含哪些部分呢？

举个例子，比如 “https://editor.csdn.net/md?articleId=105535050”，在这个例子中我们可以分成六部分；

1、传输协议：http，https

2、域名：例www.baidu.com为网站名字。 baidu.com为一级域名，www是服务器

3、端口：不填写的话默认走的是80端口号

4、路径 editor.csdn.net/md。/表示根目录

5、携带的参数：？articleId=105535050

6、哈希值：可有可无，在单页应用开发中作为前端路由使用（Vue Router、React Router）

11.从输入URL到页面加载完成期间经历了什么(简写)

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
3、发送HTTP请求，接受HTTP响应
5.服务器处理请求并返回内容。
6、根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件，浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户
7、断开TCP连接（四次挥手）

12.跨域的产生和解决方法

为了网络安全起见，浏览器设置了一个同源策略，规定只有域名，端口，协议全部相同，就叫做同源。当页面在执行一个脚本时，会检查访问的资源是否同源，如果不是，就会报错。可是在实际开发中，经常会有跨域加载资源的需求，避免不了跨域请求，所以就出现了跨域。
解决方法
1、JSONP – 原理就是利用了script标签，在标签外套了一层壳，利用标签特性达到跨域加载资源的效果。
2、CORS – 跨站资源共享，它是跨域的官方解决方案，升级版的JSONP。原理是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。请求和响应都不包含cookie信息。
3、webSockets – 不受同源策略影响。原理是因为它不使用HTTP协议，而使用一种自定义的协议，专门为快速传输小数据设计。
4、Nginx – 代理跨域。反向代理跨域。

13.webSockets了解吗？

WebSocket是HTML5中的协议，支持持久连接，http协议不支持持久性连接（长连接，循环连接的不算）。Http1.0和HTTP1.1都不支持持久性的链接。
其优点就是，只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力。

14.事件循环

（1）所有同步任务都在主线程上执行，形成一个[执行栈]
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

15.事件模型

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。
　　
事件委托：通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

前端面试题总结（一）相关推荐

「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
noah的前端面试题（三）｜掘金技术征文
上一篇前端面试题(二) 1.JavaScript对于cookie的读.写操作写入 cookie function setCookie(cName, cValue, days) { var expi ...
应届生web前端面试题_2020最新Web前端经典面试题试题及答案（持续更新）
Web前端面试题 Web前端面试题:说说你对webpack的看法解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
前端面试题（html篇）
前端面试题(html篇) 转载于:https://www.cnblogs.com/mc67/p/5311613.html
java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
下面有关html5标签说法错误的有,前端面试题（2016含答案）
标签定义命令按钮,比如单选按钮.复选框或按钮 8) 下述有关css属性position的属性值的描述,说法错误的是? a. b. c. d. static:没有定位,元素出现在正常的流中 fixed: ...
前端攻城狮学习笔记七：常见前端面试题之HTML/CSS部分（二）
前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面"内容是什么"的问题. 2.表示层:由 ...
2017年秋招二十套前端面试题分享
前端面试--四月二十家前端面试题分享 1.正文第一套第二套第三套第四套第五套第六套第七套第八套第九套第十套第十一套第十二套第十三套第十四套第十五套第十六套第十七套第 ...

前端面试题总结（一）